Qual é o equivalente de ngShow e ngHide no Angular 2+?

Eu tenho vários elementos que quero que sejam visíveis sob certas condições.

No AngularJS eu escreveria

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

Como posso fazer isso no Angular 2+?

Basta vincular à hiddenpropriedade

[hidden]="!myVar"

Veja também

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

problemas

hiddentem alguns problemas porque pode entrar em conflito com o CSS da displaypropriedade

Veja como someno exemplo do Plunker não fica oculto porque tem um estilo

:host {display: block;}

conjunto. (Isso pode se comportar de maneira diferente em outros navegadores - testei com o Chrome 50)

Gambiarra

Você pode corrigi-lo adicionando

[hidden] { display: none !important;}

Para um estilo global em index.html.

outra armadilha

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

são os mesmos que

hidden="true"

e não mostrará o elemento

hidden="false"atribuirá a string "false"que é considerada verdadeira.
Somente o valor falseou a remoção do atributo realmente tornarão o elemento visível.

O uso {{}}também converte a expressão em uma sequência e não funcionará conforme o esperado.

Somente a ligação com []funcionará conforme o esperado, pois isso falseé atribuído como em falsevez de"false" .

*ngIf vs [hidden]

*ngIfremove efetivamente seu conteúdo do DOM enquanto [hidden]modifica a displaypropriedade e instrui apenas o navegador a não mostrar o conteúdo, mas o DOM ainda o contém.

Use o [hidden]atributo:

[hidden]="!myVar"

Ou você pode usar *ngIf

*ngIf="myVar"

Estas são duas maneiras de mostrar / ocultar um elemento. A única diferença é: *ngIfremoverá o elemento do DOM e [hidden]instruirá o navegador a mostrar / ocultar um elemento usando a displaypropriedade CSS mantendo o elemento no DOM.

Eu me encontro na mesma situação com a diferença do que no meu caso, o elemento era um contêiner flexível. Se não for o seu caso, uma solução fácil pode ser

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

no meu caso, devido ao fato de que muitos navegadores que suportamos ainda precisam do prefixo do fornecedor para evitar problemas, procurei outra solução fácil

[class.is-loading]="isLoading"

onde então o CSS é simples como

&.is-loading { display: none } 

para sair, o estado exibido é tratado pela classe padrão.

Desculpe, eu tenho que discordar da ligação a hidden, que é considerada insegura ao usar o Angular 2. Isso ocorre porque o estilo oculto pode ser substituído facilmente, por exemplo, usando

display: flex;

A abordagem recomendada é usar * ngIf, que é mais seguro. Para mais detalhes, consulte o blog oficial da Angular. 5 erros de novato a serem evitados com o Angular 2

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

Se o seu caso é que o estilo é display none, você também pode usar a diretiva ngStyle e modificar a tela diretamente, fiz isso para um DropDown de inicialização, o UL está definido para exibir nenhum.

Então, criei um evento de clique para alternar "manualmente" o UL para exibir

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

Em seguida, no componente eu tenho o atributo showDropDown: bool que eu alterno todas as vezes e, com base em int, defina o displayDDL para o estilo da seguinte maneira

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

De acordo com a documentação Angular 1 do ngShow e ngHide , essas duas diretivas adicionam o estilo cssdisplay: none !important; ao elemento de acordo com a condição dessa diretiva (para ngShow adiciona css em valor falso e para ngHide adiciona css para valor verdadeiro).

Podemos conseguir esse comportamento usando a diretiva 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>

Observe que, para o showcomportamento em Angular2, precisamos adicionar !(não) antes do ngShowVal, e para o hidecomportamento em Angular2, não precisamos adicionar !(não) antes do ngHideVal.

<div [hidden]="myExpression">

myExpression pode ser definido como verdadeiro ou falso

Se você estiver usando o Bootstrap, é tão simples quanto isto:

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

no bootstrap 4.0, a classe "d-none" = "display: none! important;"

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

Para qualquer um que tropeçar nessa questão, foi assim que eu consegui.

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

Eu usei 'visibility'porque queria preservar o espaço ocupado pelo elemento. Se você não desejar, basta usar 'display'e configurá-lo para 'none';

Você pode vinculá-lo ao seu elemento html, dinamicamente ou não.

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

ou

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

Use hidden como você liga qualquer modelo com controle e especifique css para ele:

HTML:

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

CSS:

[hidden] {
   display: none;
}

Isto é o que funcionou para mim:

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

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

para mim, [hidden]=!varnunca funcionou.

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

E, <div *ngIf="expression">sempre dê resultados corretos.

Existem dois exemplos em documentos angulares https://angular.io/guide/structural-directives#why-remove-rather-than-hide

Uma diretiva pode ocultar o parágrafo indesejado, definindo seu estilo de exibição como nenhum.

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

Você pode usar [style.display] = "'block'" para substituir o ngShow e [style.display] = "'none'" para substituir o ngHide.

A melhor maneira de lidar com esse problema usando ngIf Como isso evita que o elemento seja renderizado no front-end,

Se você usar [hidden]="true"ou estilizar o hide, [style.display]ele ocultará apenas o elemento no front end e alguém poderá alterar o valor e visualizá-lo facilmente. Na minha opinião, a melhor maneira de ocultar o elemento éngIf

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

e também Se você tiver vários elementos (é necessário implementar outra coisa também), você pode usar a <ng-template>opção

<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 exemplo do modelo ng

Se você quiser apenas usar as diretivas simétricas hidden/ shownque o AngularJS veio, sugiro escrever uma diretiva de atributo para simplificar os modelos assim (testados no 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';
  }
}

Muitas das outras soluções estão corretas. Você deve usar *ngIfsempre que possível. O uso do hiddenatributo pode ter estilos inesperados aplicados, mas, a menos que você esteja escrevendo componentes para outras pessoas, provavelmente já sabe se está. Portanto, para que essa showndiretiva funcione, você também precisará adicionar:

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

aos seus estilos globais em algum lugar.

Com eles, você pode usar a diretiva da seguinte maneira:

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

com a versão simétrica (e oposta) da seguinte forma:

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

Para adicionar ao shoulds - você também deve nos usar um prefixo assim [acmeShown]vs just [shown].

O principal motivo pelo qual usei uma showndiretiva de atributo é converter o código AngularJS em Angular -AND- quando o conteúdo oculto contém componentes de contêiner que causam viagens de ida e volta ao XHR. A razão pela qual eu não uso apenas [hidden]="!myVar"é que, com frequência, é mais complicado, como: [hidden]="!(myVar || yourVar) && anotherVar" - yes I can invert that, but it is more error prone.[mostrado] `é simplesmente mais fácil de pensar.

Para ocultar e mostrar o botão div on, clique na 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 do componente

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

isso funciona para mim e é uma maneira de substituir ng-hide e ng-show em angular6.

desfrutar...

obrigado