When the loader is set to false, I am trying to access an element by ID that is located inside the <ng-template>. In the subscribe function, after the loader changes to false and my content is rendered, I attempt to access the 'gif-html' element but it returns null.
<div class="my-loader" *ngIf="loader; else show_form_content">
<ngx-loading [show]="loader"></ngx-loading>
</div>
<ng-template #show_form_content>
<div class="gifTimer" id="gif-html">
</div>
</ng-template>
</div>
getMyData() {
this.loader = true;
this.myService
.getData()
.subscribe((response) => {
this.loader = false;
if (response.status === 'success') {
let gifHtml = document.getElementById('gif-html');
console.log('gifHtml', gifHtml)
}
});
}
ngOnInit(){
this.getMyData()
}