how to maintain ui state on model change in angular2?

Question

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.

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. See the How to Ask page for help clarifying this question. — Sasxa
– Sasxa, Commented Jun 16, 2016 at 17:33

Amos Long · Accepted Answer · 2017-10-05 15:11:13Z

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>

You do not need isLoaded. in your case, you can add ngif on data it self. initially it will be undefined or will have 0 length. for Loader user http interceptor.

Collectives™ on Stack Overflow

how to maintain ui state on model change in angular2?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related