Hiding Component in Angular 7

Question

Good night, you guys! I started studying Angular recently and came across a problem that I can’t solve, I need that when clicking a button inside the header component, the banner component is hidden.

This is the structure of the app.component.html:

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

This is the Header.html component:

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

This is the Banner.html component

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

Can someone please help me?

Answer 1

You need to work with communication between components. First you issue an event by app-header, after that, we will receive the value issued in the parent component (Appcomponent) and then send it to the component app-banner.

See working on Stackblitz: https://angular-emk7hj.stackblitz.io

app.component.html

<app-banner [enable]="enable"></app-banner>
<app-header (buttonClick)="handleButtonClick($event)"></app-header>

app.componentts.

@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.componentts.

@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.componentts.

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

}