How to dynamically display sum of selected row data on Angular?

I am trying to dynamically display the sum of selected column data through SelectionModel on the selected rows below my table. The data displayed should change when I select/deselected the rows.

I thought ngOnInit() would allow me to achieve that, however the sum of selected column data is not changing.

totalWeight = 0;

  ngOnInit(): void{
    this.selection.selected.forEach((element) => {
      this.totalWeight += element.weight;
    });
  }

Here’s the DEMO on Stackblitz.

Source: New feed
Source Url How to dynamically display sum of selected row data on Angular?