How can the component be updated at any random point of time from within a model class?

Question

From the model class, at some random point of time, I need to pass 2 arguments to component to update the html. This argument will be used by the component function to make some UI modifications in the view.

For example:

this.notifyservice.SetTitleMessage(val1: string, val2: string);

Inside the component, i have a different function:

public DisplayTitleMessage(val1: string, val2: string){
this.showitem = (val1 == "item1") ? true: false;
}

These 2 parameters(val1 & val2) should be used to update component member variables(showitem) which in turn update the html.

Can anyone guide me how the component can be updated at any random point of time from within a model class?

You should not use model to do this. This breaks all MV* architecture. — Nilay Vishwakarma, Jun 13 '18 at 06:10
Angular doesn't know your model is changed or not when it is not coupled with component's template. — baj9032, Jun 13 '18 at 06:20

cyberpirate92 · Answer 1 · 2018-06-13T06:57:25.290

Use a BehaviorSubject in your service and subscribe to it in your component

notify.service.ts

@Injectable()
export class NotifyService {
    public values: BehaviorSubject<any> = new BehaviorSubject(null);

    public SetTitleMessage(val1: string, val2: string) {
        this.values.next({val1: val1, val2: val2});
    }
}

In your component's OnInit

ngOnInit() {
    this.notifyService.values.subscribe((values: any) => {
        if (values)
            this.DisplayTitleMessage(values.val1, values.val2);
    });
}

Now, whenever a change happens, DisplayTitleMessage will be called.

Demo

Hope this helps

Lukáš Jurygáček · Answer 2 · 2018-06-13T06:45:57.573

This is the case what Rxjs is created for. You can subscribe from anywhere to Subject and get fresh data just when the Subject's value is changed. Then, you update a variable in component (template) and Angular's ChangeDetection is triggered.

I created an example: https://stackblitz.com/edit/async-communication-model-template

Do not forget to unsubscribe on component's destruction, otherwise there can appear performance bottlenecks or unexpected behavior.

Angular/RxJs When should I unsubscribe from `Subscription`

How can the component be updated at any random point of time from within a model class?

2 Answers2

Demo