En mi aplicación angular, tengo un área de texto y dentro de la ventana emergente y cuando ingresamos cualquier dato en el área de texto, se mostrará en algún div.
.componente.html
<div class="form-group popover-form" > <label>Enter Custom Trigger Habit: When I</label> <textarea class="form-control" [(ngModel)]="Trigger" name="Trigger"></textarea> </div> <!-- the entered data of textarea will display in below code--> <div class="col-sm-5 " > <div class="content-text" > <p>{{Trigger}}</p> </div> </div> <button type="button"><i class="icon icon-close" type="button" aria-hidden="true"></i></button>y tengo el botón de cerrar y mi requisito es cerrar el div cuando hacemos clic en el botón de cerrar.
¿Alguien puede ayudarme en eso mismo?
Puede crear un indicador booleano para verificar cuándo mostrar u ocultar el div y luego crear un controlador de eventos de clic en su botón para configurar ese booleano showDiv en falso para ocultar ese div;
Por ejemplo:
showDiv: boolean = true; closeDiv() : void { this.showDiv = false; } <div class="col-sm-5 " *ngIf="showDiv"> <div class="content-text" > <p>{{Trigger}}</p> </div> </div> <button (click)="closeDiv()" type="button"> <i class="icon icon-close" type="button" aria-hidden="true"></i> </button>Puedes usar *ngIf
<div *ngIf="display">Test Data</div> <input type="button" value="click" (click)="update"/> display = true; update(){ this.display = !this.display; }Puedes hacer esto usando JavaScript como este. al hacer clic, no mostrará ninguno. esto es solo un ejemplo
function show() { var x = document.getElementById("tabi") x.style.display = "none" } <div class="form-group popover-form" > <label>Enter Custom Trigger Habit: When I</label> <textarea class="form-control" [(ngModel)]="Trigger" name="Trigger"></textarea> </div> <!-- the entered data of textarea will display in below code--> <div class="col-sm-5 " id='tabi' > <div class="content-text" > <p>{{Trigger}}</p> </div> </div> <button type="button" onclick="show()"><i class="icon icon-close" type="button" aria-hidden="true">Button</i></button>