Qual é o equivalente de ngShow e ngHide em Angular?

*ngIf="myVar"

Ou

[hidden]="!myVar"

Estas são duas formas de mostrar / esconder o elemento. A única diferença entre *ngIf e [hidden] é que *ngIf irá adicionar ou remover completamente o elemento do DOM, mas com [hidden], o navegador irá mostrar/ocultar o elemento usando CSS a display propriedade e permanecerá no DOM.

display: flex;

A abordagem recomendada é a utilização de * ngIf, que é mais segura. Para mais detalhes, consulte o blog Oficial Angular. 5 Erros de principiante para evitar com Ângulos 2

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

Encontro-me na mesma situação com a diferença do que no meu caso o elemento era um recipiente flexível.If is not your case an easy work around could be

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

No meu caso, devido ao fato de que muitos navegadores que apoiamos ainda precisam do prefixo do fornecedor para evitar problemas, eu fui para outra solução fácil

[class.is-loading]="isLoading"

Onde então o CSS é simples como

&.is-loading { display: none } 

Deixar então o estado apresentado tratado pela classe predefinida.

Se o seu caso é que o estilo não aparece nenhum, também pode usar a Directiva ngStyle e modificar a visualização directamente, fiz isso para uma lista de inicialização, a UL nela está configurada para não mostrar nenhuma.

Por isso criei um evento com um botão para" manualmente " activar o 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>    

Então, no componente que eu tenho showDropDown: bool atributo que eu comutar todas as vezes, e com base em int, defina o displayDDL para o estilo como se segue

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

De Acordo com a Angular 1 documentação de ngShow e ngHide, ambos directiva adiciona o estilo css display: none !important;, para o elemento de acordo com a condição de que a directiva (por ngShow adiciona css no valor falso, e para ngHide adiciona o css para o valor verdadeiro).

Podemos alcançar este comportamento usando a 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>

Observe que para o comportamento de show no Angular2 precisamos adicionar ! (não) antes do ngShowVal, e para o comportamento de hide in Angular2 we don't need to add ! (not) before the ngHideVal.

Se estiver a utilizar Bootstrap é tão simples como isto:

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

Usar escondido como se ligasse qualquer Modelo com controlo e especificar css para ele:

HTML:

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

CSS:

[hidden] {
   display: none;
}

<div hidden="{{ myExpression }}">
<div [hidden]="myExpression">

A minha expressão pode ser definida como verdadeira ou falsa

No bootstrap 4. 0 a classe "d-none" = " display: none!importante; "

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

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

Usei 'visibility' porque queria preservar o espaço ocupado pelo elemento. Se não o quisesse fazer, podia usar 'display' e ajustá - lo para 'none';

Pode ligá-lo ao seu elemento html, dinamicamente ou não.

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

Ou

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

Para esconder e mostrar div no botão clique em 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>

Componente .código ts

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