Issue I have a mat expansion panel that I would like to extend over the element below it rather than simply moving that element down. I tried adjust the z-index of the mat-expansion element but that did not work. I
Continue readingTag: angular-material-6
Angular Testing for Angular-Material on Mat-Menu
Issue I’m trying to write a test for my mat-menu in my application’s toolbar. When I call button.click() in my test, I get a Cannot read property ‘templateRef’ of undefined error in the console. As all works find in the
Continue readingError when a field is missing in Angular data table
Issue I am experimenting with Angular Cli 6 to evaluate the framework for a project. I’m stuck with Material Data Table example https://material.angular.io/components/table/overview I don’t how to handle a situation if my data-json (PeriodicElement) missing a field. For example if
Continue readingCenter Mat-Menu, Center MatMenu Overlay to Button
Issue Per Material Issue 9631 centering the mat-menu to the button is as follows. the issue is that supporting it deviates from the spec and may end up looking weird. I have a need for this functionality… Because writing my
Continue readingHow to checked mat-checkbox in angular 14
Issue Trying to check the mat checkbox by passing the values, But it is not working. If i click the button checkbox should be checked by passing the values. So, How to do it? If anyone knows please help to
Continue readingAngular 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 readingcustom native date adapter no longer works since upgrade of Angular/Material from 5 to 6
Issue I had a custom date adapter in my Angular 5 app: import {NativeDateAdapter} from “@angular/material”; import {Injectable} from “@angular/core”; @Injectable() export class CustomDateAdapter extends NativeDateAdapter { parse(value: any): Date | null { if ((typeof value === ‘string’) && (value.indexOf(‘/’)
Continue readingThe correct method of updating a MatTableDataSource in Angular 2 version 6
Issue I have a listing that uses the mat-table component which is fed by the MatTableDataSource. in the component.html <table mat-table [dataSource]="dataSource" matSort> in the component.ts dataSource = new MatTableDataSource(); when I click to delete an item, on the success
Continue readinghow to make active previous all steps of selectedIndex step using angular material stepper and angular 6
Issue I have use angular material stepper and i need to activate all the previous steps till selectedIndex step in angular 6. I already tried by using linear stepper but i getting only active step for selectedIndex not for all
Continue readingHow 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 readingAngular material: datepicker highlighting weekends
Issue I would like to highlight weekends (Saturday and Sunday) on the datepicker. I have tried readapting the lockedweekendfilter that uses boolean for day position 0 (Sunday) and position 6 (Saturday). This code is from the Material site version 6.
Continue readingCan't override the angular material theme with my css properties
Issue I am using Angular 6.0.8 with Angular Material theme version 6.4.0 Whenever I try to slightly modify the material theme, it never works, as I always find the material theme properties to overwrite my CSS properties as follows: currentColor
Continue readingmat-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 readingHow to create carousel in angular 8 using Angular Material?
Issue The first image is what I am getting currently and second is what I actually want First:- Second:- <mat-card class=”carousel-data”> <mat-grid-list cols=”2″ rowHeight=”30px” class=”carousel-data” *ngFor=”let data of resource let i = index;” (click)=”showdata()” > <mat-grid-tile> <img class=”m-t-0 m-b-0 “[src]=”data.img”
Continue readingHow to do filter in angular material data table for specific column
Issue i am trying angular material data table. As we know filtering happened for each row by default. If i want to filter column specific, then what should i do? Should i have to write method for getting all records,
Continue readingMat-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 readingMat-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 readingHow do I "save as pdf" mat-table in angular 6
Issue I have used angular-materialize theme. I am beginner for Angular framework. But I don’t find a right way to export table as pdf. I have created demo sample from https://material.angular.io/components/table/overview this official site. My requirement is select date and
Continue readingmat-sidenav push property causing a build error
Issue I’m on Angular 6 and am using mat-sidenav <mat-sidenav #drawer position="end" fixedInViewport="true" [mode]="push" [opened]="false"> However, when I run ng build –prod, it throws an error Property ‘push’ does not exist on type ‘MyComponent’. Everythign works fine, but this error
Continue readingmat-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> </mat-card-content> <mat-card-actions> <button mat-button>Edit</button> </mat-card-actions> </mat-card> </mat-grid-tile> </mat-grid-list>
Continue readingWhy 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 readingAngular6 Material custom form field control with validation errors (mat-error)
Issue How to make a Material custom form field control (like this one) to support form validation and display them with mat-error? I understand that the regular matInput directive uses ErrorStateMatcher (doc) but I don’t understand how I can link
Continue readingchange checkbox color in angular material
Issue I’m using angular material(6.4.7). I was using select and I want to change the color of select checkbox. I have tried /deep/ and ::ng-deep but no success. I think, I am using it in wrong way for these checkbox.
Continue readingAngular 6 material table adds row(form field) with last entered value
Issue I am trying to add form fields and displaying it in the form of material table. But when I try to add a row(form field) it displays form field with last entered value(which is 1 2 3 in this
Continue readingPushing new FormGroup into FormArray marks dynamic FormGroup as invalid
Issue I’m not sure if this is a bug, almost 90% certain it’s not, but I want to know the logic behind something like this occuring. I have a component, where let’s say I’m initializing a FormGroup on the initialization
Continue readingAngular6 Material6 Error: "There can only be one default row without a when predicate function."
Issue I’m trying to implement the Table with expandable rows from https://material.angular.io/components/table/examples but I get this error: There can only be one default row without a when predicate function. This error comes from the fact that I have two <tr
Continue readingAngular 6 mat-nav-list with mat-expansion-panel
Issue I’m trying to create a mat-nav-list which has mat-expansion-panels as list-items. The problem is, the mat-nav-list doesn’t work as expected.The alignments are a mess and the expansion panels do not work properly. As I think, this happens because the
Continue readingThere is no directive "exportAs" set to "matAutocompleteOrigin"
Issue I’m using Angular Material 6.4.7 and I’ve some trouble with Mat-Autocomplete. I insert the autocomplete inside the MatDialog and the dropdown of the autocomplete is hidden by the dialog. I know that I can set the z-index to high
Continue readingAdd Angular material to component library
Issue I’ve added angular material to a component library…well I thought I did! Everything is working in the test harness (app.module,app.component, etc…) However when I export my library I get the error Can’t resolve ‘@angular/material’ So apparently I haven’t added
Continue readingCannot read property 'ngMetadataName' of undefined
Issue I am using Angular 6 with Angular Material. After updating to the latest version, the console is throwing this error in development. On Production it is working Cannot read property ‘ngMetadataName’ of undefined It occurs when I am trying
Continue readingDrag and Drop with sorting it is possible in Angular Material?
Issue Scenario : From Angular Material cdk version 7.0.3 we have Drag&Drop sorting. In that Drag&Drop, everywhere in that div we can click and drag. Without click everywhere, only icon will be clickable and drag that entire div. Now below
Continue readingGetting list of selected values from Angular 6 mat-selection-list
Issue How do I get the list of all values selected from Angular material mat selection list in the component. The example given shows values to be displayed in the template but not in component. I am trying to modify
Continue reading