Quel est l'équivalent de ngShow et ngHide en angle?

*ngIf="myVar"

ou

[hidden]="!myVar"

ce sont deux façons de montrer/cacher l'élément. La seule différence entre *ngIf et [hidden] est que *ngIf ajoutera ou supprimera complètement L'élément de DOM mais avec [hidden] le navigateur affichera/masquera l'élément en utilisant la propriété display de CSS et il restera dans DOM.

Désolé, je dois être en désaccord avec la fixation à caché qui est considéré comme dangereux en utilisant Angular 2. C'est parce que le style caché pourrait être facilement réécrit par exemple en utilisant

display: flex;

l'approche recommandée est d'utiliser *ngIf qui est plus sûr. Pour plus de détails, veuillez consulter le blog officiel Angular. 5 erreurs de débutant à éviter avec angle 2

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

je me trouve dans la même situation avec la différence que dans mon cas l'élément était un conteneur souple.Si ce n'est pas votre cas un travail facile autour pourrait être

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

dans mon cas en raison du fait que beaucoup de navigateurs que nous supportons ont encore besoin du préfixe du fournisseur pour éviter les problèmes je suis allé pour une autre solution facile

[class.is-loading]="isLoading"

où alors le CSS est simple comme

&.is-loading { display: none } 

de quitter alors le état affiché géré par la classe par défaut.

si votre cas est que le style est display none, Vous pouvez aussi utiliser la directive ngStyle et modifier l'affichage directement, j'ai fait cela pour un bootstrap DropDown L'UL sur elle est défini pour afficher none.

donc j'ai créé un événement de clic pour "manuellement" basculer L'UL pour afficher

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

puis sur le composant j'ai showDropDown: bool attribut que je bascule à chaque fois, et basé sur int, définir le displayDDL pour le style comme suit

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

selon la documentation angulaire 1 de ngShow et ngHide , ces deux directives ajoutent le style css display: none !important; , à l'élément selon la condition de cette directive (pour ngShow ajoute le css sur la fausse valeur, et pour ngHide ajoute le css pour la vraie valeur).

nous pouvons obtenir ce comportement en utilisant la directive 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>

notez que pour show comportement dans Angular2 nous avons besoin d'ajouter ! (pas) avant la ngShowVal, et pour hide comportement en Angular2 nous ne pas besoin d'ajouter ! (pas) avant la ngHideVal.

si vous utilisez Bootstrap est aussi simple que ceci:

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

utiliser caché comme vous liez n'importe quel modèle avec contrôle et spécifier css pour elle:

HTML:

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

CSS:

[hidden] {
   display: none;
}

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

monexpression peut être défini à true ou false

dans bootstrap 4.0 la classe "d-none" = " display: none!important; "

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

pour quiconque trébuchant sur cette question, c'est comme ça que je l'ai fait.

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

j'ai utilisé 'visibility' parce que je voulais préserver l'espace occupé par l'élément. Si vous ne le souhaitez pas, vous pouvez simplement utiliser 'display' et réglez 'none' ;

, Vous pouvez le lier à votre élément html dynamiquement ou non.

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

ou

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

pour cacher et montrer div sur le bouton cliquez dans l'angle 6.

Code Html

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

composant .code ts

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

cela fonctionne pour moi et c'est une façon de remplacer ng-hide et ng-show en angular6.

de profiter de...

Merci