how to call a method from html page to a class - html

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

Answer 1

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