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

ngshow angular 5

Question

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+?

Answer 1

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

Podemos lograr este comportamiento usando la directiva Angular 2 ngClass:

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

¡Tenga en cuenta que para show comportamiento en Angular2 necesitamos agregar ! (no) antes del ngShowVal, y para el comportamiento oculto en Angular2 no necesitamos agregar ! (no) antes de ngHideVal.

Answer 2

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.

Answer 3

Lo siento, tengo que estar en desacuerdo con el enlace a oculto que se considera inseguro cuando uso 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>

Answer 4

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.

Answer 5

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'');
    }
  }
}

Usé ''visibility'' porque quería preservar el espacio ocupado por el elemento. Si no desea hacerlo, puede usar ''display'' y configurarlo en ''none'' ;

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

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

o

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

Answer 6

Si está utilizando Bootstrap es tan simple como esto:

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

Answer 7

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

/* 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>

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

<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>    

Answer 8

Solo únete a la propiedad hidden

[hidden]="!myVar"

Ver también

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

cuestiones

hidden tiene algunos problemas porque puede entrar en conflicto con CSS para la propiedad de display .

Vea cómo some en el ejemplo de Plunker no se ocultan porque tienen un estilo

:host {display: block;}

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

solución alternativa

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 verdadera.
Solo el valor false o la eliminación del atributo hará que el elemento sea visible.

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

Solo el enlace con [] funcionará como se esperaba porque este false se asigna como false lugar de "false" .

*ngIf vs [hidden]

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

Answer 9

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;
}

Answer 10

Use el atributo [hidden] :

[hidden]="!myVar"

O puede usar *ngIf

*ngIf="myVar"

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

Answer 11

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

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

Answer 12

para mí, [hidden]=!var nunca ha funcionado.

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

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

Answer 13

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

Answer 14

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

Answer 15

<div [hidden]="myExpression">

myExpression puede establecerse en verdadero o falso