angular-material2

问题 I try to changes CSS styles in style.css of components file like this: .mat-tab-label { border-radius: 3px; background-color: #eeeeee; } But it does not repalce Angular Material styles. Any custom style can not overwrite Angular Material styles. 回答1: You can achieve that by adding /deep/ before the css class: /deep/ .mat-tab-label { border-radius: 3px; background-color: #eeeeee; } OR >>> .mat-tab-label { border-radius: 3px; background-color: #eeeeee; } UPDATE: /deep/ and >>> will be

问题 The Portal module in Angular Material (CDK) is a very powerful way to render dynamic content into a 'PortalOutlet'. A Portal<T> can be a TemplateRef where T is the type of the context data. <ng-template cdkPortal let-data> <p>Portal contents {{ data | json }}</p> </ng-template> You get a reference to it with @ViewChild @ViewChild(CdkPortal) myPortalRef: CdkPortal; You can display a portal in a cdkPortalOutlet Content gets inserted here: <ng-template [cdkPortalOutlet]="myPortalRef"></ng

问题 I'm following the material table example from Angular Material and currently, they have a filtering the table example with typed in results. I added two dropdowns to the material table example and I want to be able to select a value from both dropdowns and perform a search based on both values from the two dropdowns. E.g. in this case, if I select 8 and Hydrogen, I should not get any results because 8 and hydrogen are not part of the same record/item. If I select however 1 and hydrogen, I

问题 I'm trying to change my layout dynamically according to users' language selection and switch from LTR to RTL on the fly. I'm using Angular 2 rc6, material 2.0.0-alpha.9-3 It looks like when the page is loaded, it works perfectly with either rtl or ltr. However, when it's changed dynamically from within the app (see plunker), the direction changes but the generated element md-sidenav-content has a miscalculated margin-right and margin-left. Digging further, I managed to see that the _dir

问题 Is there an virtual scroll implementation that works with the grid-list? I think the default implementation won't work because each row should have an element around it. I'm using the grid-list to display profile pictures, and need an infinite scroll or preferably virtual scroll to load new ones. 回答1: So since cdk virtualscroll doesn't support multi column, I ended up using ngx-virtual-scroller, which does support multi-columns. The mat-grid-list I also had to let go because of this, but,

问题 I am trying to use pagination of angular-material2 . The problem I am facing is to set the values of md-paginator dynamically through a service. I have managed to create the pagination using static values but I dont know how to set them dynamically. Plunker TS import {Component,ChangeDetectorRef, Input,ViewChild } from '@angular/core'; import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from '@angular/http'; import {MdPaginator,PageEvent} from '@angular/material'; import

问题 I want to check when my <md-sidenav> is getting closed. Is there a way to use the EventEmitter onClose of my sidenav object to check that? and can you give me an example? 回答1: This is possible in 2 different ways - via the template, and within the component code itself. Assuming an HTML template such as the following: <md-sidenav-container> <md-sidenav #mySidenav (close)="onClose()" mode="side"> This is sidenav content </md-sidenav> <button md-raised-button (click)="mySidenav.toggle()">Toggle

问题 I'm working with Angular Material's matAutocomplete component, and according to the docs, there is a method which can open/close an autocomplete panel with a openPanel()/closePanel() method. Any suggestion to how can I integrate it into already working example? Here is a what I did with live example while trying to implement the feature. 回答1: in template <button (click)='openPanel($event)'>Open</button> <input #inputAutoComplit> in ts @ViewChild(MatAutocompleteTrigger, {read:

问题 Angular's GitHub page shows two pinned repositories relating to Material Design: angular/material2 angular/material The README.md for angular/material is titled Material Design for AngularJS Apps . The README.md for angular/material2 is titled Material Design for Angular . I'm building an Angular2 web application using the angular-cli and have both installed and imported @angular/material into app.module.ts . import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from

问题 I am looking for support within Angular Material2 for nested menus within a sidebar. The top level would typically be closed by default, and opening a top level would expose nested menu items. I thought this made sense as a starting point, but the child nav items render (poorly) outside of the parent items: plnkr <md-sidenav-container class="my-container"> <md-sidenav #sidenav class="my-sidenav"> <md-list> <md-list-item> <h3 md-line> First Parent </h3> <md-nav-list> <a md-list-item href="#"