how to call a method from html page to a class

Question

I'm working on IONIC and I'm trying to do a "dynamic" side menu.

My problem is to call a method from the side-menu "component". Well there is no problem to call it if the method was in the "TS file" related to the "HTML file" like this <ion-label (click)="onSearch()"> But the method onSearch() is not in the "TS file" related to the "HTML file". Let me explain...

The side-menu as been made like this:

in app.component.html

<ion-app>
  <app-side-menu></app-side-menu>
  <ion-router-outlet id="mainContent" main></ion-router-outlet>
</ion-app>

in the side-menu.html component

<ion-menu slide="start" type="overlay" contentId="mainContent" menuId="slidingMenu1" id="slidingMenu1">

  <ion-header>
    <ion-toolbar color="primary">
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <ion-menu-toggle auto-hide="false">
        <ion-item>
          <ion-icon name="Search" color="primary" slot="start"></ion-icon>
          <ion-label (click)="onSearch()">
            Search
          </ion-label>
      </ion-menu-toggle>
    </ion-list>
  </ion-content>
</ion-menu>

and I have a service, CoreMenuService, that call the side-menu, like this :

constructor(public menu: MenuController) { }

 // Toggle the Menu1 and hide the one you do not need
  public toggleMenu1() {
    this.menu.enable(true, 'slidingMenu1');
    this.menu.toggle('slidingMenu1');

then in the page I need I will call the side menu:

HTML File

<ion-header>
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-button (click)="onOpenMenu()"><ion-icon name="menu"></ion-icon></ion-button>
      </ion-buttons>
      <ion-title>person</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <p class="ion-padding">It's the Person page</p>
  </ion-content>

TS File where I want use the method trigger by the side-menu

export class PersonPage implements OnInit {

  constructor( public menu: CoreMenuService ) {}

  ngOnInit() {}

  onOpenMenu() {
    this.menu.toggleMenu();
  }

  onShare() {
    console.log('shared');
  }
}

So how can I use the method declared in the PersonPage.ts, onShare() from the side-menu component ?

I hope it's clear for you, and that you understand me well. :)

There is the source code if you need it to understand better : Code

Thanks for your help

The only way I know of is to add a function in the TS file related to your Side Menu component and make that function call the desired function from it. — Mouradif, Sep 12 '19 at 09:51
If `onShare()` is required by two components why not place it in a service and call it from component. — Ramesh Reddy, Sep 12 '19 at 09:55
also see this if you want to call a function of another component (as @KiJéy suggested): https://stackoverflow.com/questions/37587732/how-to-call-another-components-function-in-angular2 — yaya, Sep 12 '19 at 09:56
@ Ki Jéy Yes, I think the same, but I don't know doing this because "PersonPage.ts" is not a service. So if I call it like this ```let m = PersonPage.onShare();``` it doesn't work. So i tried it by using the constructor and it doesn't like it too, because it's not a service. — JBD, Sep 12 '19 at 09:57
@Ramesh onShare is an exemple, it can be any other created method. I'm trying to do a dynamic slide-menu, so method called by clicking in the side-menu can be different according to where the menu is called. — JBD, Sep 12 '19 at 10:04
@Ramesh When I click in the side menu to the "item" it will trigger a method declared in the page where the side menu is declared. So the name of the method called can have an other name, it's a dynamic menu I'm trying to do. I f you prefer let's call ```onShare()``` ```onMethodCall()``` and the any code that will be in ```onMethodCall()``` is different according to the page. — JBD, Sep 12 '19 at 10:20
So if I get this correct you want to call different methods in each of the components like person home etc from side menu component? — Ramesh Reddy, Sep 12 '19 at 10:28
@Ramesh Yes, the side-menu will have every time a different method "name" that will be according by the page where the side-menu is called. If the page have a method call titi() in the side-menu you will have the method titi(). So when you willl click on titi() you will have the page method trigger. If you download the code I've put and execute it, you will understand it well. I'm arriving to do it well when a call a link (See the side menu in home page and in person page, then click in planet page and you will understand me) :) — JBD, Sep 12 '19 at 10:41
@yaya the link you have post looks good but hard to make it in practice for me :( Could you, please, make a better code in answer related to my question ? — JBD, Sep 12 '19 at 10:59

score 1 · Accepted Answer · answered Sep 12 '19 at 11:07

Try this In your side menu component.ts you can do something like:

import { PersonPage } from './../../pages/person/person.page';
export class SideMenuComponent implements OnInit , OnDestroy {
 onShare() {
  const personPage = new PersonPage(null);
  personPage.onShare();
}
}

how to call a method from html page to a class

1 Answers1