1

Boa noite pessoal! Comecei a estudar Angular recentemente e me deparei com um problema que não consigo resolver, preciso que ao clicar em um botão dentro do componente header, o componente banner seja escondido.

Esta é a estrutura do app.component.html:

<app-header></app-header>
<app-banner></app-banner>

Este é o componente Header.html:

<div class="header">
   <button>Entrar</button>
</div>

Este é o componente Banner.html

<div>
  <p>banner works!</p>
</div>

Alguém pode me ajudar por favor?

1 Resposta 1

2

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

}
13
  • Obrigado pelo retorno renanzin! 25/01/2019 às 17:57
  • mas esta apresentando erros no console 25/01/2019 às 17:59
  • ERROR in src/app/banner/banner.component.ts(8,14): error TS2420: Class 'BannerComponent' incorrectly implements interface 'OnInit'. Property 'ngOnInit' is missing in type 'BannerComponent'. src/app/banner/banner.component.ts(10,4): error TS2304: Cannot find name 'Input'. src/app/header/header.component.ts(10,14): error TS2420: Class 'HeaderComponent' incorrectly implements interface 'OnInit'. 25/01/2019 às 17:59
  • Property 'ngOnInit' is missing in type 'HeaderComponent'. src/app/header/header.component.ts(12,4): error TS2304: Cannot find name 'Output'. src/app/header/header.component.ts(12,31): error TS2304: Cannot find name 'EventEmitter'. 25/01/2019 às 18:00
  • sabe me dizer onde errei? 25/01/2019 às 18:00

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .