how to maintain ui state on model change in angula

what is the best way to maintain UI state in angular2? currently i am having problem within single component.

so i am trying to maintain class using ngif but dont know how to put that condition to change class on ngif.

 *ngif="uiState=desired.elementId" // how to set class here?

and is there any other way to maintain the state in angular2? however I even tried to use observable services but data comes first and renders later so not working , is there any function i can call onviewupdate complete etc??

UPDATE

my Observable service

this.ObservableService.getData.subscribe((val) => {
                     this.data= val;
                  });

my html

<div *ngFor="let foo of data">
    <div class="collapsible-header" [id]="foo.array1.value1">
        {{poo.array1.value2}} , <h6>posted on {{foo.array1.value3}}</h6>
    </div>
    <div class="collapsible-body">
        <p>{{foo.array2.value2}}</p>
    </div>
    <ul class="collection">
        <li *ngIf="foo.array4.value1>= 1" class="active collection-item">
            <div *ngFor="let p of foo.array4">
                <span class="title">{{p.somevalue}}</span>
            </div>
        </li>
     </ul>
     <div>
            <input type="text" (ngModel)="mymodel.value1" ">
            <button type="submit" (click)="callback(mymodel)">Submit</button>
     </div>
</div>

and my callback function

callback(){
...
this.ObservableService.brodcast(data);
...
}

so when new data is available i dont want whole html to render just <ul class="collection"> since <div class="collapsible-header" will have a class active when user opened it . but on model changes i.e. updated data is available everything resets. so how can i manage this state? If you need any more details please let me know . I followed this article http://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html but its not working in my case or i am doing something wrong dont know.

The pattern we've been using at my job is to have a public variable that indicates whether data is loaded. Let's call it isLoaded. isLoaded is initialized to false, and set to true when the data comes from your observable service. In your HTML markup, use *ngIf to only show the data after isLoaded is set to true.

At my job, we also show an animated loader component when isLoaded is false, to let the user know the system is waiting on something, but that is getting a little fancy.

To implement this approach in your code, you would do something like:

TypeScript/Javascript:

public isLoaded: boolean = false;

...

ngInit(): void {
    this.ObservableService.getData.subscribe((val) => {
        this.data= val;
        this.isLoaded = true;
    });

    ...
}

HTML:

<div *ngIf="!isLoaded">
    Loading Data ...
</div>
<div *ngIf="isLoaded">
    <div *ngFor="let foo of data">
        <div class="collapsible-header" [id]="foo.array1.value1">
            {{poo.array1.value2}} , <h6>posted on {{foo.array1.value3}}</h6>
        </div>
        <div class="collapsible-body">
            <p>{{foo.array2.value2}}</p>
        </div>
        <ul class="collection">
            <li *ngIf="foo.array4.value1>= 1" class="active collection-item">
                <div *ngFor="let p of foo.array4">
                    <span class="title">{{p.somevalue}}</span>
                </div>
            </li>
         </ul>
         <div>
                <input type="text" (ngModel)="mymodel.value1" ">
                <button type="submit" (click)="callback(mymodel)">Submit</button>
         </div>
    </div>
</div>