CODEWITHSUNDEEP
htmlangulartypescriptionic-framework
JBD
JBD

Reputation: 731

how to call a method from html page to a class

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:

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

<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>

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');

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

Upvotes: 0

Views: 749

Answers (1)

Ramesh Reddy
Ramesh Reddy

Reputation: 10662

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();
}
}

Upvotes: 1

Related Questions