Angular : reload a html block when new data come from observable

Question

Under my angular app, I've this component view:

component.html:

    <div *ngIf="MY_VARIABLE==1" class="ScrollStyle2">
      <div style="display: none;">
        <app-button-config-file [dataPtfName]="nouveau_data"></app-button-config-file>
      </div>
      <div class="container-fluid">
        <div class="row">
          <div *ngFor="let content of datasalle.PTF_CONTENT">
            <div class=" col-sm-6"  *ngIf="content.VERSION.includes(strVersion)">
              <app-cards [content]="content" [dataPtf]="nouveau_data"></app-cards>
            </div>
          </div>
        </div>
      </div>
    </div>

As you can see, Entire block is wrapped with an *ngIf which depends on varibale " MY_VARIABLE "

My purpose is to reload this entire html block (all the div ) whenever " MY_VARIABLE " changes,

To note:

MYVARIABLE is changing depending on a service observable::

component.ts:

getData(){
this.myservice.mySubject.susbscribe((data) => {

  this.MY_VARIABLE = data
})
}

Suggestions??

Answer 1

then simply use this.myservice.mySubject instead of MY_VARIABLE in the template. If you need its value - simply use as there too.

    <div *ngIf="myservice.mySubject | async as MY_VARIABLE" class="ScrollStyle2">
      <div style="display: none;">
        <app-button-config-file [dataPtfName]="nouveau_data"></app-button-config-file>
      </div>
      <div class="container-fluid">
        <div class="row">
          <div *ngFor="let content of datasalle.PTF_CONTENT">
            <div class=" col-sm-6"  *ngIf="content.VERSION.includes(strVersion)">
              <app-cards [content]="content" [dataPtf]="nouveau_data"></app-cards>
            </div>
          </div>
        </div>
      </div>
    </div>

if this.myservice.mySubject should be called at some point (not always). then you can use Subject instead of MY_VARIABLE .

MY_VARIABLE$ = new Subject();

getData(){
  this.myservice.mySubject.subscribe((data) => {
    this.MY_VARIABLE$.next(data);
  });
}

and the same thing in template as above but with MY_VARIABLE$ .

Answer 2

You can use ReplaySubject(2) to store old and new values which you can compare and load if different.