angular-material2

问题 I built an md-menu with an md-tab-group inside, using Angular Material 2. On each md-tab I display a different list. The behavior I'm expecting to see is that the user to be able to switch between tabs and the md-menu to stay opened. The thing is that the md-menu closing on every click on one of the tabs. <img src="/assets/images/ic-notifications.png" [mdMenuTriggerFor]="appMenu"/> <md-menu #appMenu="mdMenu" [overlapTrigger]="false" yPosition="below" xPosition="before" class="notifications

问题 This question already has answers here : How to change mat-icon size in Material (8 answers) Closed 12 days ago . How do I change the size of an SVG icon on Angular 2+ Material Design using vanilla CSS, HTML, or JS ? If I specify the icon inside the HTML element, styling works fine: <mat-icon style="font-size: 16px !important">home</mat-icon> However, when I use the svgIcon attribute (for instance, if using a third-party icon library), the icon cannot be resized: <mat-icon style="font-size:

问题 I'm attempting to implement a mat-selection-list to have a list of characters--but at the top, you can search/filter characters. This is working except when you select a character, search for another character, then stop searching--your original selection is visible in the UI, but the model is cleared until you make another selection. Example of what I mean: https://stackblitz.com/edit/angular-yo2o9o I can come up with a way to fix this--by manually pushing/removing from an array; but this

问题 I have seen various examples to expand all nodes in mat-tree using expandAll() Is there any mechanism to expand a particular node if we click on it. Something like node.expand() I had referred angular material documentation but not got any answer. Please guide if anyone gone through it. 回答1: What you are looking for is the expand method on treeControl , which operates on the treeControl.dataNodes array. Something like this.treeControl.expand(this.treeControl.dataNodes[/** node you want to

问题 I have seen various examples to expand all nodes in mat-tree using expandAll() Is there any mechanism to expand a particular node if we click on it. Something like node.expand() I had referred angular material documentation but not got any answer. Please guide if anyone gone through it. 回答1: What you are looking for is the expand method on treeControl , which operates on the treeControl.dataNodes array. Something like this.treeControl.expand(this.treeControl.dataNodes[/** node you want to

问题 I'm trying to achieve a reorder-able group of list which contain elements that can be moved between lists, using @angular/cdk/drag-drop, although I'm running into a few problems. I've managed to separately create individual examples which achieve the individual drag and drop, although when brought together it seems I cannot achieve both pieces of functionality in parallel. Moving items between groups : https://stackblitz.com/edit/items-move Reordering groups : https://stackblitz.com/edit

问题 There is the standard input as: <input type="number" placeholder="Hours"> Is there something in Angular Material Design? I use Angular latest version I tried this, but it is just simple input: <md-input-container> <input mdInput type="number" placeholder="Favorite food" value="Sushi"> </md-input-container> It should be < md-input-container input="number"> ? ot input type="number"> ? 回答1: In short, yes. You want < md-input-container > wrapper which supports the following input types date

问题 I added the example retrieved from https://material.angular.io/components/tree/overview (The example can be seen[https://stackblitz.com/angular/arbvompqpmg?file=main.ts]) the documentation but it throw this error: Can't bind to 'dataSource' since it isn't a known property of 'mat-tree'. 1. If 'mat-tree' is an Angular component and it has 'dataSource' input, then verify that it is part of this module. 2. If 'mat-tree' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule

问题 Given the example at https://material.angular.io/components/form-field/overview <div class="example-container"> <mat-form-field> <input matInput placeholder="Enter your email" [formControl]="email" required> <mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error> </mat-form-field> </div> import {Component} from '@angular/core'; import {FormControl, Validators} from '@angular/forms'; /** @title Form field with error messages */ @Component({ selector: 'form-field-error-example',

问题 How on earth do I add a position strategy ( ConnectedPositionStrategy ) to an overlay? (I'm using Angular Material.) I've tried specifying it via the positionStrategy property and passed it in to overlay.create() . import { Overlay, ConnectedPositionStrategy } from '@angular/cdk/overlay'; // ... export class MyComponent { constructor(private overlay: Overlay){} showOverlay() { let overlay = this.overlay.create({positionStrategy: ConnectedPositionStrategy}); // ... } } But I get this error: