angular-material

问题 I want to write my own library and reuse it in other projects, so I created a new app and generated a library there: ng new lib-collection cd lib-collection ng g library first-lib --prefix va How to add Angular Material to my library? I wanted to use something like this: ng add @angular/material --project=first-lib But I got an error: Could not find the project main file inside of the workspace config (projects/first-lib/src) . What's wrong? 回答1: You don't need to add it there. You need to

问题 I'm facing a weird problem..I have a card and it leaves space at the bottom This is the code: app.component.html <div fxLayout="row"> <mat-card fxLayout="row" fxFlex="80%" class="center space-top"> <mat-card-content fxLayout.gt-sm="row"> <div fxLayout.gt-sm="column" fxFlex.gt-sm="40%"> <img mat-card-image src="../../../assets/background.jpg" alt="background image"> </div> <div fxLayout.gt-sm="column" fxFlex.gt-sm="50%" class="gutter"> <router-outlet></router-outlet> </div> </mat-card-content>

问题 I am using Angular Material for displaying content. My TS code is: import { Component, OnInit, ViewChild } from '@angular/core'; import { AdminReassignTaskService } from 'src/app/services/admin-reassign-task.service' import { Location } from '@angular/common'; import { trigger, state, transition, animate, style } from '@angular/animations'; @Component({ selector: 'app-admin-reassign-task', templateUrl: './admin-reassign-task.component.html', animations: [ trigger('detailExpand', [ state(

问题 I am using Angular Material for displaying content. My TS code is: import { Component, OnInit, ViewChild } from '@angular/core'; import { AdminReassignTaskService } from 'src/app/services/admin-reassign-task.service' import { Location } from '@angular/common'; import { trigger, state, transition, animate, style } from '@angular/animations'; @Component({ selector: 'app-admin-reassign-task', templateUrl: './admin-reassign-task.component.html', animations: [ trigger('detailExpand', [ state(

问题 Angular version 9.2.0 When I import the MatToolbarModule in a module and use it in the html template, then I get the following error message: This likely means that the library (@angular/material/toolbar) which declares MatToolbarModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with

问题 I am using angular-material Mat-Table to display list of records in grid format. My requirement is to group and expand rows based on ID column value in the grid. I am fetching data from API and assigning it to mDataSource . To achieve the group and expand behavior, I assigned mDataSource to another MatTableDataSource . So that I can maintain original records in one datasource and grouped data in another datasource. But I am not sure on how to achieve this behavior in code and html.

问题 I want to change the default date format (YYYY-MM-DD) to some other format like (MM-DD-YYYY). This is my calendar HTML structure. <mat-form-field class="full-width"> <input matInput [matDatepicker]="picker" [(ngModel)]="currentDay" (dateChange)="currentDayChanged()" required placeholder="date" name="currentDay"> <mat-datepicker-toggle matSuffix [for]="picker"> </mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> </mat-form-field> 回答1: There is a blog about it: https://blog

问题 I am getting this error when i tried to use MatToolBar in my angular app. In browser I get Uncaught TypeError: Object(...) is not a function and also get warnings in the console: WARNING in ./node_modules/@angular/cdk/esm5/text-field.es5.js 146:151-159 "export 'ɵɵinject' was not found in '@angular/core' WARNING in ./node_modules/@angular/cdk/esm5/a11y.es5.js 2324:206-214 "export 'ɵɵinject' was not found in '@angular/core' How can I resolve this? On github it is a closed issue. 回答1: So

问题 I used reactive nesting forms of angular 8 with angular material. in component.ts file this.dataForm = this.formBuilder.group({ name: [null, Validators.required], user: this.formBuilder.group({ firstname: [null, Validators.required], lastname: [null, Validators.required] }) }); get dataControls() { return this.dataForm.controls; } In component.html file <form [formGroup]="dataForm"> <mat-form-field> <mat-label>Name</mat-label> <input matInput type="text" formControlName="name" required> <mat

问题 In my use case scenario I have a dropdown box ( mat-select ) which fills several input fields. Any change will fill the fields differently. Since the user could change a field I want to ask the user before the final change is executed if (s)he agree to clear(or change) all fields. In case of a NO the selection change will not happen and all fields should remain. I tried to reduce the use case to a sample. I can select an item from the dropdown and do some further actions. <mat-select