Elemento de ocultar e mostrar angular 2 usando * ngIf com boolean
Quero mostrar e ocultar um elemento usando um botão localizado em outro componente.
Então, eu tenho um painel com uma quantidade de câmaras e um cabeçalho.
HTML do DashboardComponent com cabeçalho e câmara de aplicativos:
<app-header></app-header>
<div class="container">
<div class="row">
<app-chamber [kamers]="kamers"></app-chamber>
</div>
</div>
Eu tenho esse HTML com o * ngIf no meu ChamberComponent:
<div class="col-sm-6 col-md-4 col-lg-3 cardcol" *ngFor="let kamer of kamers; let i = index">
<md-card class="chamber wit" *ngIf="kamer.patient == null">
<p *ngIf="showId">{{kamer.id}}</p>
</md-card>
</div>
No HeaderComponent, tenho um botão que precisa mostrar e ocultar o elemento:
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
@Input() aList;
dashboardComponent:DashboardComponent;
chamberComponent:ChamberComponent;
constructor(dashboardComponent: DashboardComponent, chamberComponent:ChamberComponent) {
this.dashboardComponent = dashboardComponent;
this.chamberComponent = chamberComponent;
}
ngOnInit() {
}
// THIS GETS CALLED BY A BUTTON CLICK
toggleId(){
this.chamberComponent.toggleId();
}
}
então meu código ChamberComponent:
@Component({
selector: 'app-chamber',
templateUrl: './chamber.component.html',
styleUrls: ['./chamber.component.css']
})
export class ChamberComponent implements OnInit {
@Input() kamers;
showId:boolean;
constructor() {
this.showId=false;
}
ngOnInit() {
}
toggleId = () => {
this.showId = !this.showId;
}
}
Então, quando clico no botão, o valor muda (eu registrei isso no console), mas a exibição não é atualizada.
Quando coloco um botão em meu ChamberComponent que chama a função toggleId (), a exibição recebe uma atualização e o elemento é mostrado ou oculto.
Mas preciso alternar de um botão no meu cabeçalho.