Olá, Gostaria de saber como fazer a comunicação entre components no angular, segue abaixo:
header.component.html
<h5>{{ titulo }}</h5>header.component.ts
export class HeaderComponent{
titulo: string = ' Titulo da Pagina';
}article.component.html
<ul>
<li><a (click)="pagina1()">pagina 1</a></li>
<li><a (click)="pagina2()">pagina 2</a></li>
<li><a (click)="pagina3()">pagina 3</a></li>
</ul>article.component.ts
export class ArticleComponent{
titulo: string = ' Titulo da Pagina';
pagina1(){
this.router.navigate(['pagina1']);
this.titulo = ' pagina 1';
}
pagina2(){
this.router.navigate(['pagina2']);
this.titulo = ' pagina 2';
}
pagina3(){
this.router.navigate(['pagina3']);
this.titulo = ' pagina 3';
}O problema que eu não estou conseguindo alterar o titulo h5 quando clicar no link nas paginas dos components, a barra de navegação header o titulo altere para a pagina em que eu estou.
app.component.html
<app-header></app-header>
<router-outlet></router-outlet>
