Что такое эквивалент ngShow и ngHide в Angular?

*ngIf="myVar"

или

[hidden]="!myVar"

это два способа показать / скрыть элемент. Единственная разница между *ngIf и [hidden] это *ngIf добавить или удалить элемент из DOM, но с [hidden] браузер покажет / скроет элемент с помощью CSS display свойство и оно останется в DOM.

Извините, я не согласен с привязкой к hidden, которая считается небезопасной при использовании Angular 2. Это связано с тем, что скрытый стиль может быть легко перезаписан, например, с помощью

display: flex;

рекомендуется использовать *ngIf, который является более безопасным. Для получения более подробной информации, пожалуйста, обратитесь к официальному блогу Angular. 5 ошибок новичка, чтобы избежать с угловой 2

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

Я нахожусь в той же ситуации с разницей, чем в моем случае элемент был Flex контейнер.Если это не ваш случай легкая работа вокруг может быть

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

в моем случае из-за того, что многие браузеры, которые мы поддерживаем, все еще нуждаются в префиксе поставщика, чтобы избежать проблем, я пошел на другое простое решение

[class.is-loading]="isLoading"

где тогда CSS просто как

&.is-loading { display: none } 

чтобы оставить отображаемое состояние, обрабатываемое классом по умолчанию.

Если ваш случай заключается в том, что стиль display none вы также можете использовать директиву ngStyle и напрямую изменять дисплей, я сделал это для раскрывающегося списка bootstrap UL на нем установлен для отображения none.

поэтому я создал событие щелчка для" ручного " переключения UL для отображения

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

затем на компоненте у меня есть атрибут showDropDown:bool, который я переключаю каждый раз, и на основе int установите displayDDL для стиля следующим образом

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

согласно угловой 1 документации ngShow и ngHide, обе эти директивы добавляют стиль css display: none !important;, к элементу в соответствии с условием этой директивы (для ngShow добавляет css на ложное значение, а для ngHide добавляет css для истинного значения).

мы можем добиться такого поведения с помощью угловой 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>

обратите внимание, что для show поведение в Angular2 нам нужно добавить ! (не) перед ngShowVal, и для hide поведение в Angular2 мы не нужно добавить ! (не) перед ngHideVal.

Если вы используете Bootstrap - это так просто, как это:

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

использовать скрытый как вы связываете любой модель С контролем и указать css для этого:

HTML:

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

CSS:

[hidden] {
   display: none;
}

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

myExpression может быть установлено в true или false

в bootstrap 4.0 класс "d-none" = " display: none!важно;"

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

Я 'visibility' потому что я хотел сохранить пространство, занимаемое элементом. Если вы не хотите этого делать, вы можете просто использовать 'display' и установить его в 'none';

вы можете привязать его к элементу html, динамически или нет.

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

или

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

чтобы скрыть и показать div на кнопку нажмите в угловой 6.

Html Код

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