I have an angular application, In that I have created the popover using angular.
.component.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>
So when I add some content in textarea and click on the save button I has to close the popup ,and also when we click on the cancel also It should close the popup.
Can anyone help on the same.
Assuming the show boolean flag is separate from the visible state of the popover then add a new boolean flag to your component ts which will be used to manage the visible state of the popover and toggle it with your cancel/save controls:
component ts:
showPopover = false
save() {
this.show = true;
this.showPopover = false;
}
component 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>