angular-material

问题 I'm trying to integrate Angular material's virtual scrolling with drag and drop, but for some reason when i'm trying to implement this it reverts the items and when i'm trying to drag and drop an element it doesn't work. Here is a summary of the code <cdk-virtual-scroll-viewport cdkDropList itemSize="50" class="example-viewport"> <div cdkDrag *cdkVirtualFor="let item of items" class="example-item">{{item}}</div> </cdk-virtual-scroll-viewport> As you can see, I didn't do anything special,

问题 In mat-vertical-stepper I have 4 mat-step . How can I have tick-mark once 1st step is completed? I tried: <mat-vertical-stepper style="background:#f2ecec;" #stepper [linear]="true"> <mat-step label="General Details" [stepControl]="generalDetailsForm" completed="true" editable="true"> <h3> Name </h3> </mat-step> </mat-vertical-stepper> If I make editable="false" , it is giving a tick mark and can't be editable as I made it "false" . Having only completed="true" I am not getting any tick mark

问题 In mat-vertical-stepper I have 4 mat-step . How can I have tick-mark once 1st step is completed? I tried: <mat-vertical-stepper style="background:#f2ecec;" #stepper [linear]="true"> <mat-step label="General Details" [stepControl]="generalDetailsForm" completed="true" editable="true"> <h3> Name </h3> </mat-step> </mat-vertical-stepper> If I make editable="false" , it is giving a tick mark and can't be editable as I made it "false" . Having only completed="true" I am not getting any tick mark

问题 How to make make single checkbox select from mat-selection-list. Similar to radio button which accepts one value from group of values. 回答1: Components >= 9.1.0 Selection list now supports a single selection mode directly. Enable it with the multiple input set to false. <mat-selection-list [multiple]="false">... Components < 9.1.0 You have to set SelectionModel for selectedOptions property of component reference on init. @ViewChild(MatSelectionList, {static: true}) private selectionList:

问题 I'm using angular material table for displaying data and dyanmically binding the table header and table data. Is there any way to format particaular column's cell content dynamically?. For example how can i format the value of amount column right aligned? My code is as below : <table mat-table [dataSource]="dataSource" class="" style="width: 100%;"> <ng-container [matColumnDef]="col" *ngFor="let col of displayedColumns; let i = index"> <th *matHeaderCellDef> {{displayedFields[i].name}}</th>

问题 I have a problem on the responsiveness of using modals in Angular Material. How can i make it look good on small screens. It doesn't have to be mat-grid Pls see this stackblitz link Click Here openDialog() { const dialogRef = this.dialog.open(ModalComponent, { width: "650px", height: "380px" }); } 回答1: DemoYou can use media query in style.css @media only screen and (max-width: 700px) { .modal .mat-grid-tile { width:100% !important; position:relative!important; left:0 !important; } .modal .mat

问题 I have a problem on the responsiveness of using modals in Angular Material. How can i make it look good on small screens. It doesn't have to be mat-grid Pls see this stackblitz link Click Here openDialog() { const dialogRef = this.dialog.open(ModalComponent, { width: "650px", height: "380px" }); } 回答1: DemoYou can use media query in style.css @media only screen and (max-width: 700px) { .modal .mat-grid-tile { width:100% !important; position:relative!important; left:0 !important; } .modal .mat

问题 hi I stuck problem about programming drag and drop with resizing dynamically add cdkDrag div by click add button It works have only one div, but if I add more than 2 divs , When try to resize height of older div.other divs move followed by older div resizing. It's quite strange. Is it bug? I tried all other stuff but failed.please check follow site and advice me. https://stackblitz.com/edit/angular-ivy-vkxx3r Thanks 回答1: finally I solved. just change object postion relative to absolute. what

问题 I have a formarray with certain fields one of which is input. In this field, on user input, we search in the API's and return some data. The problem is, it is working only for first dynamic control. When I add more controls, it is not working for them. I guess this is happening because I have written search logic in ngAfterViewInit() . But what's the alternative then. I can't get how to solve this problem. Thank you In advance .ts purchaseform = this.fb.group({ vendor_mobile : ['',

问题 I wasted a lot of time on this mistake, I'm starting new angular5 project and I want to use angular material. I imported and exported the material modules in a material.module.ts file: import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { CommonModule } from '@angular/common'; import { MatIconModule,MatButtonModule,MatSidenavModule,MatToolbarModule } from '@angular/material'; @NgModule({ imports: [ BrowserModule, CommonModule,