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

Answer 1

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

Answer 2

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

Answer 3

just use this code: in your component

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

and then use:

this.headerComponent.anyheaderMethod();

this will help definitly

Answer 4

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.

Answer 5

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>