angular-material

问题 I am using dialog box of angular material2. I want to pass data to the opened component. Here is how I am opening dialog box on click of a button let dialogRef = this.dialog.open(DialogComponent, { disableClose: true, data :{'name':'Sunil'} }); On the documentation page there is data property, But I checked MdDialogConfig in my installed packages /** * Configuration for opening a modal dialog with the MdDialog service. */ export declare class MdDialogConfig { viewContainerRef?:

问题 I'm trying to get Material Design for Angular2 (https://github.com/angular/material2) to work with my project. After running: npm install --save @angular/material npm start I get this error: npm ERR! Darwin 16.0.0 npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start" npm ERR! node v6.9.1 npm ERR! npm v3.10.8 npm ERR! code ELIFECYCLE npm ERR! angular-quickstart@1.0.0 start: `tsc && concurrently "tsc -w" "lite-server" ` npm ERR! Exit status 2 Here is my npm-debug.log: http://pastebin

问题 I am creating Angular 5 project and I wanted to create custom sort icon in sort header to achieve this effect https://fontawesome.com/icons/caret-up?style=solid. I don't want to have this default arrow. I tried to change css style, but it seems not to work. Or maybe is there any way to replace this icon by custom using JS? ::ng-deep { .cdk-visually-hidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .mat-sort

问题 Basically I would like to have a ul element inside of my Tooltip. I'm using Angular 5, and the compatible Material for Angular 5. 回答1: The comment by Pavel Agarkov is in the right direction. To make things easy, create a custom pipe to automate converting your text into bulleted list items. The pipe is responsible for adding the bullets and the line feeds which will be formatted by the CSS class: import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'tooltipList' }) export class

问题 In my material table I use @pipe to get name instead of position in position row... I get a name from another JSON file... <ng-container matColumnDef="position"> <mat-header-cell *matHeaderCellDef> No. </mat-header-cell> <mat-cell *matCellDef="let element"> {{element.position | FilterData }} </mat-cell> @Pipe({ name: 'FilterData' }) export class OrdinalPipe implements PipeTransform { transform(value: Element): string { var data = ElementTitle.filter( ElementTitle => ElementTitle.position ===

问题 In my material table I use @pipe to get name instead of position in position row... I get a name from another JSON file... <ng-container matColumnDef="position"> <mat-header-cell *matHeaderCellDef> No. </mat-header-cell> <mat-cell *matCellDef="let element"> {{element.position | FilterData }} </mat-cell> @Pipe({ name: 'FilterData' }) export class OrdinalPipe implements PipeTransform { transform(value: Element): string { var data = ElementTitle.filter( ElementTitle => ElementTitle.position ===

问题 How to change MatChip selected property? I wan't on click to select/deselect chip (also it have to change chip color.) What I tried: html : <mat-chip-list> <mat-chip *ngFor="let label of item.labels" #lbl (click)="selectChip(lbl)"> {{label}} </mat-chip> </mat-chip-list> ts : selectChip(item: MatChip) { item.selected ? item.deselect() : item.select(); } On click it throws ERROR TypeError: item.select is not a function How to solve it? 回答1: There isn't a select() or deselect() method, there is

问题 I was reading about mat-steps and wondering if it's possible to show all mat steps on the window.By default you have to click on the icon and then the corresponding steps appear.I want that all the steps are visible.Is it possible?Thanks in advance for the help. 回答1: For vertical stepper, just add the following in your css file: ::ng-deep .mat-vertical-stepper-content { visibility: visible !important; height: 100% !important; } 回答2: By default you have to click on the icon and then the

问题 I just upgraded from ng2 rc4 with material2 alpha6 to ng2 rc5 with material 2 alpha7-2 . A new error pops up on code that worked before when I use <md-icon> . I cannot see the full error text because instead I get Observable_1.Observable.throw is not a function error (the app crashes), with the top lines in the stacktrace being: MdIconRegistry.prototype.getNamedSvgIcon @angular2-material/icon/icon-registry.js:180:16 MdIcon.prototype.ngOnChanges @angular2-material/icon/icon.js:107:17 If I

问题 I have implemented a simple angular material table using flexbox css. In the desktop my table view is as shown below. In md screen size the view is In xs screen size its view is When i see the table in XS screen view ,the spacing between the table columns is not properly adjusted.. Is there a way out where i can add a horizontal scroll to space the table columns properly by specifying a min width to my table and adding a horizontal scroll when in XS and SM screen sizes. Below shown is my