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

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  >
              <label>Enter Custom Trigger Habit: When I</label>
              <textarea  [(ngModel)]="Trigger" name="Trigger"></textarea>
          </div>

<!-- the entered data of textarea will display in below code-->

<div  >
            
            <div  >
              <p>{{Trigger}}</p>
            </div>
            
          </div>

<button type="button"><i  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.

CodePudding user response：

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  *ngIf="showDiv">            
     <div  >
         <p>{{Trigger}}</p>
     </div>      
</div>

<button (click)="closeDiv()" type="button">
   <i  type="button" aria-hidden="true"></i>
</button>

CodePudding user response：

You can use *ngIf

Template:

<div *ngIf="display">Test Data</div>
<input type="button" value="click" (click)="update"/>

Component:

display = true;
update(){
   this.display = !this.display;
}

CodePudding user response：

You can do this by using JavaScript like this. on Click it will display none. This is just an example

function show() {
        
        var x = document.getElementById("tabi")
        
        x.style.display = "none"

        
        }

<div  >
              <label>Enter Custom Trigger Habit: When I</label>
              <textarea  [(ngModel)]="Trigger" name="Trigger"></textarea>
          </div>

<!-- the entered data of textarea will display in below code-->

<div  id='tabi' >
            
            <div  >
              <p>{{Trigger}}</p>
            </div>
            
          </div>

<button type="button" onclick="show()"><i  type="button" aria-hidden="true">Button</i></button>