0

I have created a child component called 'SideMenuComponent'. It dynamically creates menu buttons according to "items" input.

export class SideMenuComponent {
  @Input() items: IMenuNode[];
...

template

<div *ngFor="let item of items">
 <button (click)="item.click(item)">{{item.text}}</button>
</div>

And in the parent component, i created a menu array.

export class ParentComponent {
     public items: IMenuNode[] = [
        {
          text: "Help",
          icon: "help",
          click: () => { console.log("help me")}
        },
        {
          text: "Feedback",
          icon: "feedback",
        }
      ];
...

and used it in the template.

<sidemenucomponent-selector [items]="items"></sidemenucomponent-selector>

Buttons and their icons are displayed without a problem. However, click function does not work. When I click Help it does not print "help me"

click: () => { console.log("help")}

How can I fix it?

Cory
  • 929
  • 12
  • 19
  • 1
    Do the click events need to have completely different functionality or are they going to perform similarly? – Oliver Cooke Feb 07 '17 at 08:37
  • 1
    @Cory Could you recreate the issue in a plunker? It worked fine for me when I tested your code. – AT82 Feb 07 '17 at 10:01
  • I recreated it in a plunker. It worked. Now it works on my project, too. I did not change anything it may be some compile or build problem, I'm not sure. Sorry for taking your time and thank you very much. – Cory Feb 07 '17 at 11:09
  • Check the following link https://stackoverflow.com/questions/42298258/dynamic-click-function-angular2 and you will find your answer. – Ratan Kalwa Jun 20 '17 at 12:06

0 Answers0