Angular update view after change data

Question

<div class="text">{{message}}</div>

private message = 'Some message';

ngOnInit() {
    this.setMessageToDisplay();
}   

       setMessageToDisplay() {
          if (this.packageService.isDocPackageEmpty) {
                if(this.router.url === '/documents/todo') {
                    this.message = 'M1';
                }
                else if (this.router.url === '/documents/done') {
                    this.message = 'M2';
                }
                else if (this.imageService.isVisiblePatientDocList()) {
                    let pacientId = this.router.url.split("/")[2];
                    this.message = "M3";
                }
            } else {
                this.message = 'Def Message';
            }
            return this.message;
        }
    }

Using {{message}} displayed intialize value of this variable despite value changed in method this.setMessageToDisplay(). I do something like this in html <div class="text">{{setMessageToDisplay()}}</div> but method is executed few time and I want display only last value of message variable. Is possible set {{message}} in html and refresh view ?

Léo R. · Accepted Answer · 2018-01-16 13:29:01Z

2

You can invoke change detection manually with ChangeDetecorRef module :

import {ChangeDetectorRef} from @angular/core

constructor(private ref:ChangeDetectorRef){}

ngOnInit() {
    this.setMessageToDisplay();
    this.ref.detectChanges();
}

answered Jan 16, 2018 at 13:29

Léo R.

2,7161 gold badge13 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Walter White Over a year ago

<div class="text">{{message}}</div> still display initialize value this variable

Walter White Over a year ago

using console this.ref.detectChanges() is undefined

Luca Taccagni · Accepted Answer · 2018-01-16 13:54:24Z

0

just try this change:

<div class="text">{{message}}</div>

public message = 'Some message';

ngOnInit() {
    this.message = this.setMessageToDisplay();
}   

       setMessageToDisplay() {
          let message: string;
          if (this.packageService.isDocPackageEmpty) {
                if(this.router.url === '/documents/todo') {
                    message = 'M1';
                }
                else if (this.router.url === '/documents/done') {
                    message = 'M2';
                }
                else if (this.imageService.isVisiblePatientDocList()) {
                    let pacientId = this.router.url.split("/")[2];
                    message = "M3";
                }
            } else {
                message = 'Def Message';
            }
            return message;
        }
    }

REMEMBER to set public your message

answered Jan 16, 2018 at 13:54

Luca Taccagni

1,0596 silver badges23 bronze badges

2 Comments

Walter White Over a year ago

This is probably good aproach but ngOnInit is executed only one even when i value routerLink changed

Luca Taccagni Over a year ago

use ngAfterViewChecked or better ngAfterContentChecked

HamidReza · Accepted Answer · 2022-12-12 09:17:42Z

0

you can use :

this.ref.detectChanges();

or :

get message() { return this.setMessageToDisplay(); }

answered Dec 12, 2022 at 9:17

HamidReza

1,95421 silver badges17 bronze badges

Collectives™ on Stack Overflow

Angular update view after change data

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related