mat-select-autocomplete×Lifecycle-Hooks×幅の変更を適用

目的

mat-select-autocompleteで定義したドロップダウンのWidthを変更する。

やったこと

[解決方法]コンポーネントが初期化された後にコードからstyleを変更。

Document.GetElementByTagNameを利用して対象のHTML Elementを取得し、コードからStyleを変更する。
複数あるmat-select-autocompleteのうち、1つだけ変更したい場合などは、mat-select-autocompleteタグにIDやClassをつけて呼び出すようにしたらできそう。

  ngOnInit() {
    (<HTMLElement>(
      document.getElementsByTagName('mat-form-field')[0]
    )).style.width = '300px';
  }

stackblitz.com

マニュアル確認

マニュアルを見る限り、引数で渡すことはできなさそうだった。

export class SelectAutocompleteComponent implements OnChanges, DoCheck {
  @Input() selectPlaceholder: string = "search...";
  @Input() placeholder: string;
  @Input() options;
  @Input() disabled = false;
  @Input() display = "display";
  @Input() value = "value";
  @Input() formControl: FormControl = new FormControl();
  @Input() errorMsg: string = "Field is required";
  @Input() showErrorMsg = false;
  @Input() selectedOptions;
  @Input() multiple = true;

  // New Options
  @Input() labelCount: number = 1;
  @Input() appearance: "standard" | "fill" | "outline" = "standard";

CSSからのStyle指定

• mat-select-autocompleteにID/Classを指定し、それに対してCSSを定義したが、反映されなかった。
• mat-select-autocompleteにID/Classを指定し、その配下のmat-form-fieldタグにstyleを適用したが、反映されなかった。
• Importantをつけてみたが、反映されなかった。