¿Cómo ocultar un elemento HTML haciendo clic en un botón en AngularJS?

En este artículo, veremos cómo usar una función de botón de alternancia para ocultar y mostrar un elemento haciendo clic en un botón en Angular. El botón de alternancia es un control de la interfaz de usuario que puede ser útil para situaciones en las que el usuario desea cambiar entre 2 estados o condiciones. Por ejemplo, en nuestro teléfono inteligente, generalmente apagamos / encendemos el botón de los dispositivos conectados de forma inalámbrica, como Bluetooth, Wifi, modo avión, etc. Este tipo de botón de alternancia facilita el uso en la vida cotidiana. Este artículo mostrará cómo hacer un botón de alternar datos usando Angular JS.

Directiva ngif : ngIf es una directiva estructural angular que crea una plantilla basada en el valor de la evaluación de la expresión. El valor de la expresión siempre debe ser True o False . Cuando la expresión dentro de la plantilla se evalúa como verdadera, entonces se representa el bloque de código dentro del bloque entonces y mientras que la expresión se evalúa como falsa, se representa el bloque else , que es opcional.
Sintaxis:

<div *ngIf = "condition">Content to render when condition is true.</div>

Para el archivo app.component.html , usaremos esta función toggleData() para llamar a la función en Html 

<button (click)="toggleData()">Toggle Data</button>

Para el archivo app.component.ts , hemos definido una función que alterna el botón para mostrar u ocultar el contenido.

export class AppComponent {
 toDisplay = true;

 toggleData() {
   this.toDisplay = !this.toDisplay;
 }
}

Acercarse:

• Primero, envuelva el contenido dentro de una etiqueta <div> en un archivo Html.
• Ahora tome una variable » toDisplay » y vincúlela a la etiqueta <div>.
• En un archivo HTML, incluya un botón y adjunte una llamada de función cada vez que el usuario haga clic en él.
• En el archivo ts, implemente la función y ahora alterne la variable toDisplay entre verdadero y falso.
• Una vez realizada la implementación anterior, inicie la aplicación

Estructura del proyecto: Esto se verá como la siguiente imagen
 

Ejemplo: 

<div *ngIf="toDisplay">
  <p>Click the below button to display and hide the data</p>
</div>
<button (click)="toggleData()">Toggle Data</button>

import { Component } from "@angular/core";
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
})
export class AppComponent {
  toDisplay = true;
  
  toggleData() {
    this.toDisplay = !this.toDisplay;
  }
}

Salida: desde la salida anterior, podemos ver haciendo clic en el botón Alternar datos, podemos mostrar u ocultar los datos.