Angular Material: mat-drawer-container not showing backdrop with multiple mat-drawer

Issue I’m trying to implement the [hasBackdrop]=true on my mat-drawer-container with multiple mat-drawers. My html structure is something like this: <mat-drawer-container [hasBackdrop]="true"> <mat-drawer #drawer mode="over"> <app-side-nav [drawer]="drawer" [infoDrawer]="infoDrawer" [contactDrawer]="contactDrawer" ></app-side-nav> </mat-drawer> <mat-drawer #infoDrawer mode="over"> <app-side-info [infoDrawer]="infoDrawer"></app-side-info> </mat-drawer> <mat-drawer #contactDrawer mode="over"opened=’true’>

Continue reading

How to use colspan and ngFor in Angular material 6 table?

Issue I’m using Angular Material to render the table. Code: <ng-container matColumnDef=”type”> <th mat-header-cell *matHeaderCellDef> Workout type </th> <td mat-cell *matCellDef=”let workout”> {{workout.type}} </td> </ng-container> <ng-container matColumnDef=”set1″> <th mat-header-cell *matHeaderCellDef> Weight x Reps </th> <td mat-cell *matCellDef=”let workoutData”> {{workoutData.workoutSessions[0].sets[0].weight}} x

Continue reading

mat-tab-nav-bar tabs not showing up

Issue When using the mat-tab-nav-bar from Angular Material, the tabs aren’t appearing on the Angular 6 SPA. Here is the code: forms.component.html: <nav mat-tab-nav-bar> <a mat-tab-link *ngFor=”let link of [navLinks]” [routerLink]=”[link.path]” routerLinkActive #rla=”routerLinkActive” [active]=”rla.isActive”> {{link}} </a> </nav> <router-outlet></router-outlet> forms-routing.module.ts import

Continue reading

Mat-select panel min-width

Issue I’m trying to customize mat-select with multiple checkboxes. for some reason the panel get wrong min-width as below: and I don’t know where its calculating this min-width. also I tried to add panelClass and override the min-width from this

Continue reading

Mat-select panel min-width

Issue I’m trying to customize mat-select with multiple checkboxes. for some reason the panel get wrong min-width as below: and I don’t know where its calculating this min-width. also I tried to add panelClass and override the min-width from this

Continue reading

mat-grid-list with a mat-card and mat-card-actions/mat-card-footer

Issue I have the following code, in angular 6 and material design: <div class=”grid-container”> <h1 class=”mat-h1″>Candidatos</h1> <mat-grid-list cols=”5″ gutterSize=”20px” class=”list-candidatos”> <mat-grid-tile *ngFor=”let candidato of candidatos”> <mat-card class=”candidato-card”> <mat-card-header> <mat-card-title>{{candidato.nome}}</mat-card-title> </mat-card-header> <mat-card-content> &nbsp; </mat-card-content> <mat-card-actions> <button mat-button>Edit</button> </mat-card-actions> </mat-card> </mat-grid-tile> </mat-grid-list>

Continue reading

Why mat-error not get displayed inside mat-form field in angular material 6 withcustom global validators

Issue i am using angular material 6 ,i have a vaidation inside mat-form-field mat-error is not displayed , when move after mat-form-field to the mat-error which is displaying properly. Not Working code: <mat-form-field> <input matInput type=”time” formControlName=”ToTime”/> <mat-error *ngIf=”DaterForm.get(‘ToTime’).hasError(‘InValidToTime’)”>FromTime Should

Continue reading