Angular; how to re-render component data when I update variable in script. Binding data is working, but not updating

Question

I'm trying to update the text in the span, using the latest Angular. However, I do not understand clearly how lifecycle hooks and update work in Angular. Issue is with fileName - I bind the data and it gets the initial value when the page loads. However when the data variable updated, I can see changes in the console, but the component itself is not updated.

Shall I use some Lifecycle methods or something else? I've read: https://angular.io/guide/lifecycle-hooks and didn't make clear for me.

<form (ngSubmit)="putToBucket()" class='form-class' >
  <label for="image_uploads" >Select Image</label>
  <input type='file' id="image_uploads" (change) ='onFileSelected($event)' class='input-button' multiple>
  <span  > {{fileName }} </span>
  <button class='submit-button' type='submit' >Submit</button> 
</form>

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})


export class DashboardComponent implements OnInit {
  constructor(
    private http: HttpClient,
     private toastr: ToastrService) { }
  urlApi = '//myuri api';
  respond;
  fileName: Array<any> =['Test']


 onFileSelected(event) {
    //console.log(event.target.files[0].name)
    let name = event.target.files[0].name;
    this.fileName.push(name)
    console.log(this.fileName)

Example of what I see:

Do you not see anything? Or does it say [object Object]? A stackblitz with a minimal reproducible example may also help. — user13258211
– user13258211, Commented May 4, 2020 at 8:36
I see 'Test'. When I add picture I see array of 2 items in the console, but still Test on the render. I updated the post and attached the picture to it. — Volodymyr RT
– Volodymyr RT, Commented May 4, 2020 at 8:42

Himanshu Singh · Accepted Answer · 2020-05-04 08:38:48Z

1

Your fileName is an array so to display it you have to iterate it in .html file or you can change fileName to string and do as shown below.

export class AppComponent  {
  fileName="Test";

  ngOnInit(){
    console.log(this.fileName);
  }

  onFileSelected(newName){
    this.fileName=newName;
    console.log(this.fileName);
  }
}

.html file

<button (click)="onFileSelected('newFile')">change file name</button>

Working Demo : demo

answered May 4, 2020 at 8:38

Himanshu Singh

2,1651 gold badge8 silver badges16 bronze badges

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

3 Comments

Volodymyr RT Over a year ago

Thank you, it works with changing the array to string. However if I upload multiple files and want to display all names - I should loop with *ngFor module?

Himanshu Singh Over a year ago

Yes, then you should use *ngFor directive.

Volodymyr RT Over a year ago

Thanks, already did. Thank you for help, I was thinking in a wrong direction :)

Muhammed Shafeeque · Accepted Answer · 2020-05-04 09:21:09Z

1

 fileName : Array<any> = [];


  onFileSelected(event){
console.log(event.target.files[0].name)
let name = event.target.files[0].name;
    this.fileName.push(name)
    console.log(this.fileName)
  }

<input type='file' id="image_uploads" (change) ='onFileSelected($event)' class='input-button' multiple>
<span   *ngFor="let list of fileName">{{list}}</span>

answered May 4, 2020 at 9:21

Muhammed Shafeeque

614 bronze badges

Comments

Shlok Nangia · Accepted Answer · 2020-05-04 08:31:58Z

0

Please try to implement onPush or ChangeDetectionStrategy in your component

Doing this will instruct Angular to run change detection on these components and their sub-tree only when new references are passed to them versus when data is simply mutated.

Run this.ref.markForCheck() or this.ref.detectChanges() when you update your variable and want it to reflect in html

Please check the following links for more information

https://angular.io/api/core/ChangeDetectionStrategy

https://alligator.io/angular/change-detection-strategy/

answered May 4, 2020 at 8:31

Shlok Nangia

2,3773 gold badges19 silver badges25 bronze badges

1 Comment

Volodymyr RT Over a year ago

Thank you, I will check it. But isn't it too complicated for small re-render of text?

Collectives™ on Stack Overflow

Angular; how to re-render component data when I update variable in script. Binding data is working, but not updating

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related