ngIf value does not change after the variable changes

This has been asked many times but none of the solutions work for me, I have spent hours trying to figure out why it does not work, but I still have no answers. So, I am using a lottie json animation and once the animation stops/completes I want to display text on the screen. And so I change a flag in the function call but when I try to inspect the page, it always shows that

<--bindings={
  "ng-reflect-ng-if":"false"
}-->

which I think means that the flag value is not getting updated. HTML code

<html>
    <img class="bg-img" src="assets/black.jpg" alt=""> 
    <p *ngIf="displayText" style="color: white; position: relative;">Hello</p>
    <div style="position: fixed; top: 0; left: 0; width:100vw; height:100vh">
        <ng-lottie width="100%" height="100%" [options]="options" (complete)="onComplete()"></ng-lottie>
    </div>
</html>

and my component.ts code

import { Component } from '@angular/core';
import { AnimationOptions, BMCompleteEvent } from "ngx-lottie";

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {
  options: AnimationOptions = {
    path: "/assets/2version.mp4.lottie.json",
    loop: false,
    autoplay: true,
  };
  displayText = false;
  onComplete(){
    this.displayText=true
    console.log(this.displayText)
  }
}

The console outputs the correct value. Any help will be appreciated. TIA!

Solution

In Angular, there are situations where a property update may not automatically trigger change detection. One common scenario where you would need to trigger change detection manually is when you update a property outside of the Angular zone.

In order to manually trigger a change detection you can do something like this using the changeDetectorRef

import { Component } from '@angular/core';
import { AnimationOptions, BMCompleteEvent } from "ngx-lottie";

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {
  options: AnimationOptions = {
    path: "/assets/2version.mp4.lottie.json",
    loop: false,
    autoplay: true,
  };
  displayText = false;
  
  constructor(private cdr: ChangeDetectorRef) {}

  onComplete(){
    this.displayText=true
    console.log(this.displayText)
    this.cdr.detectChanges();
  }
}