Angular Dynamically assign action to Button (Click)

Question

I have an array to store the alerts to display.

appLevelAlert

     const alert = {
     message: 'Your account is not activated.'
      + ' Select the link in your email inbox to activate your account',
      actionName: 'Resend Email',
      action: 'resendEmail()'
    };

    this.appLevelAlert = this.appLevelAlert || [];
    this.appLevelAlert.push(alert);

I would like to assign the resendEmail() in appLevelAlert.action to the (Click) of a button.

<clr-alert [clrAlertType]="'info'" [clrAlertAppLevel]="true" *ngFor='let alert of clarityAlertService.appLevelAlert'>
<clr-alert-item>
    <span class="alert-text">
        {{alert.message}}
    </span>
    <div class="alert-actions">
        <button class="btn alert-action" (click)="[alert.action]">{{alert.actionName}}</button>
    </div>  
</clr-alert-item>

I'm not sure if this is possible, can anyone help me on this?

action: 'resendEmail()' in your example is a string, change it to an inline-function, then call it (click)="alert.action()" — enno.void
– enno.void, Commented Jan 3, 2019 at 9:03

splash · Accepted Answer · 2019-01-03 09:23:58Z

3

This is a simplified working example:

import { Component } from '@angular/core';

@Component({
   selector: 'my-app',
   template: `<p>{{alert.message}}</p>
   <button type="button" (click)="alert.action()">{{alert.actionName}}</button>`
})
export class AppComponent  {

    readonly alert = {
        message: 'Your account is not activated.',
        actionName: 'Resend Email',
        action: () => this.resendEmail()
    };

    resendEmail() {
        console.log('send email');
    }
}

answered Jan 3, 2019 at 9:23

splash

13.4k1 gold badge49 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular Dynamically assign action to Button (Click)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related