Ionic/Angular - Run method with name from html

Question

I have a menu in an Ionic Angular application.

<ion-menu-toggle auto-hide="false" *ngFor="let p of menuItems; let i = index">
   <ion-item button (click)=p.method >
       <ion-icon slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
   </ion-item>
</ion-menu-toggle>

    public menuItems = [
    { title: 'New', method: this.newFile, icon: 'add' },
    { title: 'Open', method: this.openFile, icon: 'download' },
    { title: 'Save', method: this.saveFile, icon: 'save' },
    { title: 'Export', method: this.exportFile, icon: 'archive' }
    ]
    
    newFile(){ console.log("New");}
    openFile(){ console.log("Open");}
    ...

But the button click does nothing.

Is there a way to pass the method with the list or am i forced to have a method with a switch ?

   <ion-item button (click)=menuSwitch(p.method) >

    menuSwitch(item){
        if(item == 'New')
            NewFile();
        ...
    }

armin momeni · Accepted Answer · 2022-02-15 22:48:12Z

1

Of course you can do it. This is JS. You can do any thing. Just change your click like below

  <ion-menu-toggle auto-hide="false" *ngFor="let p of menuItems; let i = index">
    <ion-item button (click)="p.method()">
      <ion-icon slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
    </ion-item>
  </ion-menu-toggle>

answered Feb 15, 2022 at 22:48

armin momeni

3313 silver badges13 bronze badges

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

4 Comments

Foxhunt Over a year ago

It works great ! But visual studio still throws an error

This expression is not callable.   Not all constituents of type 'string | (() => void)' are callable.     Type 'string' has no call signatures. (ngtsc(2349))

armin momeni Over a year ago

how about this? stackoverflow.com/a/57246512/5894095

Foxhunt Over a year ago

It works too but the error is still here.

armin momeni Over a year ago

are you sure it's not eslint error? just comment every thing in eslint file in project root and check if it still exists

Collectives™ on Stack Overflow

Ionic/Angular - Run method with name from html

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related