Angular 4 Component Bind Function

Question

I'm making a custom component to build a table.

export class TableComponent implements OnChanges {
    @Input() records: any[];
    @Input() caption: string;
    @Input() config: TableConfig[];
}

export class TableConfig {
    basePath: string;
    actions?: object[];
}

//Actions example
/*

action = { icon: "", description: "", onClick: thisMustReceiveAFunction }

*/

I just call my component where I want the table

<my-table
     [records]="entities"
     [caption]="Table"
     [config]="myConfig">
</my-table>

And initialize my config inside my component caller

myConfig: TableConfig = {
    basePath: "users",
    actions: [
        {
            icon: "glyphicon glyphicon-pencil",
            description: "edit",
            onClick: this.MyEditFunction
        },
        {
            icon: "glyphicon glyphicon-trash",
            description: "delete"
            onClick: this.MyDeleteFunction
        }
    ]
};

MyEditFunction(): void { console.log('edit clicked'); }
MyDeleteFunction(): void { console.log('delete clicked'); }

But when I try to make a call at my table template, it doesnt work.

<button class="btn btn-default" *ngFor="let action of config.actions" (click)="action.onClick()">
    <span class="{{action.icon}}"></span>
</button>

you get any error?? if so what is it?

Aravind
– Aravind

2017-06-09 17:40:43 +00:00
Commented Jun 9, 2017 at 17:40 — Aravind
– Aravind, Commented Jun 9, 2017 at 17:40

Aravind · Accepted Answer · 2017-06-09 17:44:48Z

1

You should be using type safety operator ? because the DOM renders even before your data is retrieved.

<button class="btn btn-default" *ngFor="let action of config?.actions" 
     (click)="action.onClick()">
    <span class="{{action?.icon}}"></span>
</button>

or you can use an *ngIf to ensure that the DOM is not loaded if the data is not available as below,

<span *ngIf="config.actions.length >  0">
   <button class="btn btn-default" *ngFor="let action of config.actions" (click)="action.onClick()">
        <span class="{{action.icon}}"></span>
   </button>
 </span>

answered Jun 9, 2017 at 17:44

Aravind

41.7k16 gold badges97 silver badges111 bronze badges

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

1 Comment

Lucas Freitas Over a year ago

I think that its not the problem but now I rewrite the code and its working...So I will accept your answer because of the ? trick :D

Collectives™ on Stack Overflow

Angular 4 Component Bind Function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related