angular-material-6

I am using Angular 6 with Angular Material. I am trying to save a selected object or list of selected object from mat-chip and autocomplete. I am able to send string value to fruits[] array but can not able to send selected object in to fruits[] array. Please help me to find a solution. Thanks. My Demo Project Link: demo code on stackblitz You can try this solution. I have created a demo on Stackblitz . component.html <mat-form-field class="example-chip-list"> <mat-chip-list #chipList> <mat-chip *ngFor="let fruit of fruits;let indx=index;" [selectable]="selectable" [removable]="removable"

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 be less than ToTime if choose a same date</mat-error> </mat-form-field> Working Fine: <input matInput type="time" formControlName="ToTime"/> </mat-form-field> <mat-error *ngIf="DaterForm.get('ToTime').hasError('InValidToTime')">FromTime Should be

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 to open material dialog via a service ( without a service they are working fine). I think it is related to the Injectables, but I am not sure. Versions: cli: 6.1.5 , core: 6.1.4, material: 6.4.6 Here is the log stack: CustomDialogComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: Cannot read property 'ngMetadataName' of undefined at injectArgs (core.js:1418

I am using angular material in my project. I want to add extra stepper item(mat-step) on every click of addItem button. I created a plunker here. https://stackblitz.com/edit/angular-enmq1z?file=app%2Fstepper-overview-example.ts Can anyone help me with this? Thanks in advance. I would use FormArray along with FormGroup HTML: <button mat-raised-button (click)="addItem()"> add item </button> <form [formGroup]="formGroup"> <mat-horizontal-stepper formArrayName="form"> <mat-step [formGroupName]="i" *ngFor="let customerGroup of formGroup.controls.form.controls; let i = index"> <ng-template

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 class, for example: <mat-select #multipleSelect (selectionChange)="selectItem($event.value)" panelClass="multiple-panel" multiple> &.multiple-panel { min-width: 200px !important; } but when opening the dropdown its open with the original width (like in the pic) and after few millisecond"jump" to the custom min-width defined on the panel class. I find the mat