Qual è l'equivalente di ngShow e ngHide in Angular 2+?

Ho un numero di elementi che voglio essere visibile in determinate condizioni.

In AngularJS scrivo

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

Come posso farlo in Angular 2+?

Basta legare alla hiddenproprietà

[hidden]="!myVar"

Guarda anche

• https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden

problemi

hiddenha alcuni problemi però perché può essere in conflitto con CSS per la displayproprietà.

Guarda come somenell'esempio di Plunker non viene nascosto perché ha uno stile

:host {display: block;}

impostato. (Questo potrebbe comportarsi in modo diverso in altri browser - ho testato con Chrome 50)

soluzione

Puoi risolverlo aggiungendo

[hidden] { display: none !important;}

Ad uno stile globale in index.html.

un'altra trappola

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

sono gli stessi di

hidden="true"

e non mostrerà l'elemento.

hidden="false"assegnerà la stringa "false"considerata vera.
Solo il valore falseo la rimozione dell'attributo renderà effettivamente visibile l'elemento.

L'uso {{}}converte anche l'espressione in una stringa e non funzionerà come previsto.

Solo il binding con []funzionerà come previsto perché falseassegnato come falseanziché "false".

*ngIf vs [hidden]

*ngIfrimuove efficacemente il suo contenuto dal DOM mentre [hidden]modifica la displayproprietà e indica solo al browser di non mostrare il contenuto ma il DOM lo contiene ancora.

Usa l' [hidden]attributo:

[hidden]="!myVar"

Oppure puoi usare *ngIf

*ngIf="myVar"

Questi sono due modi per mostrare / nascondere un elemento. L'unica differenza è: *ngIfrimuoverà l'elemento dal DOM mentre [hidden]dirà al browser di mostrare / nascondere un elemento usando la displayproprietà CSS mantenendo l'elemento in DOM.

Mi trovo nella stessa situazione con la differenza rispetto al mio caso l'elemento era un contenitore flessibile. Se non è il tuo caso, una soluzione semplice potrebbe essere

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

nel mio caso a causa del fatto che molti browser che supportiamo hanno ancora bisogno del prefisso del fornitore per evitare problemi, ho optato per un'altra soluzione semplice

[class.is-loading]="isLoading"

dove quindi il CSS è semplice come

&.is-loading { display: none } 

per lasciare quindi lo stato visualizzato gestito dalla classe predefinita.

Spiacenti, non sono d'accordo con l'associazione a nascosto che è considerato non sicuro quando si utilizza Angular 2. Questo perché lo stile nascosto potrebbe essere sovrascritto facilmente, ad esempio utilizzando

display: flex;

L'approccio raccomandato è usare * ngIf che è più sicuro. Per maggiori dettagli, consultare il blog angolare ufficiale. 5 errori da principiante da evitare con Angular 2

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

Se il tuo caso è che lo stile è display none, puoi anche usare la direttiva ngStyle e modificare direttamente il display, ho fatto che per un bootstrap DropDown l'UL su di esso è impostato per non visualizzare nessuno.

Quindi ho creato un evento clic per "manualmente" attivare / disattivare la visualizzazione dell'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>    

Quindi sul componente ho showDropDown: attributo bool che commuto ogni volta e, in base a int, imposta displayDDL per lo stile come segue

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

Secondo la documentazione Angolare 1 di ngShow e ngHide , entrambe queste direttive aggiungono lo stile css display: none !important;, all'elemento secondo la condizione di quella direttiva (per ngShow aggiunge il css su falso valore, e per ngHide aggiunge il css per valore reale).

Possiamo ottenere questo comportamento usando la direttiva 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>

Si noti che per il showcomportamento in Angular2 è necessario aggiungere !(non) prima di ngShowVal e per il hidecomportamento in Angular2 non è necessario aggiungere !(non) prima di ngHideVal.

<div [hidden]="myExpression">

myExpression può essere impostato su true o false

Se stai usando Bootstrap è semplice come questo:

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

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

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

Per chiunque altro si imbattesse in questo problema, ecco come l'ho realizzato.

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

L'ho usato 'visibility'perché volevo preservare lo spazio occupato dall'elemento. Se non desideri farlo, puoi semplicemente utilizzarlo 'display'e impostarlo su 'none';

Puoi associarlo al tuo elemento html, in modo dinamico o meno.

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

o

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

Usa nascosto come se legassi qualsiasi modello con controllo e specifichi css per esso:

HTML:

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

CSS:

[hidden] {
   display: none;
}

Questo è ciò che ha funzionato per me:

<div [style.visibility]="showThis ? 'visible' : 'hidden'">blah</div>

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

per me, [hidden]=!varnon ha mai funzionato.

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

E, <div *ngIf="expression">Dai sempre risultati corretti.

Ci sono due esempi di documenti angolari https://angular.io/guide/structural-directives#why-remove-rather-than-hide

Una direttiva potrebbe invece nascondere il paragrafo indesiderato impostando il suo stile di visualizzazione su nessuno.

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

Puoi usare [style.display] = "'block'" per sostituire ngShow e [style.display] = "'none'" per sostituire ngHide.

Il modo migliore per affrontare questo problema usando ngIf Perché questo ben impedisce di ottenere quell'elemento render in front-end,

Se usi [hidden]="true"o nascondi stile nasconde [style.display]solo l'elemento nel front-end e qualcuno può modificare il valore e visualizzarlo facilmente, secondo me il modo migliore per nascondere l'elemento èngIf

<div *ngIf="myVar">stuff</div>

e anche Se hai più elementi (devi implementare anche qualcos'altro) puoi usare l' <ng-template>opzione

<ng-container *ngIf="myVar; then loadAdmin else loadMenu"></ng-container>
<ng-template #loadMenu>
     <div>loadMenu</div>
</ng-template>

<ng-template #loadAdmin>
     <div>loadAdmin</div>
</ng-template>  

codice di esempio ng-template

Se vuoi solo usare le direttive simmetriche hidden/ shownfornite da AngularJS, ti suggerisco di scrivere una direttiva di attributo per semplificare i template in questo modo (testato con Angular 7):

import { Directive, Input, HostBinding } from '@angular/core';

@Directive({ selector: '[shown]' })
export class ShownDirective {
  @Input() public shown: boolean;

  @HostBinding('attr.hidden')
  public get attrHidden(): string | null {
    return this.shown ? null : 'hidden';
  }
}

Molte delle altre soluzioni sono corrette. Si consiglia di utilizzare *ngIfdove mai possibile. Utilizzando l' hiddenattributo è possibile applicare stili imprevisti, ma a meno che non si stiano scrivendo componenti per altri, probabilmente si sa se lo è. Quindi per shownfar funzionare questa direttiva, ti consigliamo anche di aggiungere:

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

ai tuoi stili globali da qualche parte.

Con questi puoi usare la direttiva in questo modo:

<div [shown]="myVar">stuff</div>

con la versione simmetrica (e opposta) in questo modo:

<div [hidden]="myVar">stuff</div>

Per aggiungere ai shoulds - yous dovrebbe anche un prefisso in questo modo [acmeShown]vs solo[shown] .

Il motivo principale per cui ho usato una showndirettiva di attributo è per convertire il codice AngularJS in angolare -AND- quando il contenuto nascosto contiene componenti contenitore che causano round trip XHR. Il motivo per cui non uso solo [hidden]="!myVar"è che abbastanza spesso è più complicato del tipo: [hidden]="!(myVar || yourVar) && anotherVar" - yes I can invert that, but it is more error prone.[mostrato] `è semplicemente più facile da pensare.

Per nascondere e mostrare il pulsante div on, fare clic su nell'angolo 6.

Codice HTML

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

Codice componente .ts

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

questo funziona per me ed è il modo di sostituire ng-hide e ng-show in angular6.

godere...

Grazie