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: