¿Cuál es el equivalente de ngShow y ngHide en Angular 2+?

ngShow y ngHide son dos directivas ng en AngularJS que se usan para mostrar y ocultar los elementos respectivamente. ngShow se usa para mostrar una pestaña div vinculándola a una variable booleana en el script. Si el valor de la variable es verdadero, se muestra el elemento; de lo contrario, el elemento permanece oculto y ocurre lo contrario en el caso de ngHide.

Ejemplo para ng-show: este ejemplo demuestra cómo funciona ngShow.

<html>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
  
<body ng-app="">
    <div ng-show="true">
        <h1 style="color:green;">GeeksForGeeks</h1>
    </div>
</body>
  
</html>

Salida:

Del mismo modo, si el valor ng-show se establece en falso, desaparecerá.

Ejemplo para ng-hide: este ejemplo demuestra cómo funciona nghide.

<html>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
  
<body ng-app="">
    <div ng-hide="true">
        <h1 style="color:green;">
          GeeksForGeeks
      </h1>
    </div>
</body>
  
</html>

Salida: la salida aquí es una pantalla negra porque ng-hide está configurado en verdadero, eso significa que GeeksForGeeks está oculto. De manera similar, si verdadero se cambia a falso, aparece de la siguiente manera:

Implementación en Angular 2+
En angular, hay dos formas de implementar ng-hide y ng-show:

Al usar la propiedad [ oculta] : la propiedad [oculta] en angular, modifica la propiedad de visualización y no cambia con el DOM. Solo indica al navegador que no muestre el contenido.

Sintaxis:

<div [hidden]="boolean_var"></div>

Como no causa ningún obstáculo con el DOM, si se usa la propiedad de visualización en CSS, esto fallará. Por ejemplo, para el ejemplo superior, el [oculto] fallará si se hace de la siguiente manera.

<div [hidden]="boolean_var" style="display:block; ></div>

El lado derecho de la propiedad oculta consta del nombre de la variable booleana que se encuentra en la clase del componente. El valor de esa variable decide si [hidden] se ocultará o no.

Ejemplo:

El archivo de plantilla

<div [hidden]="isHidden">

This will be hidden..

</div>

La clase de componente

import {
    Component,
    OnInit
}
  
from '@angular/core';
@Component( {
    selector: 'app-list', templateUrl: 
      './list.component.html', styleUrls:
      ['./list.component.css']
}
  
) export class ListComponent implements OnInit {
    isHidden: boolean=true;
    constructor() {}
    ngOnInit() {}
}

Salida: Esto no muestra nada en la pantalla.

Al usar la directiva *ngIf : es una forma más efectiva que [oculto]. Elimina efectivamente el contenido del DOM y, por lo tanto, hay lagunas en este método.

Sintaxis:

<div *ngIf="boolean_var"></div>

Similar a la propiedad [oculta], el lado derecho de esta propiedad consiste en el nombre de la variable booleana que está en la clase del componente. El valor de esa variable decide si el contenido estará en el DOM o no.

Ejemplo:

El archivo de plantilla

<div *ngIf="isShown">

This will be Shown..

</div>

La clase de componente:

import { Component, OnInit } from '@angular/core';
  
@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {
  
isShown:boolean=true;
  constructor() { }
    
  ngOnInit() {
  }
}

Producción:
```
This will be Shown..
```

Publicación traducida automáticamente

Artículo escrito por piyush25pv y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta