Question

0

39

Vistas

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

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.

7 months ago · Juan Pablo Isaza

3 Respuestas

Responde la pregunta

0

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;
}

7 months ago · Juan Pablo Isaza Denunciar

0

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 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 " id='tabi' >
            
            <div class="content-text" >
              <p>{{Trigger}}</p>
            </div>
            
          </div>

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

7 months ago · Juan Pablo Isaza Denunciar

Responde la pregunta

Encuentra empleos remotos

Accepted Answer · 2022-07-04T02:01:01.397Z

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>