How to close the popup modal when we click on save or cancel button-CodePudding

I have an angular application, In that I have created the popover using angular.

.component.html

 <div >
          <div  >
          <popover-content #addObjectivePopovers
          [animation]="true"
          [closeOnClickOutside]="false"
          [closeOnMouseOutside]="false"  *ngIf="!showPopover" >

    <form >
          <div  >
              <label>Enter Custom Trigger Habit: When I</label>
              <textarea  [(ngModel)]="name" name="name"></textarea>
              
          </div><br>
            <div >
              <label>Enter Custom Trigger Habit: I will</label>
              <textarea  #customHabit id="power" maxlength="1500" [(ngModel)]="name2" name="name2"></textarea>
              <p >({{1500 - customHabit.value.length }} of 1500 Characters remaining)</p>
            </div>
            <div >
              <button   (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.

CodePudding user response：

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  *ngIf="showPopover">
    <textarea  id="power" maxlength="1500" [(ngModel)]="name" name="name"></textarea>
</div>

<div>
    <button   (click)="showPopover = false">CANCEL</button>
    <button type="button" (click)="save()">SAVE</button>
</div>

<p *ngIf="show">{{name}}</p>