cómo mostrar / ocultar el componente en el botón haga clic en el ejemplo de código angular 8

Ejemplo 1: ocultar y mostrar en angular 8

<button (click)="toggleShow()" type="checkbox" >show/hide</button>

<div *ngIf="isShown" class="row container-fluid"  id="divshow" >
Div Content

</div>

Ejemplo 2: ocultar y mostrar en angular 8

isShown: boolean = false ; // hidden by default


toggleShow() {

this.isShown = ! this.isShown;

}

Ejemplo 3: ocultar elemento al presionar el botón angular

<div class="yourCssClass" *ngIf="this.isButtonVisible" (click)="this.isButtonVisible = false">
...
</div>

Your TypeScript

export class AppComponent {
   private isButtonVisible = true;
}

Ejemplo 4: en el botón de clic angular, ocultar div y mostrar div

<div *ngIf="div1">
    ABC
</div>
<div *ngIf="div2">
    DEF
</div>
<div *ngIf="div3">
    GHI
</div>
<button (click)="div1Function()"></button>
<button (click)="div2Function()"></button>
<button (click)="div3Function()"></button>


in .ts file 


 div1:boolean=true;
    div2:boolean=true;
    div3:boolean=true;

    div1Function(){
        this.div1=true;
        this.div2=false;
        this.div3=false
    }

    div2Function(){
        this.div2=true;
        this.div1=false;
        this.div3=false
    }

    div3Function(){
        this.div3=true;
        this.div2=false;
        this.div1=false
    }

Ejemplo 5: ocultar y mostrar en angular 8

/* Component */
isShown: boolean;

ngOnInit(){
  isShown = false; //hidden every time subscribe detects change
}

toggleShow() {
  this.isShown = ! this.isShown;
}

/* Template */
<div *ngIf="isShown" class="row container-fluid" id="divshow">
  content
</div>

---

---

Utiliza Nuestro Buscador