How to call a function of component from template of another component in ionic 2

Question

I want to call a function of component from template of another component in

ionic 2.I get a dashboard in in my app dashboard.html 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 showing with the help of 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 student component'function from dashboard Component

I created 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");
    }
}

score 6 · Answer 1 · edited Feb 19 '19 at 05:30

6

If your studentcomponent is a direct child of dashboard you can use a viewchild.

<page-student #student></page-student>

In you component:

@ViewChild('student') student: StudentComponent

edited Feb 19 '19 at 05:30

Paul Rooney

20,879
9
40
61

answered Jun 28 '17 at 13:05

Robin Dijkhof

18,665
11
65
116

score 1 · Answer 2 · answered Jun 28 '17 at 12:37

You definitely should take a look at Angular's services and how to build a custom one. You can see a thread about this here.

Basically, you will create an Injectable, add it to your NgModule (or a shred module) and then inject then in the components you need to use it. Other great tutorial is here.

score 1 · Answer 3 · answered Jun 29 '17 at 02:25

First, the best way to create a function and use in many component is use service.
Second, if you still want to call a function in other component, you can do like that:

Step1: Inject your StudentComponent in 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){
}

Step2: Now you can call StudentComponent's function:

fetchAllClass(event) {  
this.studentComponent.fetchAllClass(event);
}

Step3: You can call new fetchAllClass function in template:

<a href="" (click)="fetchAllClass()">

score 0 · Answer 4 · answered Jun 28 '17 at 12:41

0

You need to create a provider and put all the functions that fetches data in there. This way you can easily import the provider and get the data wherever you want.

For more, refer this post

answered Jun 28 '17 at 12:41

Gowtham

3,198
2
19
30

How to call a function of component from template of another component in ionic 2

4 Answers4