Update view in Angular6 when we set variable in subscribe function

Question

First component which renders the file select html

When I click on browse button I redirect to another component Fileselect component which is second component this.goto('fileselect');

Problem is when I select a file from file component I have to display it in the input field of the first component

When I click on the Select class button I am calling redirect() function.

In file select component I have used service to pass the file name to the first component as shown in the below code

 redirect(){
  this._messageService.filter(this.selectedFile);
  this.router.navigateByUrl('');

}

And in the First Component where I want this file name, I have subscribed to function as shown

ngOnInit() {
   this._messageService.listen().subscribe((m:any) => {
            this.fileName = m
            this.loadXMLasJSON()
            console.log(this.fileName)

});}

I am assigning the variable that is this.fileName in the subscribe function when I console.log I am getting the filename. But the view is not getting updated.

My view code

 <input type="text"  class="form-control image-preview-filename" value="{{fileName}}" />

What could be the problem?

Please help me with this.

I would suggest prefer ngModel and second to update the view, inject Changedetectorref in your constructor and in your subscribe method use markForCheck() or detectChanges() methods from Changedetectorref. Call one of these methods after assigning the value of filename — Sumeet Kale
@SumeetKale when i do that i get error ViewDestroyedError: Attempt to use a destroyed view: detectChanges — Ninad
Got it. Your navigation method is wrong I guess. Are you using normal router outlet or named router outlet. I think you can solve this using named router outlet. In which you can navigate the fileselect route in a named router outlet which should prevent your first component to not get destroyed on navigation — Sumeet Kale

Giacomo Voß Giacomo Voß · Accepted Answer · 2018-08-03T08:20:36

Use [ngModel] instead of value:

<input type="text"  class="form-control image-preview-filename" [ngModel]="fileName" />

Update view in Angular6 when we set variable in subscribe function

2 Answers