I'm starting to learn Angular and learned how to apply color to a toolbar component using the following code snippet: <mat-toolbar color="primary"> <span>My Application</span> </mat-toolbar> However, when trying to customize my sidenav component, I tried to use color="primary" and nothing…
We recently upgraded our angular Project from 13 to 17 and also we upgraded Angular Material to 17. But after migration Materiel 17 (MDC), we are unable to reduce the form field height. Any help is is much appreciated. Angular…
I am new to angular 18 and I am trying to use the angular material for a simple application development. When I am adding the @angular/material with theme as azure-blue I am facing below challenges Even though CLI output says…
in my app iam using my custom datetime picker(it consists of text input and material datepicker)- code looks like this: <div fxLayoutAlign="center center" fxLayoutGap="10px" [formGroup]="form"> <mat-form-field appearance="outline" class="no-padding no-underline" [class.mat-form-field-invalid]="control?.invalid&&!control.hasError('badTime')" [class.ng-invalid]="control?.invalid&&!control.hasError('badTime')"> <mat-label>{{label}}</mat-label> <input matInput [matDatepicker]="picker" [max]="max" [min]="min" (dateChange)="changeDate($event)" readonly formControlName="date"…
In angular matérial, the mat-select has element mat-pseudo-checkbox who display an check icon in mat-option. I have multiple mat-select and I want to delete or hide this element. With ::ng-deep .mat-pseudo-checkbox{ display: none!important; } I can hide this. But I…
I'm attempting to change the fontsize of mat-checkbox's label. Nothing I seem to attempt works as it's consistently being overriden by the component's default styles: !important ::ng-deep Setting global style in styles.scss <mat-checkbox [(ngModel)]="reportOption.AllSelected" *ngIf="reportOption.SelectAll" (change)="onSelectAllChange($event, reportOption)" style="margin-left:5px;" class="custom-checkbox">Select All</mat-checkbox>…
I'm currently working with Angular Material version 15.2.9 and encountering an issue where the disabled state of the mat-datepicker-toggle icon remains black, whereas the enabled state correctly shows as grey. I've attempted to override the CSS to change the icon…
I have in my project css variables like below: :root { --color-primary: #65A518; --color-primary-hover: #558817; --color-primary-dark: #006729; --color-white: #FFFFFF; } but now I have to add angular material and custom themes. I read that I need create my custom palette…
I'm currently working with Angular 17 and Angular Material 17.3.1, and I'm encountering an issue with styling the Menu component. Specifically, I'm trying to adjust the height of the menu items, but my attempts haven't been successful so far. Link…
default padding of mat-button's, i need to subscribe the default padding (16px) I've been trying to set the padding of a mat-button, but the component's style isn't changing. What can I do, I've already tried changing CSS properties, but none…