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

Paul Rooney · Accepted Answer · 2019-02-19 05:30:10Z

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, 2019 at 5:30

Paul Rooney

21.7k9 gold badges47 silver badges64 bronze badges

answered Jun 28, 2017 at 13:05

Robin Dijkhof

19.3k14 gold badges72 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Duannx · Accepted Answer · 2017-06-29 02:25:15Z

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()">

Christian Benseler · Accepted Answer · 2017-06-28 12:37:28Z

1

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.

answered Jun 28, 2017 at 12:37

Christian Benseler

8,0839 gold badges42 silver badges73 bronze badges

Comments

Gowtham · Accepted Answer · 2017-06-28 12:41:34Z

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, 2017 at 12:41

Gowtham

3,2332 gold badges23 silver badges31 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related