angular-material

Programmatically select mat-tab in Angular 2 material using mat-tab-group

by

UPDATE (using newest angular+material) there are multiple ways.. possible solution, using two-way databinding <button mat-raised-button (click)=”demo1BtnClick()”>Tab Demo 1!</button> <mat-tab-group [(selectedIndex)]=”demo1TabIndex”> <mat-tab label=”Tab 1″>Content 1</mat-tab> <mat-tab label=”Tab 2″>Content 2</mat-tab> <mat-tab label=”Tab 3″>Content 3</mat-tab> </mat-tab-group> public demo1TabIndex = 1; public demo1BtnClick() { const tabCount = 3; this.demo1TabIndex = (this.demo1TabIndex + 1) % tabCount; } possible solution, using … Read more

Styling mat-select in Angular Material

by

For Angular9+, according to this, you can use: .mat-select-panel { background: red; …. } Demo Angular Material uses mat-select-content as class name for the select list content. For its styling I would suggest four options. 1. Use ::ng-deep: Use the /deep/ shadow-piercing descendant combinator to force a style down through the child component tree into … Read more

Angular MatPaginator doesn`t get initialized

by

In my case, the <mat-paginator> element was inside a container that had an *ngIf on it, which did not render until the data loaded asynchronously. This causes this.paginator to be undefined even in ngAfterViewInit. This causes it to silently fail as MatTableDataSource has no problem with you setting paginator to undefined. The solution was to … Read more

How to change height in mat-form-field

by

TLDR: adjust the font-size of the surrounding container. Longer: The functionality for resizing the form-fields is built into Angular Material so unless you want to change relative proportions in the field, you don’t need to get muddy with resizing individual components (see documentation). The key to adjusting the field size is actually just adjusting the … Read more

How to add icon to mat-icon-button

by

Just add the <mat-icon> inside mat-button or mat-raised-button. See the example below. Note that I am using material icon instead of your svg for demo purpose: <button mat-button> <mat-icon>mic</mat-icon> Start Recording </button> OR <button mat-raised-button color=”accent”> <mat-icon>mic</mat-icon> Start Recording </button> Here is a link to stackblitz demo.

Angular Material and changing fonts

by

You can use the CSS universal selector (*) in your CSS or SCSS: * { font-family: Raleway /* Replace with your custom font */, sans-serif !important; /* Add !important to overwrite all elements */ } Starting from Angular Material v2.0.0-beta.7, you can customise the typography by creating a typography configuration with the mat-typography-config function and … Read more

How to change mat-icon size in Material

by

In my case, this works perfectly. I use newest material (6.2.0) CSS: .icon { font-size: 36px; } HTML: <div class=”icon”> <mat-icon [inline]=”true”>done</mat-icon> </div> The main thing is to set: [inline]=”true” From the API: @Input() inline: boolean – Whether the icon should be inlined, automatically sizing the icon to match the font size of the element … Read more

Confirm password validation in Angular 6 [duplicate]

by

This question could be solved with a combination of these two answers: https://stackoverflow.com/a/43493648/6294072 and https://stackoverflow.com/a/47670892/6294072 So first of all, you would need a custom validator for checking the passwords, that could look like this: checkPasswords: ValidatorFn = (group: AbstractControl): ValidationErrors | null => { let pass = group.get(‘password’).value; let confirmPass = group.get(‘confirmPassword’).value return pass === … Read more

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)