How to call a component function from another component's template in ionic 2
I want to call a component function from another component's template in
ionic 2.I get the dashboard in my dashboard.html app using home.ts
component.
<ion-content>
<div class="dashboardSection">
<a href="" (click)="fetchAllClass()">
<div class="header padding text-center classes common">
<img src="assets/images/icos_15.png" alt="Your logo here" width="50%" height="auto"/>
<p class="Sectiontitle">STUDENTS</p>
</div>
</a></div>
</ion-content>
this is displayed with home.ts
doLogin(event) {
var user1 =this.loginForm.value;
var password = this.loginForm.controls.password.value;
this.homeService.doLogin(user1).subscribe(
user =>{
this.user = user.results;
this.storage.set('isLoggedIn', 'shahjad');
this.navCtrl.setRoot(DashboardComponent, {thing1: user });
},
err => {
console.log(err);
},
() => console.log('login complete')
);
}
Now, I want to call a member component function from the toolbar
I created a student component like students.ts
@Component({
selector: 'page-students',
templateUrl: "./students.html"
})
export class StudentsComponent {
dashboardItem: any;
mode = "Observable";
errorMessage: string;
constructor(public fb: FormBuilder,private studentsService: StudentsService,public navCtrl: NavController,private storage: Storage,private menu: MenuController) {}
fetchAllClass(event) {
alert("fd");
}
}
source to share
You should definitely take a look at Angular services and how to create a custom one . You can see a thread about this here .
Basically, you create an Injectable, add it to your NgModule (or shredder module), and then inject it into the components you need to use. Another great tutorial here.
source to share
You need to create a provider and put all the functions that retrieve data there. This way you can easily import the provider and get the data wherever you want.
See this post for details
source to share
-
First, the best way to create a function and use it in many components is to use service .
-
Second, if you still want to call a function in another component, you can do this:
Step 1: Add yours StudentComponent
to DashboardComponent
:
import { Component,Inject,forwardRef } from '@angular/core';
import {StudentComponent} from '../component/students'
@Component({
selector: 'dashboard',
templateUrl: 'dashboard.html',
providers:[StudentComponent]
})
constructor(@Inject(forwardRef(() => StudentComponent))private studentComponent: StudentComponent){
}
Step 2: Now you can call the StudentComponent function:
fetchAllClass(event) {
this.studentComponent.fetchAllClass(event);
}
Step 3: You can call the new function fetchAllClass
in the template:
<a href="" (click)="fetchAllClass()">
source to share