Você precisa trabalhar com a comunicação entre os componentes. Primeiro você emite um evento pelo app-header
, após isso, receberemos o valor emitido no componente pai (AppComponent) e depois o enviamos para o componente app-banner
.
Veja em funcionamento no Stackblitz: https://angular-emk7hj.stackblitz.io
app.component.html
<app-banner [enable]="enable"></app-banner>
<app-header (buttonClick)="handleButtonClick($event)"></app-header>
app.component.ts
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
enable:boolean = false;
handleButtonClick(value) {
this.enable = value;
}
}
banner.component.html
<p *ngIf="enable">
banner works!
</p>
banner.component.ts
@Component({
selector: 'app-banner',
templateUrl: './banner.component.html',
styleUrls: ['./banner.component.css']
})
export class BannerComponent implements OnInit {
@Input() enable:boolean;
}
header.component.html
<div class="header">
<button (click)="displayBanner()">Entrar</button>
</div>
header.component.ts
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
@Output() buttonClick = new EventEmitter()
enable:boolean = false;
displayBanner(){
this.enable = this.enable == false ? true : false;
this.buttonClick.emit(this.enable);
}
}