angular-material

问题 I'm trying to use Drag&Drop features released with Angular Material 7. And dynamically creating component using ng-tempalte. <div cdkDropList (cdkDropListDropped)="dropLocal($event)"> <ng-template #components></ng-template> </div> and added cdkDrag at components. I am using createComponent at parent component to keep on create components. viewContainerRef.createComponent but dragdrop functionality is not functional since cdkDrag must be in a tag nested inside the one with cdkDropList,

问题 I'm trying to use Drag&Drop features released with Angular Material 7. And dynamically creating component using ng-tempalte. <div cdkDropList (cdkDropListDropped)="dropLocal($event)"> <ng-template #components></ng-template> </div> and added cdkDrag at components. I am using createComponent at parent component to keep on create components. viewContainerRef.createComponent but dragdrop functionality is not functional since cdkDrag must be in a tag nested inside the one with cdkDropList,

问题 I have been using Angular and Material for more than a year, and i never met this problem, but here we are. My goal: after following the official angular guide https://material.angular.io/guide/getting-started (succesfully) i would like to add another module and use material components in my newly created module. My steps (after following the official angular material getting started guide, with no problems): cd myProjectFolder ng g m home cd home ng g c home my module and component code:

问题 I want to list a records in mat-table format. My array of data is as below in this screenshot. As seen in the image console log it has two records but in table listing it displays only first record. Here is my component in which i am getting records from the api services. As i am getting records through the array.map() so i am pushing the records into the array variable and have called my function into ngAfterViewInit() life cycle method. export class RecordComponent implements OnInit,

问题 First steps in Angular (with Material at version 9). I'm creating a form with the following code: HTML: <mat-form-field> <mat-label>Course</mat-label> <mat-select [formControl]="subjectControl" [attr.data-tag-subjectSemester]="this.subjectControl.value ? this.subjectControl.value.trim() : '' [attr.data-tag-subjectName]="this.subjectControl.value ? this.subjectControl.value.trim() : '' (selectionChange)="onChange($event)" required > <mat-option>-- None --</mat-option> <mat-optgroup *ngFor="let

问题 I have implemented candeactivate guard using angular forms validation. If user clicks on an ngForm Field. and tries to navigate to different Tab, user will get a custom confirmation Popup, which will say "Discard Changes ? " and returns true or false. This is my form guard import { NgForm } from "@angular/forms"; import { ComponentCanDeactivate } from './component-can-deactivate'; export abstract class FormCanDeactivate extends ComponentCanDeactivate { abstract get form(): NgForm;

问题 It is possible to align the center, the right and the left, buttons using mat-tab-group? I'm using mat-tabs. How can I put elements with the name left on the left, elements like the center name on the center and elements with the name right on the right? I tried to use this mat-align-tabs="center" to center some elements, but even this didn't work. I used the following, but it only worked in one case ... I can't align the items in the three sections (center, right and left). .mat-tab-labels {

问题 Is it possible to scroll a specific data row into view when using the angular material mat-table cdk-table ? I'm trying to implement keyboard scrolling with no luck. 回答1: I've it working now. Not perfect but it works. See the example on stack blitz mentioned in my earlier message. https://stackblitz.com/edit/mensand-rowselect?file=app%2Ftable-basic-example.html 来源： https://stackoverflow.com/questions/49697459/mat-table-scroll-a-row-into-view-in-angular-2

问题 Is it possible to scroll a specific data row into view when using the angular material mat-table cdk-table ? I'm trying to implement keyboard scrolling with no luck. 回答1: I've it working now. Not perfect but it works. See the example on stack blitz mentioned in my earlier message. https://stackblitz.com/edit/mensand-rowselect?file=app%2Ftable-basic-example.html 来源： https://stackoverflow.com/questions/49697459/mat-table-scroll-a-row-into-view-in-angular-2

问题 I want to know if it is possible to have a cell that contains a mat-icon defined as cdkDragHandle.At the moment it is active on the full row but I just want the single icon to be used as draghandle This is part of the code I'm using: <mat-table #table [dataSource]="dataSource" class="mat-elevation-z8" cdkDropList [cdkDropListData]="dataSource" (cdkDropListDropped)="dropTable($event)"> <ng-container matColumnDef="Order"> <mat-header-cell *matHeaderCellDef> Actions </mat-header-cell> <mat-cell