如何通过@input 属性应用样式，我想在 angular 中增加 mat-autocomplete 的宽度

Question

One of friend rightly pointed out to use property @input as shown in enter link description here . I want to apply new style and change the width of mat-autocomplete .So drop down width is still big.

I am new Angular, I don't know how to use this property, but here is what I tried this is not working.

compoenent.ts

 @Input() panelWidth: string | number;// I tried initializing this here for ex:50px, gives error

tried applying property as attribute to mat-autocomplete as shown below

 <mat-autocomplete panelWidth ="170px" #auto="matAutocomplete" [displayWith] = "displayFn">

Here is the whole template.html code snippet which does autocomplete

  <mat-form-field >
        <input matInput [matAutocomplete]="auto"  [formControl]="customerFilterControl">
           <mat-autocomplete panelWidth ="170px" #auto="matAutocomplete" [displayWith] = "displayFn">
             <mat-option  *ngFor="let option of (filteredOptions | async)" [value] ="option">
               {{option.name}} {{option.type}}
             </mat-option>
           </mat-autocomplete>
      </mat-form-field> 

Answer 1

Don't use @Input() panelWidth in component.ts, this is the definition in documentation. As end user, you should use as as follows,

1. Hard coded value

<mat-autocomplete panelWidth ="170px" ...

2. Using variable

// define variable in class
widthOfPanel = '170px';

use it in HTML with binding,

<mat-autocomplete [panelWidth]="widthOfPanel" ...

Answer 2

Try this in your styles

/deep/ .mat-autocomplete-panel {
    min-width: 133px;
    max-width: 340px;//your desire width
    width: 100%;
}

Use /deep/ when you style in inner component css else don't use it if you style in globally in stlye.scss