mat-select with mat-select-trigger unresponsive in downgraded Angular / AngularJS app

Question

I have an hybrid Angular / AngularJS app in which in the AngularJS side I raise a modal window using a service in the Angular app that contains an Angular component. All is good, the modal is raised, the component shown however the component has a mat-select that contains a mat-select-trigger a mat-chip-list and the options are produced using a ngFor. It works will but sometimes when I click the select it is unresponsive, sometimes it is perfect. In the scenarios the select is clicked but the options are not shown nothing happens until I click or tab the interface.

This is my template code:

<mat-select formControlName="companies" multiple class="add-user__form__chip-select">
    <mat-select-trigger>
        <mat-chip-list>
            <mat-chip *ngFor="let company of outputChips('companies')"
                  [removable]="true"
                  (removed)="onChipRemove('companies', company)">
                {{ company.displayName }}
                <mat-icon matChipRemove>cancel</mat-icon>
            </mat-chip>
        </mat-chip-list>
    </mat-select-trigger>
    <mat-option *ngFor="let company of companyList" [value]="company">{{company.displayName}}</mat-option>
</mat-select>

This is my code file (typescript), I have not added all code as some methods are not relevant.

export class AddAccountComponent implements OnInit {
  @ViewChild('stepper') private stepper: MatStepper;
  addAccountForm: FormGroup;
  companyList: any[] = [];
  roles: any;
  userCreated = false;
  creationError = false;

  constructor(@Inject(MAT_DIALOG_DATA) private data,
              public dialogRef: MatDialogRef<AddAccountComponent>,
              private zone: NgZone,
              private apiService: ApiService,
              private i18Next: I18NextPipe,
              private emailUniqueValidator: EmailUniqueValidator
  ) { }

  ngOnInit(): void {
    this.addAccountForm = this.createAddUserForm();
    this.loadCompanies();
  }

  createAddUserForm(): FormGroup {
    return new FormGroup({
      name: new FormControl('', [Validators.required]),
      email: new FormControl(
        '',
        [Validators.required, Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$')],
        this.emailUniqueValidator.validate.bind(this)
        ),
      companies: new FormControl(),
      roles: new FormArray([])
    });
  }

  loadCompanies(): void {
    this.apiService.getTags('company', '').subscribe(tags => this.companyList = tags.slice(0, 20));
  }

  outputChips(control): any {
    return this.addAccountForm.controls[control].value;
  }

  onChipRemove(control: string, value: any): void {
    const index = this.addAccountForm.controls[control].value.findIndex(item => item.id === value.id);
    this.addAccountForm.controls[control].value.splice(index, 1);
    this.addAccountForm.controls[control].setValue(this.addAccountForm.controls[control].value);
  }

I thought at first the amount of companies being returned by the API may be the problem but I reduced this to only 20 results when debugging. There must be a problem with the change detection within the hybrid app. Has anyone experienced such behaviour before? I thought of maybe triggering the change detection when the mat-select or the mat-select-trigger is clicked, I haven't tried this as of yet as I know that I can't add a click event to the mat-select-trigger, I shall try with the mat-select but if anyone has experienced this type of behaviour before and has some idea of how to remedy this problem I will be most appreciative.