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

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

Dans AngularJS je voudrais écrire

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

Comment puis-je faire dans Angulaire 2+?

InformationsquelleAutor Mihai Răducanu | 2016-02-23

779

Juste lier à la hidden propriété
```
[hidden]="!myVar"
```
Voir aussi
- https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden
questions

hidden a des problèmes bien car elle peut entrer en conflit avec les CSS pour la display de la propriété.

Voir comment some dans Plunker exemple n'obtient pas caché parce qu'il a un style
```
:host {display: block;}
```
ensemble. (Cela peut se comporter différemment dans d'autres navigateurs que j'ai testé avec Chrome 50)

solution de contournement

Vous pouvez résoudre le problème en ajoutant
```
[hidden] { display: none !important;}
```
À un style global dans index.html.

un autre écueil
```
hidden="false"
hidden="{{false}}"
hidden="{{isHidden}}" //isHidden = false;
```
sont les mêmes que
```
hidden="true"
```
et ne sera pas afficher l'élément.

hidden="false" va affecter la chaîne "false" qui est considéré comme truthy.

Seule la valeur false ou la suppression de l'attribut seront effectivement rendre l'élément
visible.

À l'aide de {{}} convertit également l'expression d'une chaîne et ne fonctionnent pas comme prévu.

Que la liaison avec [] fonctionnera comme prévu parce que ce false est affecté comme false au lieu de "false".

*ngIf vs [hidden]

*ngIf élimine efficacement son contenu à partir de la DOM, tandis que [hidden] modifie le display propriété et seule demande au navigateur de ne pas montrer le contenu, mais le DOM toujours le contient.
- À l'aide caché est pas vraiment recommandé. angularjs.blogspot.com/2016/04/...
- J'ai mentionné dans ma réponse déjà.
- *ngIf peut-être la façon correcte dans la plupart des cas, mais parfois vous voulez vraiment un élément à être là, visuellement caché. Un style CSS avec [hidden]{display:none!important} aide. C'est, par exemple, comment Bootstrap permet de s'assurer [hidden] éléments sont en fait cachés. Voir GitHub
- Vous pouvez rencontrer un problème lorsque vous utilisez (myStream | async) tuyau à l'intérieur de *ngIf qui utilise également (myStream | async) tuyau
- vous êtes mon sauveur! à l'aide de *ngIf permettra de rétablir les DOM position vers le haut, mais [hidden] a résolu mon problème et conservé la position.
- Je me sens comme il sert à quelque chose comme *ngShow dans l'angle.io docs quand j'ai commencé à suivre angulaire 4. mais une chose que je peux confirmer qu'il n'y a pas une telle chose, et caché est la seule solution. Je suis allé à la recherche pour *ngShow moi-même quelques mois en arrière et constater qu'il n'existe pas une telle chose maintenant, utilisez soit caché ou d'en créer un personnalisé directive si l'on veut plus de contrôle personnalisée au cours de cette.
- Vous pourriez avoir atterri sur Angulaire 1 docs que lorsque vous l'avez trouvé.
InformationsquelleAutor Günter Zöchbauer
127

Utiliser le [hidden] attribut:
```
[hidden]="!myVar"
```
Ou vous pouvez utiliser *ngIf
```
*ngIf="myVar"
```
Ce sont deux moyens pour afficher/masquer un élément. La seule différence est: *ngIf va supprimer l'élément du DOM, tandis que [hidden] va dire au navigateur d'afficher/masquer un élément à l'aide de CSS display propriété en gardant l'élément dans le DOM.
- [caché] est l'ajout de conditionnaly un attribut "caché" de l'élément. Il pourrait aussi être [ce que] ou [ali]. La chose importante ici est de charger une règle CSS qui mentionnent "caché" des attributs doit être display:none
- Gardez à l'esprit: *ngIf et [hidden] sont fundamentalyl différents. ngIf n'évaluera pas le contenu à l'intérieur de l' *ngIf bloc jusqu'à ce que la condition est vraie. Ceci est particulièrement important si vous utilisez le async pipe, comme l'abonnement à la observables ne sera ajouté après la condition devient vraie!
- Une chose de plus à prendre en considération est qu' *ngIf détruit les composants et qu'elle doit être re-créé, tandis que [caché] le garde en vie et dans la mémoire. Si vous disposez d'une ressource-intense composant, il peut être préférable de la cacher au lieu de la détruire
- ils ne sont pas la même chose.
InformationsquelleAutor Ali Shahzad
26

Je me retrouve dans la même situation à la différence que dans mon cas, l'élément a été un conteneur flex.Si ce n'est pas votre cas un travail facile, pourraient être
```
[style.display]="!isLoading ? 'block' : 'none'"
```
dans mon cas, en raison du fait que beaucoup de navigateurs que nous soutenons encore faut le vendeur préfixe pour éviter les problèmes, je suis allé pour une autre solution facile
```
[class.is-loading]="isLoading"
```
où alors la CSS est simple comme
```
&.is-loading { display: none } 
```
à quitter puis de l'affichage de l'état gérée par la classe par défaut.
- Cela fonctionne bien avec bootstrap 4 invalid-feedback classe.
InformationsquelleAutor Vale Steve
24

Désolé, je suis en désaccord avec la liaison de caché qui est considéré comme dangereux pour la sécurité lors de l'utilisation Angulaire 2. C'est parce que le caché, le style peut être remplacé facilement par exemple à l'aide de
```
display: flex;
```
L'approche recommandée consiste à utiliser *ngIf ce qui est plus sûr. Pour plus de détails, veuillez vous référer à la officiel Angulaire blog. 5 Erreurs de débutant à Éviter Angulaire 2
```
<div *ngIf="showGreeting">
   Hello, there!
</div>
```
- Je pense que c'est une erreur de débutant pour dire que quelque chose est mauvais avant de connaître les conditions exactes. Si l'on ne veut pas d'un élément à être enlevés et détruits et ajouté et recréé, *ngIf est un mauvais choix. Mais vous avez raison que les conséquences doivent être considérés, et en soulignant les pièges est toujours une bonne idée.
- Je sais ce que tu veux dire. Ce n'est pas ma parole, c'est un novice erreur, il est pris à partir Angulaire 2 blog officiel. Je ne veux pas offenser personne. Merci de remarquer, cependant.
- Ouais, je ne pense pas que ngIf exactement les réponses que ce qui est demandé. Je veux masquer certains contenus sur une page qui contient un <router-outlet>. Si j'utilise ngIf, j'obtiens une erreur qu'il ne peut pas trouver la sortie. J'ai besoin de la sortie à hidden jusqu'à ce que mes chargements de données, pas de absent jusqu'à ce que mes chargements de données.
- Je suis d'accord avec vous, mais le problème que j'ai c'est que je veux afficher un formulaire et de mettre les valeurs dans il si j'utilise le *ngIf je vais avoir le message d'erreur qu'il n'est pas défini et avec le caché bien, il fait bien le travail
- assurez-vous. Je comprends. La solution est toujours conditionnel. Dans votre cas, vous ne savez pas si il est possible de simplement vérifier si le formulaire est-il avant d'exécuter tout autre code contre elle. Il est tout au sujet de l'échange. Voulez-vous un moyen plus sûr pour cacher la forme qui ne seront pas compensés par un autre style à l'avenir accidentellement? Ou préférez-vous avoir la complaisance de ne pas vérifier si la forme existe?
InformationsquelleAutor Tim Hong
4

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

Nous pouvons réaliser ce comportement à l'aide Angulaire 2 de la directive ngClass:
```
/* style.css */
.hide 
{
    display: none !important;
}


<div ng-show="ngShowVal"> I'm Angular1 ngShow... </div>


<div [ngClass]="{ 'hide': !ngShowVal }"> I'm Angular2 ngShow... </div>


<div ng-hide="ngHideVal"> I'm Angular1 ngHide... </div>


<div [ngClass]="{ 'hide': ngHideVal }"> I'm Angular2 ngHide... </div>
```
Avis que, pour show comportement dans Angular2 nous avons besoin d'ajouter ! (pas) avant la ngShowVal, et pour hide comportement dans Angular2 nous ne pas besoin d'ajouter ! (pas) avant la ngHideVal.

InformationsquelleAutor Gil Epshtain

Si votre cas est que le style d'affichage si vous n'en pouvez également utiliser le ngStyle directive et de modifier l'affichage directement, je l'ai fait pour un bootstrap liste Déroulante de l'UL, il est configuré pour afficher aucun.

J'ai donc créé un événement click pour "manuellement" le basculement de 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 tous les temps, et sur la base int, définir la displayDDL pour le style comme suit

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

InformationsquelleAutor Gary

3

Si vous utilisez Bootstrap est aussi simple que cela:
```
<div [class.hidden]="myBooleanValue"></div>
```
- Dans le bootstrap 4 à l'aide de [hidden] fait la même chose donc je vous recommande de [hidden]
InformationsquelleAutor Gian Marco Gherardi
3

dans le bootstrap 4.0 la classe "d-none" = "display: none!important;"
```
<div [ngClass]="{'d-none': exp}"> </div>
```
InformationsquelleAutor 63RMAN

Pour quelqu'un d'autre de tomber sur cette question, c'est comment j'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 mis à 'none';

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

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

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

InformationsquelleAutor Anjil Dhamala

2

Utilisation caché comme vous liez un modèle de contrôle et de spécifier css pour elle:

HTML:
```
<input type="button" class="view form-control" value="View" [hidden]="true" />
```
CSS:
```
[hidden] {
   display: none;
}
```
InformationsquelleAutor Sandip - Full Stack Developer

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

InformationsquelleAutor Chirag

1
```
<div [hidden]="myExpression">
```
monexpression peut être défini à true ou false
- <div hidden="{{ myExpression }}"> Cela ne fonctionne pas, en tant que "monexpression" va se converti en une chaîne de caractères à afficher dans le code html. À la fois la chaîne "vrai" et "faux" sont truthy, de sorte qu'il sera toujours caché
InformationsquelleAutor Niyaz
0

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

Une directive pourrait masquer les indésirables paragraphe plutôt que par la définition de son style d'affichage à aucun.
```
<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.affichage]=" "bloc" " à remplacer ngShow et [style.affichage]=" "aucun "" pour remplacer ngHide.

InformationsquelleAutor koo
-1

Pour masquer et afficher la div sur le bouton cliquez sur angulaire 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 la façon de le remplacer ng-hide et ng-show angular6.

profiter...

Grâce
- Vous utilisez ngIf - qui est différente de celle ngShow. NgIf va supprimer/ajouter le formulaire d'éléments du DOM. Ce n'est pas le même que ngShow/ngHide qui ne fera qu'ajouter/supprimer des styles Css de l'Élément.
- L'exemple est trop long et trop spécifique.
InformationsquelleAutor Manoj Gupta
-1

pour moi, [hidden]=!var n'a jamais fonctionné.

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

Et, <div *ngIf="expression"> Toujours donner des résultats corrects.

InformationsquelleAutor Priyanka Arora

Vous devez vous connecter pour publier un commentaire.