CODEWITHSUNDEEP
angulartypescript
Gerald Hughes
Gerald Hughes

Reputation: 6159

Dynamic buttons (click) with custom logic in angular

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?

Upvotes: 3

Views: 329

Answers (1)

Adrita Sharma
Adrita Sharma

Reputation: 22213

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>

Upvotes: 1

Related Questions