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

Tengo una serie de elementos que quiero que sean visibles bajo ciertas condiciones.

En AngularJS escribiría

<div ng-show="myVar">stuff</div>

¿Cómo puedo hacer esto en Angular 2+?

Solo únete a la hiddenpropiedad

[hidden]="!myVar"

Ver también

• https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden

cuestiones

hiddenSin embargo, tiene algunos problemas porque puede entrar en conflicto con CSS para la displaypropiedad.

Vea cómo someen Plunker el ejemplo no se oculta porque tiene un estilo

:host {display: block;}

conjunto. (Esto podría comportarse de manera diferente en otros navegadores: probé con Chrome 50)

solución alterna

Puedes arreglarlo agregando

[hidden] { display: none !important;}

A un estilo global en index.html.

otra trampa

hidden="false"
hidden="{{false}}"
hidden="{{isHidden}}" // isHidden = false;

son lo mismo que

hidden="true"

y no mostrará el elemento

hidden="false"asignará la cadena "false"que se considera veraz.
Solo el valor falseo la eliminación del atributo hará que el elemento sea visible.

El uso {{}}también convierte la expresión en una cadena y no funcionará como se esperaba.

Solo el enlace con []funcionará como se esperaba porque falsese asigna como en falselugar de "false".

*ngIf vs [hidden]

*ngIfelimina efectivamente su contenido del DOM mientras [hidden]modifica la displaypropiedad y solo le indica al navegador que no muestre el contenido, pero el DOM aún lo contiene.

Usa el [hidden]atributo:

[hidden]="!myVar"

O puedes usar *ngIf

*ngIf="myVar"

Estas son dos formas de mostrar / ocultar un elemento. La única diferencia es: *ngIfeliminará el elemento del DOM mientras [hidden]le indicará al navegador que muestre / oculte un elemento usando la displaypropiedad CSS manteniendo el elemento en DOM.

Me encuentro en la misma situación con la diferencia que en mi caso, el elemento era un contenedor flexible. Si no es su caso, una solución fácil podría ser

[style.display]="!isLoading ? 'block' : 'none'"

en mi caso, debido a que muchos navegadores que admitimos todavía necesitan el prefijo del proveedor para evitar problemas, busqué otra solución fácil

[class.is-loading]="isLoading"

donde entonces el CSS es simple como

&.is-loading { display: none } 

para dejar el estado mostrado manejado por la clase predeterminada.

Lo siento, tengo que estar en desacuerdo con el enlace a oculto, que se considera inseguro al usar Angular 2. Esto se debe a que el estilo oculto podría sobrescribirse fácilmente, por ejemplo, usando

display: flex;

El enfoque recomendado es usar * ngIf, que es más seguro. Para más detalles, consulte el blog oficial de Angular. 5 errores de novato a evitar con Angular 2

<div *ngIf="showGreeting">
   Hello, there!
</div>

Si su caso es que el estilo es mostrar ninguno, también puede usar la directiva ngStyle y modificar la pantalla directamente, lo hice para un arranque DropDown, el UL está configurado para mostrar ninguno.

Así que creé un evento de clic para "manualmente" alternar la UL para mostrar

<div class="dropdown">
    <button class="btn btn-default" (click)="manualtoggle()"  id="dropdownMenu1" >
    Seleccione una Ubicación
    <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" [ngStyle]="{display:displayddl}">
        <li *ngFor="let object of Array" (click)="selectLocation(location)">{{object.Value}}</li>                                
     </ul>
 </div>    

Luego, en el componente, tengo el atributo showDropDown: bool que alterno cada vez y, en base a int, establezco el displayDDL para el estilo de la siguiente manera

showDropDown:boolean;
displayddl:string;
manualtoggle(){
    this.showDropDown = !this.showDropDown;
    this.displayddl = this.showDropDown ? "inline" : "none";
}

De acuerdo con la documentación de Angular 1 de ngShow y ngHide , ambas directivas agregan el estilo css display: none !important;al elemento de acuerdo con la condición de esa directiva (para ngShow agrega css en el valor falso y para ngHide agrega el css para el valor verdadero).

Podemos lograr este comportamiento usando la directiva Angular 2 ngClass:

/* style.css */
.hide 
{
    display: none !important;
}

<!-- old angular1 ngShow -->
<div ng-show="ngShowVal"> I'm Angular1 ngShow... </div>

<!-- become new angular2 ngClass -->
<div [ngClass]="{ 'hide': !ngShowVal }"> I'm Angular2 ngShow... </div>

<!-- old angular2 ngHide -->
<div ng-hide="ngHideVal"> I'm Angular1 ngHide... </div>

<!-- become new angular2 ngClass -->
<div [ngClass]="{ 'hide': ngHideVal }"> I'm Angular2 ngHide... </div>

Tenga en cuenta que para el showcomportamiento en Angular2 necesitamos agregar !(no) antes de ngShowVal, y para el hidecomportamiento en Angular2 no necesitamos agregar !(no) antes de ngHideVal.

<div [hidden]="myExpression">

myExpression puede establecerse en verdadero o falso

Si está utilizando Bootstrap es tan simple como esto:

<div [class.hidden]="myBooleanValue"></div>

en bootstrap 4.0 la clase "d-none" = "display: none! important;"

<div [ngClass]="{'d-none': exp}"> </div>

Para cualquier otra persona que se encuentre con este problema, así es como lo logré.

import {Directive, ElementRef, Input, OnChanges, Renderer2} from "@angular/core";

@Directive({
  selector: '[hide]'
})
export class HideDirective implements OnChanges {
  @Input() hide: boolean;

  constructor(private renderer: Renderer2, private elRef: ElementRef) {}

  ngOnChanges() {
    if (this.hide) {
      this.renderer.setStyle(this.elRef.nativeElement, 'visibility', 'hidden');
    } else {
      this.renderer.setStyle(this.elRef.nativeElement, 'visibility', 'visible');
    }
  }
}

Solía 'visibility'porque quería preservar el espacio ocupado por el elemento. Si no desea hacerlo, simplemente puede usarlo 'display'y configurarlo 'none';

Puede vincularlo a su elemento html, dinámicamente o no.

<span hide="true"></span>

o

<span [hide]="anyBooleanExpression"></span>

Use oculto como si vinculara cualquier modelo con control y especifique css para él:

HTML:

<input type="button" class="view form-control" value="View" [hidden]="true" />

CSS:

[hidden] {
   display: none;
}

Esto es lo que funcionó para mí:

<div [style.visibility]="showThis ? 'visible' : 'hidden'">blah</div>

<div [hidden]="flagValue">
---content---
</div>

Para mí, [hidden]=!varnunca ha funcionado.

Entonces, <div *ngIf="expression" style="display:none;">

Y, <div *ngIf="expression">siempre dé los resultados correctos.

Hay dos ejemplos de documentos angulares https://angular.io/guide/structural-directives#why-remove-rather-than-hide

En cambio, una directiva podría ocultar el párrafo no deseado estableciendo su estilo de visualización en ninguno.

<p [style.display]="'block'">
  Expression sets display to "block".
  This paragraph is visible.
</p>

<p [style.display]="'none'">
  Expression sets display to "none".
  This paragraph is hidden but still in the DOM.
</p>

Puede usar [style.display] = "'block'" para reemplazar ngShow y [style.display] = "'none'" para reemplazar ngHide.

La mejor manera de lidiar con este problema usando ngIf Debido a que esto evita que el elemento se procese en el front-end,

Si usa [hidden]="true"u oculta el estilo [style.display], solo ocultará el elemento en el extremo frontal y alguien puede cambiar el valor y verlo fácilmente, en mi opinión, la mejor manera de ocultar el elemento esngIf

<div *ngIf="myVar">stuff</div>

y también si tiene elementos múltiples (necesita implementar también otro) puede usar la <ng-template>opción

<ng-container *ngIf="myVar; then loadAdmin else loadMenu"></ng-container>
<ng-template #loadMenu>
     <div>loadMenu</div>
</ng-template>

<ng-template #loadAdmin>
     <div>loadAdmin</div>
</ng-template>  

código de plantilla ng de muestra

Si solo desea usar las directivas simétricas hidden/ con las shownque vino AngularJS, sugiero escribir una directiva de atributos para simplificar las plantillas de esta manera (probado con Angular 7):

import { Directive, Input, HostBinding } from '@angular/core';

@Directive({ selector: '[shown]' })
export class ShownDirective {
  @Input() public shown: boolean;

  @HostBinding('attr.hidden')
  public get attrHidden(): string | null {
    return this.shown ? null : 'hidden';
  }
}

Muchas de las otras soluciones son correctas. Usted debe utilizar *ngIfsiempre que sea posible. El uso del hiddenatributo puede tener estilos inesperados aplicados, pero a menos que esté escribiendo componentes para otros, probablemente sepa si es así. Entonces, para que esta showndirectiva funcione, también querrás asegurarte de agregar:

[hidden]: {
  display: none !important;
}

a tus estilos globales en alguna parte.

Con estos puede usar la directiva de la siguiente manera:

<div [shown]="myVar">stuff</div>

con la versión simétrica (y opuesta) así:

<div [hidden]="myVar">stuff</div>

Para agregar a los deberes , también debe usar un prefijo así [acmeShown]vs solo [shown].

La razón principal por la que utilicé una showndirectiva de atributo es para convertir el código AngularJS a Angular -AND- cuando el contenido que está oculto contiene componentes de contenedor que causan viajes de ida y vuelta XHR. La razón por la que no solo uso [hidden]="!myVar"es que con demasiada frecuencia es más complicado como: [hidden]="!(myVar || yourVar) && anotherVar" - yes I can invert that, but it is more error prone.[se muestra] `es simplemente más fácil de pensar.

Para ocultar y mostrar div en el botón, haga clic en angular 6.

Código HTML

<button (click)=" isShow=!isShow">FormatCell</button>
<div class="ruleOptionsPanel" *ngIf=" isShow">
<table>
<tr>
<td>Name</td>
<td>Ram</td>
</tr>
</table>
</div>

Código .ts de componente

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{
 isShow=false;
  }

esto funciona para mí y es una forma de reemplazar ng-hide y ng-show en angular6.

disfrutar...

Gracias