How to call header component function to another component in angular 2?

Question

I want to call showmodel(displayType) from another compoent.How to call header component function to another component?

header.compoent.ts

    import { Component,Renderer } from '@angular/core';
    import { Title,DOCUMENT  } from '@angular/platform-browser';
    import { CountriesService } from '../services/countries.services';
    import { Router,ActivatedRoute, Params } from '@angular/router';
    import {  AuthenticationService } from '../services/authentication.service';
    import { Observable } from 'rxjs/Observable';
    import {FacebookService, InitParams, LoginResponse,LoginOptions} from 'ngx-facebook';


    @Component({
      moduleId: module.id,
      selector: 'app-header',
      templateUrl: 'header.component.html',
      styleUrls: ['../app.component.css'],
    })
    export class HeaderComponent {    


        public visible = false;
        public visibleAnimate = false;
        public visibleRegister = false;
        public visibleAnimateRegister = false;

        registerformcont= false;
        registerActive = true;
        loginactive = false;
        currentUser: any = {};
        PopupTitle='';
        callBackfunc='';
        responseNameCheck:any={};
        LoginOptions:any={};
        response:any={};
        FacebookResponse:any={};

     constructor(
            title: Title,
            private countriesService: CountriesService,
            private Router: Router,
            private authenticationService: AuthenticationService,   
            private fb: FacebookService

     ) {  

        let initParams: InitParams = {
          appId      : '*********',
          cookie     : true,
          xfbml      : true,
          version    : 'v2.8'
        };

        fb.init(initParams);

            Router.events.subscribe((val) => {
                 this.searchResultCont  = false;    
                  this.showStyle = false;  
                });
     }

    ngOnInit() {    

            this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
            if(this.currentUser){
                this.loginStatus = this.currentUser.status;
            }
    }




        public showmodel(displayType): void {


            this.visible = true;                    
            this.visibleAnimate = true

      }


      public hide(): void {
          this.visibleAnimate = false;          
          setTimeout(() => this.visible = false, 300);      
      }



    }

app.component.ts

 @Component({ 
  selector: 'my-app',
  template: `
    <app-header></app-header>
    <router-outlet></router-outlet>    
    <app-footer></app-footer>`,
  styleUrls: ['../app/app.component.css'],
})

export class AppComponent { 

}

Nils Kähler · Accepted Answer · 2021-02-14 08:48:09Z

9

if there is no direct parent child relation between this two, you've got to use a shared service and an eventEmitter to pass values.

@Component({
  moduleId: module.id,
  selector: 'app-header',
  templateUrl: 'header.component.html',
  styleUrls: ['../app.component.css'],
})

export class HeaderComponent {    
  this.subs    
  constructor(private sharedService:SharedService){

  this.subs = this.sharedService.onHide$.subscribe(()=>{ 
      this.hide(); 
    });
  }
}

And then your SharedService is :

@Injectable()
export class SharedService{
  public onHide$ = new EventEmitter<boolean>()
}

@Component({})
export class YourOtherComponent{
  constructor(private sharedService:SharedService){ }

  hideIt(){
    this.sharedService.onHide$.emit('hide it baby')
  }
}

Angular Services are always the best option (and sometimes the only option) when it comes to component communication.

With above service, component's who can hide your header don't have to know about each other and you can make them completely reusable.

And, don't forget to unsubscribe from your services if your component is destroyed.

inside any of the components who subscribe to SharedService's $onHide method.

ngOndestroy(){
  this.subs.unsubscribe();
}

edited Feb 14, 2021 at 8:48

Nils Kähler

3,0211 gold badge24 silver badges31 bronze badges

answered Jul 1, 2017 at 7:51

Milad

28.8k11 gold badges78 silver badges91 bronze badges

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

3 Comments

Rohit Parte Over a year ago

This is the perfect way to get data from one independent component to other.

Umar Tariq Over a year ago

Nice answer. very helpful

Prasanna Over a year ago

So on page refresh, all data will be lost? how to keep the data even if a page is refreshed?

Rahul Singh · Accepted Answer · 2017-07-01 07:37:38Z

3

make use of viewChild in your parent component.

in your app component -

@ViewChild(HeaderComponent) headerComponent : HeaderComponent;

then use

headerComponent.headerMethodName();

any method from HeaderComponent you want to invoke.

answered Jul 1, 2017 at 7:37

Rahul Singh

3411 silver badge6 bronze badges

2 Comments

Vel Over a year ago

im getting [ts] Property 'showmodel' does not exist on type 'typeof HeaderComponent'. error

J.H Over a year ago

where i have to use headerComponent.headerMethodName();

Navoneel Talukdar · Accepted Answer · 2017-07-01 06:32:37Z

1

You will need to use EventEmitter.

@component({
  selector:'app-header',
})
export class HeaderComponent {

  public showmodel(displayType): void {
        this.visible = true;                    
        this.visibleAnimate = true
  }

}

Now say in second component you emit the event on a button click.

@component({
  selector:'another component',
  template: `<button (click)="callShowModel()">click</button>`
)
export class com2{
  @Output() evt = new EventEmitter();
  callShowModel(){
     this.evt.emit(<value>);
  }
}

Now your event can be hooked up in parent component

<headercomponent (evt)="showmodel($event)"></headercomponent>

edited Jul 1, 2017 at 6:32

answered Jul 1, 2017 at 6:15

Navoneel Talukdar

4,6365 gold badges23 silver badges43 bronze badges

8 Comments

Vel Over a year ago

I tried like this. the console.log(this.evt); it retun

EventEmitter {_isScalar: false, observers: Array(0), closed: false, isStopped: false, hasError: false…} closed : false hasError : false isStopped : false observers : Array(0) thrownError : null __isAsync : false _isScalar : false __proto__ : Subject

Navoneel Talukdar Over a year ago

Did you import eventemitter ? import { Component, Input, Output, EventEmitter } from '@angular/core';

Vel Over a year ago

Yes. i imported all the things

Vel Over a year ago

(evt)="com1.showmodel($event)" where its come from com1?

Navoneel Talukdar Over a year ago

com1 should be the component selector where actual function exists,in this case selector for header component

|

Mahesh Bhattarai · Accepted Answer · 2017-07-01 06:19:35Z

0

As Angular 2 is based on components and component interaction, it is important to understand how data is passed from one component to another. Data is passed between components using property bindings. Take a look at the syntax below:

<user [value]="user"></user>

value is a property of current component and user is a property for access another component

you should use to @Input property

import {Component, Input} from 'angular2/angular2'

export Class exampleComponent{
  @Input() user: any ;
}

answered Jul 1, 2017 at 6:19

Mahesh Bhattarai

7827 silver badges17 bronze badges

1 Comment

Vel Over a year ago

I want to call function from one component to another component.

COMMANDO 今 K7 Gaming · Accepted Answer · 2020-07-23 11:27:35Z

0

just use this code: in your component

@ViewChild(HeaderComponent, { static: true }) headerComponent: HeaderComponent;

and then use:

this.headerComponent.anyheaderMethod();

this will help definitly

answered Jul 23, 2020 at 11:27

COMMANDO 今 K7 Gaming

1

1 Comment

Vel Over a year ago

It is very late answer.

Collectives™ on Stack Overflow

How to call header component function to another component in angular 2?

5 Answers 5

3 Comments

2 Comments

8 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

2 Comments

8 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related