Tengo una aplicación angular, en la que he creado el popover usando angular.
.componente.html
<div class="col-md-4 "> <div class="cc button-popover" > <popover-content #addObjectivePopovers [animation]="true" [closeOnClickOutside]="false" [closeOnMouseOutside]="false" class="vb" *ngIf="!showPopover" > <form > <div class="form-group popover-form" > <label>Enter Custom Trigger Habit: When I</label> <textarea class="form-control" [(ngModel)]="name" name="name"></textarea> </div><br> <div class="form-group popover-form"> <label>Enter Custom Trigger Habit: I will</label> <textarea class="form-control" #customHabit id="power" maxlength="1500" [(ngModel)]="name2" name="name2"></textarea> <p class="textarea-count">({{1500 - customHabit.value.length }} of 1500 Characters remaining)</p> </div> <div class="popover-btn"> <button class="btn btn-default " (click)="showPopover = false">CANCEL</button> <button type="button" (click)="save()" >SAVE</button> </div> </form> </popover-content> </div> <button [popoverOnHover]="false" type="button" popoverPlacement="bottom" [popover]="addObjectivePopovers" >ADD CUSTOM HABIT</button> </div>Entonces, cuando agrego algo de contenido en el área de texto y hago clic en el botón Guardar, tengo que cerrar la ventana emergente, y también cuando hacemos clic en cancelar también debería cerrar la ventana emergente.
¿Alguien puede ayudar en lo mismo?
Suponiendo que el indicador booleano show esté separado del estado visible del popover, agregue un nuevo indicador booleano a su componente ts que se usará para administrar el estado visible del popover y cambiarlo con sus controles cancelar/guardar:
componente ts:
showPopover = false save() { this.show = true; this.showPopover = false; }componente html:
<div class="form-group popover-form" *ngIf="showPopover"> <textarea class="form-control" id="power" maxlength="1500" [(ngModel)]="name" name="name"></textarea> </div> <div> <button class="btn btn-default cancel-btn" (click)="showPopover = false">CANCEL</button> <button type="button" (click)="save()">SAVE</button> </div> <p *ngIf="show">{{name}}</p>