Angular Button list, overflow in to list instead of wrap

I have a list of buttons:

when there is overflow, I want the buttons to be in a drop list
like this:

And i need it to be dynamic (re arrange page size change)

I tryed this:

 ngAfterViewInit() {
    const width = this.container.nativeElement.offsetWidth;
    const fittingActions = [...this.container.nativeElement.children];
    let fittingActionsWidth = 0;

    for (const action of fittingActions) {
      fittingActionsWidth = fittingActionsWidth + action.clientWidth
      if (fittingActionsWidth < width) {
        this.actionCountToDisplay = this.actionCountToDisplay + 1
      }
    }
  }

<ng-container *ngFor="let action of actionButtons.slice(0, actionCountToDisplay || actionButtons.length)">
    <button
      (click)="action.onClick($event)"
      mat-flat-button color="primary">
      <span>{{action.label}}</span>
    </button>
  </ng-container>

but it dident work wel