Angular hide div on click function - node.js

Question

i am new to angular and typescript and i need to hide div section *ngIf="stu.notes != null" on save button click.
i can display the respective divs when clicked on the respective buttons, but i am not able to hide the other one.
Can anyone hep me out here.
Thanks in advance.
HTML File:
<nb-accordion-item-body>
<div class="row">
<div *ngIf="notes_area != null">
<h5> <span class="col-md-8" style="font-weight : bold; font-size : 16px;"
[innerHTML]="notes_area"></span>
</h5>
<br/>
</div>
<div class="col-md-3" *ngFor = "let stu of studentData">
<div *ngIf="stu.notes != null" >
<div class="row">
<div class="col-md-8">
<br/>
<h5 style="font-weight : bold;" > {{stu?.notes.slice(3,-4)}}
</h5>
<br/>
</div>
</div>
</div>
</div>
</div>
<br/>
<div class="row" *ngIf="addNote == true">
<div class="col-md-6">
<tinymce [(ngModel)] = "notes" ></tinymce>
</div>
<div class="col-md-6">
<button nbButton (click)="saveNotes()">Save</button>
</div>
</div>
</nb-accordion-item-body>
.ts File:
saveNotes() {
this.api.saveNotes(this.my_app_data[0].app_id,this.notes).subscribe(data => {
this.notes_area = data['data'];
console.log(this.app_id);
console.log('log',this.notes);
});
}