Mostrar y ocultar en Angular

Presentaremos ejemplos de mostrar y ocultar componentes o elementos en Angular.

Mostrar y ocultar en Angular

Al desarrollar una aplicación comercial, debemos ocultar algunos datos según las funciones o condiciones del usuario. Tenemos que mostrar los mismos datos de acuerdo con las condiciones de esa aplicación.

En este tutorial, le mostraré una forma simple mediante la cual podemos mostrar y ocultar datos según las condiciones.

Vamos a crear una nueva aplicación usando el siguiente comando.

# angular
ng new my-app

Después de crear nuestra nueva aplicación en Angular, iremos al directorio de nuestra aplicación usando este comando.

# angular
cd my-app

Ahora, ejecutemos nuestra aplicación para verificar si todas las dependencias están instaladas correctamente.

# angular
ng serve --open

Supongamos que tenemos una plantilla o un bloque de código que queremos mostrar solo si la condición es verdadera y ocultarla cuando es falsa. Podemos mostrarlo y ocultarlo usando este ejemplo.

Primero, crearemos un contenido de demostración en app.component.html que incluirá un encabezado, un párrafo y un campo de entrada, y lo envolveremos en un div.

# Angular
<div>
  <hello name="{{ name }}"></hello>
  <p>Enter your name:</p>
  <input type="text" id="element"/>
</div>

Ahora, en app.component.ts, creamos una nueva variable element y la configuramos como false.

# Angular
element = false;

Usaremos *ngIf para mostrar y ocultar nuestro div según la condición.

# Angular
<div *ngIf="element == true">
  <hello name="{{ name }}"></hello>
  <p>Enter your name:</p>
  <input type="text" id="element"/>
</div>

Como puede ver en el ejemplo anterior, hemos establecido una condición si el elemento es true, se mostrará el div, y si la condición es false, no se mostrará.

Entonces, el div estará oculto porque hemos configurado el elemento como false. Ahora, cambiemos el valor del elemento a true y comprobemos cómo funciona.

Producción:

Ahora puede ver que cuando cambiamos el valor del elemento, la condición que establecimos en div cambió y comenzó a mostrar el div con todos los elementos dentro.

Imagínese si queremos mostrar y ocultar datos cada vez que se hace clic en ciertos botones. Podemos crear este sencillo ejemplo usando el mismo *ngIf.

Ahora, vamos a crear dos botones que tengan dos funciones showData() y hideData(). Necesitamos crear estos dos botones fuera del div, para que no se oculten cuando la condición se cambia a false.

Entonces, nuestro código en app.component.html se verá como a continuación.

# Angular
<div *ngIf="element == true">
  <hello name="{{ name }}"></hello>
  <p>Enter your name:</p>
  <input type="text" id="element" />
</div>
<button (click)="showData()">Display Data</button>
<button (click)="hideData()">Hide Data</button>

Ahora, creemos estas dos funciones en app.component.ts. showData() cambiará el valor de element a true y hideData() cambiará el valor de element a false.

Entonces, el código se verá como a continuación.

# Angular
showData() {
    return (this.element = true);
  }
  hideData() {
    return (this.element = false);
  }

Ahora agregaremos un código CSS para que nuestros botones se vean bien.

# Angular
button{
  margin-top: 10px;
  padding: 10px;
  background-color: aquamarine;
  border: none;
  margin-right: 10px;
}

Veamos cómo funciona.

Producción:

Como puede ver en el ejemplo anterior, podemos ocultar y mostrar contenido fácilmente usando los métodos *ngIf y botón (click).

Si queremos ocultar el botón Mostrar datos cuando el contenido muestra el botón Ocultar datos cuando los datos están ocultos, también podemos usar el mismo concepto en los botones.

Así que vamos a crear una condición *ngIf si el elemento es true, solo se mostrará el botón de ocultar datos, y cuando el elemento sea false, se mostrará el botón de mostrar datos.

# Angular
<div *ngIf="element == true">
  <hello name="{{ name }}"></hello>
  <p>Enter your name:</p>
  <input type="text" id="element" />
</div>
<button *ngIf="element == false" (click)="showData()">Display Data</button>
<button *ngIf="element == true" (click)="hideData()">Hide Data</button>

No necesitamos escribir ninguna línea de código en el archivo app.component.ts porque las funciones que creamos y la función *ngIf nos ayudarán a lograr lo mismo en los botones. Entonces, veamos el resultado cómo funciona ahora.

Producción:

Entonces, en este tutorial, aprendimos cómo ocultar y mostrar contenido según las condiciones usando *ngIf, y también aprendimos cómo usar el método de botones (click) para ayudarnos a ocultar y mostrar datos en el botón clics