angular-material

Angular 6 how to make all input's Not editable element inside a form

泄露秘密 提交于 2020-07-06 08:48:09
问题 Is there a way to disable and make all fields non editable (input / mat-select / textfield / option/input/mat-checkbox etc) inside a Form by telling only the parent div name in Angular / Angular-material ? (cannot editing them) @Component({ templateUrl: './leaseholder.component.html' }) export class LeaseholderComponent implements OnInit, IFormDirtyWarningComponent { leaseholderForm: FormGroup; constructor(private router: Router, private formBuilder: FormBuilder) { this.createLeaseholderForm(

Angular 5 Material Spinner is not working

冷暖自知 提交于 2020-07-06 07:46:36
问题 Angular 5 Material Spinner is not working app.module.ts import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; @NgModule({ imports: [ MatProgressSpinnerModule ]}) component.ts import { MatSpinner } from '@angular/material'; component.html <mat-spinner></mat-spinner> am I missing any configuration.? In Reference, it's generating an SVG file for Spinner but I don't see anything inside mat-spinner tag. 回答1: I tried to fork the mat-spinner example given and that works

Angular 5 Material Spinner is not working

做~自己de王妃 提交于 2020-07-06 07:41:46
问题 Angular 5 Material Spinner is not working app.module.ts import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; @NgModule({ imports: [ MatProgressSpinnerModule ]}) component.ts import { MatSpinner } from '@angular/material'; component.html <mat-spinner></mat-spinner> am I missing any configuration.? In Reference, it's generating an SVG file for Spinner but I don't see anything inside mat-spinner tag. 回答1: I tried to fork the mat-spinner example given and that works

angular material mat radio button unchecked on multiple click

不打扰是莪最后的温柔 提交于 2020-07-05 05:11:32
问题 How can I clear <mat-radio-button> selected on second click (after it is already selected) I know I can implement this behavior with checkbox but i need to allow select only one item. Any help? My code look like : <mat-radio-group name="WasFamilyMemberPresent"> <mat-radio-button *ngFor="let item of lookupNoYes" [value]="item.Code" > {{item.Desc}} </mat-radio-button> </mat-radio-group> 回答1: You can do the following to accomplish this. Assign a template reference to the button #button and pass

create dynamic mat-table like math matrix with angular material

左心房为你撑大大i 提交于 2020-07-04 04:20:05
问题 I have one problem on create table. My struct data is dynamic,that means number of row and column is variable like matrix m*n . and struct is available on here. I want to show json (above photo) to mat-table .but I can't correctly assign data to table and it show Duplicate data on table.show column0 for all rows of mat-table. while Correct data in table should be My code is available on stackblitz. in this code,i want create table with 5 col and 6 row. how can i solve it and show all data in

How to initialize an Angular Material Datepicker input form field?

二次信任 提交于 2020-06-29 06:59:13
问题 I'm trying to format my date picker. I don't know the way. I tried inserting a moment.js library that I don't know how to use but copying it from the internet. Now my date picker returns an object moment and I don't know how to format this. Component this.form = this.fb.group({ deliveryDate: [this.deliveryDate], // i try to set here instead this.delieryDate null or moment() or everythink..... address: [null, [Validators.required, Validators.minLength(5)]], phone: [null, [Validators.minLength

How to bind an click event for mat-step-header

冷暖自知 提交于 2020-06-29 03:49:15
问题 I want to trigger a function when user clicks on mat-step-header I've tried adding (click) on <ng-template matStepLabel><span (click)="triggerClick()">step 1</span></ng-template> but it's triggering only on the click of label which will not be helpful for my case. I want to trigger a function when user click on any of the mat-step-header if it returns the index of clicked step it will be helpful. 回答1: From the docs it doesn't look like there's a direct way to do this. The only eventEmitter

MatDialog stopped working after updating Angular to version 9

依然范特西╮ 提交于 2020-06-28 09:38:50
问题 I had an angular project which I upgraded from 7.2 to 9 following the https://update.angular.io/#7.2:9.0 Post upgrade everything except MatDialog is working. Opening the dialog shows an empty popup of disproportionate size with the following error in the console. core.js:3866 ERROR Error: Uncaught (in promise): TypeError: Cannot read property "hasAttached" of undefined TypeError: Cannot read property "hasAttached" of undefined at MatDialogContainer.push../node_modules/@angular/material/esm5

How to use a placeholder for Angular Material 7 drag and drop?

大城市里の小女人 提交于 2020-06-28 09:17:34
问题 I am using Angular Material 7's Drag and Drop library, and I am trying to figure out how to use the cdkDragPlaceholder. CdkDragPlaceholder Element that will be used as a template for the placeholder of a CdkDrag when it is being dragged. The placeholder is displayed in place of the element being dragged. Selector: ng-template[cdkDragPlaceholder] I have tried the following code (see Stackblitz): <div class="example-box" *ngFor="let movie of movies" cdkDrag> <div class="example-custom

How to use a placeholder for Angular Material 7 drag and drop?

依然范特西╮ 提交于 2020-06-28 09:17:23
问题 I am using Angular Material 7's Drag and Drop library, and I am trying to figure out how to use the cdkDragPlaceholder. CdkDragPlaceholder Element that will be used as a template for the placeholder of a CdkDrag when it is being dragged. The placeholder is displayed in place of the element being dragged. Selector: ng-template[cdkDragPlaceholder] I have tried the following code (see Stackblitz): <div class="example-box" *ngFor="let movie of movies" cdkDrag> <div class="example-custom