Tengo un div con la identificación de 1. Estoy tratando de configurar la pantalla en ninguno dinámicamente. ¿Hay una forma angular de hacer esto? Actualmente, estoy usando vainilla javascript. Estaba preguntando acerca de hacer esto dinámicamente porque habrá más de 60 divs que se crearán a partir de una matriz.
en mi html
<div *ngFor="let item of items; i = index;"> <div id={{i}} (click)=hideDiv()></div> </div>en mi método
hideDiv() { return document.getElementById('1').style.display = "none"; }Eso funciona, pero estoy buscando la forma Angular de hacer lo anterior.
Me sugirieron que use @ViewChild. Esto es lo que he cambiado. No puedo usar una variable de referencia de plantilla ya que los divs html se crean dinámicamente. A menos que alguien pueda decirme cómo crear dinámicamente las variables de la plantilla. Aunque no creo que sea posible crear variables de plantilla con un bucle.
@ViewChild('imgId', { static: true }) elementRef: ElementRef<HTMLDivElement>; imgId: string;Luego en el método tengo:
this.imgId = event.path[0].attributes[1].value; this.elementRef.nativeElement.style.display = "none";El event.path[0].attributes[1].value me da la identificación de la imagen. El imgId se muestra cuando lo registro en la consola. Todavía no cambia la visualización en el div a ninguno. También recibo el error: No se pueden leer las propiedades de undefined (leyendo 'nativeElement')
Sí, puede usar la consulta ViewChild en Angular para hacer esto. En su componente, defina una consulta como esta:
@ViewChild('#1') elementRef: ElementRef<HTMLDivElement>;Implemente la interfaz AfterViewInit en su componente y, dentro de ella, use esto:
this.elementRef.nativeElement.style.display = "none";Simplemente puede usar ngIf para esto
Componente
shouldDisplay: boolean = true; hide(): void { this.shouldDisplay = false; } show(): void { this.shouldDisplay = true; }html
<button (click)="hide()">Hide</button> <button (click)="show()">Show</button> <div *ngIf="shouldDisplay">this is the content</div>Aquí está el ejemplo de trabajo
Esta es la forma Angular: plantilla
<div *ngIf="showMe"></div>o
<div [hidden]="!showMe"></div>Mecanografiado:
showMe: boolean; hideDiv() { this.showMe = false; }