How to resize angular material components

4
votes

I am working on an Angular application, where i have been using angular material components so far. When i began styling the application, i quickly ran into issues styling the angular material component. I need to make a dropdown made by mat-select and mat-options larger.

Im aware of the solution using ::ng-deep, but i cant find a single part of the component, that resizes the entire component. I would also be very happy to hear about alternatives to ::ng-deep, if anyone knows about any.

<mat-form-field>
  <mat-select [(value)]="initialValue" [placeholder]="placeholder">
    <mat-option class="mat-option" *ngFor="let option of content"
      [value]="option">
        {{option}}
    </mat-option>
  </mat-select>
</mat-form-field>

Here is a minimal workinking implementation of the angular material dropdown: https://stackblitz.com/edit/angular-cuu4pk

When i use ::ng-deep to change the size of the component, only the targeted css class is resized, not the entire component.

edit: Thank you for your answers so far! The width of the component can be altered with ::ng-deep, but the general sizing will be the same even if i alter height. What i am looking for is something similar to css's transform: scale(). The reason transform scale() doesn't do the job is the distortion of the component.

3
cssangularangular-material

3 Answers

3
votes

You add inline style or css class on "mat-form-field"

<mat-form-field style="width: 400px"> // <---- Add here your style
  <mat-select [(value)]="initialValue" [placeholder]="placeholder" >
    <mat-option class="mat-option" *ngFor="let option of content"
      [value]="option">
        {{option}}
    </mat-option>
  </mat-select>
</mat-form-field>

Second option add this code in your css:

mat-form-field{
  width: 400px;
}
1
votes

Working code: https://stackblitz.com/edit/angular-xzyw2w

::ng-deep mat-form-field {
  height: 150px;
  width: 100%
}

//or 
mat-form-field{
  width: 500px;
}
0
votes

you have to add css below:

.mat-form-field {
    width: 100%;
}

because the class .mat-form-field have property display:inline-block; so to set the component full width you have to add width: 100%;.