web-dev-qa-db-fra.com

Quel est l'équivalent de ngShow et ngHide dans Angular 2+?

J'ai un certain nombre d'éléments que je veux être visible dans certaines conditions.

Dans AngularJS j'écrirais

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

Comment puis-je faire cela dans Angular 2+?

angularangular-componentsangular-template
475
Mihai Răducanu

Lier simplement à la propriété hidden

_[hidden]="!myVar"
_

Voir également

questions

hidden pose quelques problèmes car il peut entrer en conflit avec CSS pour la propriété display.

Voyez comment some dans (, exemple de Plunker n'est pas masqué car il a un style

_:Host {display: block;}
_

ensemble. (Cela pourrait se comporter différemment dans d'autres navigateurs - j'ai testé avec Chrome 50)

solution de contournement

Vous pouvez le réparer en ajoutant

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

Vers un style global dans _index.html_.

un autre piège 

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

sont les mêmes que

_hidden="true"
_

et ne montrera pas l'élément.

_hidden="false"_ va assigner la chaîne _"false"_ qui est considérée comme une vérité.
Seule la valeur false ou la suppression de l'attribut rendra l'élément visible.

Utiliser _{{}}_ convertit également l'expression en chaîne et ne fonctionnera pas comme prévu.

Seule la liaison avec _[]_ fonctionnera comme prévu car cette variable false est affectée à false au lieu de _"false"_.

*ngIf_ VS _[hidden]

_*ngIf_ supprime efficacement son contenu du DOM tandis que _[hidden]_ modifie la propriété display et demande uniquement au navigateur de ne pas afficher le contenu mais le DOM le contient toujours.

811
Günter Zöchbauer

Utilisez l'attribut [hidden]:

[hidden]="!myVar"

Ou vous pouvez utiliser *ngIf

*ngIf="myVar"

Ce sont deux façons d'afficher/cacher un élément. La seule différence est que: *ngIf supprimera l'élément de DOM tandis que [hidden] demandera au navigateur d'afficher/masquer un élément à l'aide de la propriété CSS display en conservant l'élément dans DOM.

130
Ali Shahzad

Je me trouve dans la même situation avec la différence que dans mon cas, l'élément était un conteneur flexible. Si ce n'est pas votre cas, un travail facile

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

dans mon cas, étant donné que beaucoup de navigateurs que nous supportons ont toujours besoin du préfixe du fournisseur pour éviter les problèmes, je suis allé vers une autre solution simple

[class.is-loading]="isLoading"

où alors le CSS est simple comme

&.is-loading { display: none }

de quitter ensuite l'état affiché géré par la classe par défaut.

27
Vale Steve

Désolé, je ne suis pas d'accord avec la liaison to hidden, qui est considérée comme dangereuse lors de l'utilisation de Angular 2. Cela est dû au fait que le style masqué pourrait être écrasé facilement, par exemple en utilisant

display: flex;

L'approche recommandée consiste à utiliser * ngIf, qui est plus sûr. Pour plus de détails, consultez le blog officiel Angular. 5 erreurs de recrue à éviter avec Angular 2

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

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

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 devons ajouter ! (pas) avant ngShowVal, et pour hide comportement dans Angular2, nous ne le faisons pas. doit ajouter ! (pas) avant ngHideVal.

4
Gil Epshtain

Si vous estimez que le style n'affiche aucun, vous pouvez également utiliser la directive ngStyle et modifier l'affichage directement. C'est ce que j'ai fait pour un bootstrap DropDown.

J'ai donc 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>

Ensuite, sur le composant que j'ai avec l'attribut showDropDown: bool que je bascule à chaque fois et sur la base de int, définissez displayDDL pour le style comme suit

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

Si vous utilisez Bootstrap , c'est aussi simple que cela:

<div [class.hidden]="myBooleanValue"></div>
3
Gian Marco Gherardi

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

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

Pour tous ceux qui tombent sur cette question, voici comment je l’ai accompli.

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 le régler sur 'none';

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

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

ou

<span [hide]="anyBooleanExpression"></span>
3
Anjil Dhamala

Utilisez hidden comme vous liez any model avec contrôle et spécifiez css pour cela:

HTML:

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

CSS:

[hidden] {
   display: none;
}
2
Sandip - Full Stack Developer
<div [hidden]="flagValue">
---content---
</div>
1
Chirag
<div [hidden]="myExpression">

myExpression peut être défini sur true ou false

1
Niyaz

Il existe deux exemples sur Angular documents https://angular.io/guide/structural-directives#why-remove-rather-than-hide

Une directive pourrait plutôt masquer le paragraphe indésirable en définissant son style d'affichage sur none.

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

Vous pouvez utiliser [style.display] = "'block'" pour remplacer ngShow et [style.display] = "'none" "pour remplacer ngHide.

0
koo

Pour masquer et afficher div sur un clic de bouton dans angular 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 .ts Code

@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 dans angular6.

prendre plaisir...

Merci

0
Manoj Gupta