How to call a function of one component in another

Question

I have 2 components navbar and login,I want to call a function in navbar in login component and so far i tried this but did'nt worked...... My navbar.ts,

import {Component, OnInit} from '@angular/core';

@Component({
    selector: 'header-Navbar',
    templateUrl: './app/navbar/navbar.html',
})
export class Navbar implements OnInit  {

    constructor(public router: Router) {

    } 
    get(){
         if (this.user == null) {
            this.showstartupbuttons = true;
            this.showsicons = false;
        }
        else {
            this.username = this.user.username;
            this.showsicons = true;
            this.showstartupbuttons = false; 
        }
    }

My login.ts,

import {Component, OnInit} from '@angular/core';
@Component({
    templateUrl: './app/login/login.html',
    providers:[Navbar]
})
export class Login implements onInit{
    ckeditorContent:any;
    constructor(public navbar:Navbar) {}
      ngOnInit(){
           this.navbar.get();
      }

I used providers but i am not sure about these process.Can anyone suggest help please.

see my question on this - stackoverflow.com/questions/40219356/… Its calling properties but you can call functions same way. unfortunately I am into a problem that is not solved. Maybe you know — Manoz
– Manoz, Commented Oct 26, 2016 at 5:16

Sefa · Accepted Answer · 2016-10-26 05:09:02Z

1

You can use a service for component interactions like this.

import { Subject }    from 'rxjs/Subject';
import { Injectable } from '@angular/core';

@Injectable()
export class NavbarService{
    private getSource = new Subject<any>();
    get$ = this.getSource.asObservable();

    triggerNavbarGet(){
        this.getSource.next(null);
    }
}

You need to inject this service to both navbar and login. Remember, services are singleton for each provider. So this service needs to be provided by a component that contains both navbar and login.

On your navbar component:

constructor(public router: Router, navbarService: NavbarService) {
    navbarService.get$.subscribe(param => {this.get();})
}

And you can trigger this function on your login component like

constructor(public navbar:Navbar, private navbarService: NavbarService) {}
      ngOnInit(){
           this.navbarService.triggerNavbarGet();
      }

More about component interactions here.

answered Oct 26, 2016 at 5:09

Sefa

9,00010 gold badges54 silver badges85 bronze badges

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

4 Comments

MMR Over a year ago

But i cant keep @injectable() to my navbar component since its a component

Sefa Over a year ago

You need to add @Injectable() only to service. Don't add it to components. You can also remove providers:[Navbar] on your login component. You won't need it with my solution.

MMR Over a year ago

Actually my navbar is a component and to use it in my login.ts i must put @Injectable to it but its a component .......Is there any otherway?

Sefa Over a year ago

I know your navbar is a component. You are supposed to create a service for it. In my answer i created one for you called NavbarService. Please read the documentation at the end of my answer.

Collectives™ on Stack Overflow

How to call a function of one component in another

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related