in Angular material progress spinner component we can actually set size by setting diameter. I want to know if there is an option to make this diameter responsive so it based on window size. <mat-progress-spinner [diameter]=24> </mat-progress-spinner> what I would…
I'm using the ngx-intl-tel-input library in my Angular project to handle phone number input fields. I've created a reusable component for the phone number field, and I am passing a FormControl from the parent component to it. Here is my…
I'm using angular material 19.0.3 and the m3 theming mechanism here's my style.scss html { color-scheme: light dark; @include mat.theme((color: ( primary: ft-green-theme.$primary-palette, tertiary: ft-green-theme.$tertiary-palette, ), typography: InterVariable, density: 0)); &[dir='rtl'] { @include mat.theme((typography: IranSans, )); } } body.light {…
I'm using Angular Material for my application and have the following button setup <mat-toolbar> <span> <a routerLink="/">My Messages</a> </span> <ul> <li> <a mat-button routerLink="/create" routerLinkActive="mat-accent"> New Post </a> </li> </ul> </mat-toolbar> Issue: When I navigate to the /create route, I…
I have the following code: <div class="flex-auto overflow-y-auto"> <mat-tab-group [animationDuration]="'0'" headerPosition="below" mat-stretch-tabs="false" > <div cdkScrollable> <!-- Tab #1 --> <mat-tab label="List 1"> <!-- TAB CONTENT GOES HERE --> <app-leads></app-leads> </mat-tab> <!-- Tab #2 --> <mat-tab label="List 2"> <!-- TAB CONTENT…
I am trying to update my application from v16 - v17 then v18. In both case 17 and 18 I find that material theme css is not working. Components such as sidepanel, button, dropdowns etc doesn't have background colors. In…
I have an odd situation where a deeply nested HTML segment of code may be inheriting some stylings from a parent that I can't predict or control. The widget is pretty straight forward... <mat-form-field appearance="fill" class="full-width-input" *ngIf="!isMultiSelect"> <mat-label>{{ selectListForm.get('commonSettings').get('label')?.value }}</mat-label>…
I'm working on an Angular project where I have multiple sections on a page, each with a unique ID. I also have a fixed-position navbar that allows users to navigate to these sections. My goal is to ensure that when…
I have an application in Angular 18 with a page containing a material date picker. When I popup the Date Picker it's fine but when I change the month with left/right arrow or the year, data are outside the container…
How to customize the color of mat checkboxes in mat select options as seen below <mat-form-field appearance="fill" style="width:49%"> <mat-label>Select Group</mat-label> <mat-select [(ngModel)]="groupNames" name="group" multiple> <mat-option *ngFor="let group of GroupList" [value]="groupName"> {{groupName}} </mat-option> </mat-select> </mat-form-field> I tried inspecting the elements and…