*ngIf & Jquery acting weird - Angular 5 - html

Question

I'm trying to use expand-collapse feature of bootstrap 4 and was encountering a weird issue with the use of *ngIf for expansion and collapse.
Whenever I try to use *ngIf as follows, the jquery doesn't work but works when *ngIf is deleted.
HTML:
<div class="collapse-group">
<div class="row">
<div class="col-md-7" id="row">
<div id="link_text_div" *ngIf="this.collapseExpandArrowFlag==true">
<span id="collapse_all" class="close-button" (click)="arrowFunc($event)" style="cursor: pointer;" >
Collapse all
</span>
</div>
<div id="link_text_div" *ngIf="this.collapseExpandArrowFlag==false">
<span id="expand_all" class="open-button" (click)="arrowFunc($event)" style="cursor: pointer;"
>
Expand all
</span>
</div>
</div>
</div>
</div>
.Ts:
collapseExpandArrowFlag = true;
arrowFunc(event) {
if(event.srcElement.id === "collapse_all") { //On-Click Collapse Logic
this.collapseExpandArrowFlag = false;
$(".close-button").on("click", function() {
$(this).closest('.collapse-group').find('.multi-collapse').collapse('hide');
});
}
if(event.srcElement.id === "expand_all") {
this.collapseExpandArrowFlag = true;
$(".open-button").on("click", function() {
$(this).closest('.collapse-group').find('.multi-collapse').collapse('show');
});
}

Answer 1

Try to remove "this" in the ngIf like this:
*ngIf="collapseExpandArrowFlag==true"

Answer 2

Please remove the 'this.' from the *ngIf and just write
*ngIf="collapseExpandArrowFlag"
If this not working , try to change *ngIf to
[hidden]="collapseExpandArrowFlag"
and
[hidden]="!collapseExpandArrowFlag"
This will add the element and the event on the dom on load time. and will keep it there (with a display : none property in css).
Plus take into consideration how you need to work with external library code like JQuery.
See references:
Use jQuery script with Angular 6 CLI project

Answer 3

Change you ts file as follows
collapseExpandArrowFlag = true;
arrowFunc(event) {
if(event.srcElement.id === "collapse_all") { //On-Click Collapse Logic
this.collapseExpandArrowFlag = false;
$(this).closest('.collapse-group').find('.multi-collapse').collapse('hide');
}
if(event.srcElement.id === "expand_all") {
this.collapseExpandArrowFlag = true;
$(this).closest('.collapse-group').find('.multi-collapse').collapse('show');
}
What's happening here is, when you click the button, inside ts code,
this.collapseExpandArrowFlag = false;
is called, and in the template the close-button is removed.
But in the very next line of ts code,
$(".close-button")
is called, But in this state that element is removed from the DOM
And make sure you've removed this. from *ngIf statements