Dynamic buttons (click) with custom logic in angular

Question

I have some buttons that I store in DB.

But I don't know how to work with (click)

For example, I have a button "Close" that on click sets a boolean to false isVisible = false

Model:

export interface Button {
    label: string;
    class: string;
    iconClass: string;
    doJob: any;
}

Template:

<p-footer *ngIf="hasPopupButtons()">
    <a (click)="doStuff(button.doJob)" *ngFor="let button of Buttons" [ngClass]="button.class"><i
            [ngClass]="button.iconClass"></i>{{button.label}}</a>
</p-footer>

Click function:

doStuff(dostuff: any) {
    //??
}

How can I do this in a elegant way?

Adrita Sharma · Accepted Answer · 2019-09-03 08:47:49Z

1

You can have the property doJob as a `function which you want to call

 let button = {
        label: "Your Label";
        class: "your-class",
        iconClass: "your-icon-class,
        doJob: () => this.doStuff('doStuff')
 }

Template:

<a (click)="button.doJob()" *ngFor="let button of Buttons" [ngClass]="button.class"><i
            [ngClass]="button.iconClass"></i>{{button.label}}</a>

answered Sep 3, 2019 at 8:47

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

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

Collectives™ on Stack Overflow

Dynamic buttons (click) with custom logic in angular

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