How to close the selected div when we click on the button

Issue

In my angular application I have on textarea and within the popup and when we enter any data in textarea the to be displayed in some div.

.component.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>

and I have the close button and my requirement is to close the div when we click on the close button .

Can anyone help me on tha same.

Solution

You can create a boolean flag to check when to show or hide the div and then create a click event handler on your button to set that showDiv boolean to false to hide that div;

For example:

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>

Answered By - HassanMoin