CODEWITHSUNDEEP
javascriptcssangulartypescript
karansys
karansys

Reputation: 2719

How to apply style through @input property, I want to increase width of mat-autocomplete in angular

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>

Upvotes: 0

Views: 384

Answers (2)

Plochie
Plochie

Reputation: 4117

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" ...
  1. Using variable 
// define variable in class
widthOfPanel = '170px';

use it in HTML with binding,

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

Upvotes: 1

Awais
Awais

Reputation: 4902

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

Upvotes: 0

Related Questions