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?

Answer 1

You can invoke change detection manually with ChangeDetecorRef module:

import {ChangeDetectorRef} from @angular/core

constructor(private ref:ChangeDetectorRef){}

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

Answer 2

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

Answer 3

you can use:

this.ref.detectChanges();

or:

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