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.
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>
You can use *ngIf
<div *ngIf="display">Test Data</div>
<input type="button" value="click" (click)="update"/>
display = true;
update(){
this.display = !this.display;
}
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>