angular-material2

Overriding Material2 Style with Custom CSS

由 元气小坏坏 提交于 2019-12-09 21:44:49
问题 I have Datepicker element in Angular. It is standard component from Material Design. When I try to set own styles to this element, it does not work with property !important . How to fix it, and how to change the default component's styles? Example of code: .mat-datepicker-toggle { margin-right: 10px !important; } 回答1: Another option is to set the View Encapsulation to None on your component: @Component({ templateUrl: './my.component.html' , styleUrls: ['./my.component.scss'], //or .css,

Change default expansion panel arrow colour for angular material

由 折月煮酒 提交于 2019-12-09 18:20:32
问题 I have an angular expansion panel as shown below. How can i change the color of the arrow below to white? My code (HTML): <md-expansion-panel> <md-expansion-panel-header> <md-panel-title> Personal data </md-panel-title> <md-panel-description> Type your name and age </md-panel-description> </md-expansion-panel-header> <md-form-field> <input mdInput placeholder="First name"> </md-form-field> <md-form-field> <input mdInput placeholder="Age"> </md-form-field> </md-expansion-panel> My code (TS):

Angular Material 2 : How to put a fab button on top of the md-table at the bottom right corner?

由 安稳与你 提交于 2019-12-09 16:17:51
问题 I have a md-table showing some records and a paginator below. I want to show a fab button on the table (the table of content would run under it). What I tried? I tried <a md-mini-fab routerLink="." style=""><md-icon>check</md-icon></a> inside the <md-table #table [dataSource]="dataSource" mdSort> </md-table> tags , but looks like everything under md-table is scrapped out and the table rows are then rendered by the material2 Table component . Is there a clean(without using a lot of CSS, while

md-menu override default max-width in Angular 2

由 泪湿孤枕 提交于 2019-12-09 16:06:44
问题 I'm using Angular 2 , Angular Material and I am willing to display more data in a md-menu and, therefore, I need to set the max-width of the md-menu to a higher value. Its default value is of 280px. <img src="/assets/images/ic-notifications.png" [mdMenuTriggerFor]="appMenu"/> <md-menu #appMenu="mdMenu" [overlapTrigger]="false" yPosition="below" xPosition="before" class="notifications-dropdown"> <button md-menu-item > <div class="row notification-row"> <div> <span class="image-container">

Filtering specific column in Angular Material Table with filtering in angular?

由 只愿长相守 提交于 2019-12-09 14:40:45
问题 I am using mat-table. It has a filter which works fine. Filter happened against this below data (All columns) const ELEMENT_DATA: Element[] = [ {position: 14598, name: 'Hydrogen', weight: 1.0079, symbol: 'H'}, {position: 24220, name: 'Helium', weight: 4.0026, symbol: 'He'}, {position: 39635, name: 'Lithium', weight: 6.941, symbol: 'Li'}, {position: 42027, name: 'Beryllium', weight: 9.0122, symbol: 'Be'}, {position: 53216, name: 'Boron', weight: 10.811, symbol: 'B'}, {position: 60987, name:

Angular 2 Material input focus not working

由 对着背影说爱祢 提交于 2019-12-09 02:54:50
问题 The inputs are inside of a modal dialog. I have no idea why it is not working. I looked at the official docs and it listed focus as something you can pass to the element but it's not working? Does anyone know why? Angular Material - Input Docs <form class="example-form"> <md-input-container class="example-full-width" style="width: 300px; padding: 5px; border-radius: 10px;"> <input mdInput type="email" name="to" placeholder="Email"> <md-error></md-error> </md-input-container> <md-input

How can i make icon and placeholder in same line using material?

由 喜夏-厌秋 提交于 2019-12-09 02:15:35
I want to make icon and search field should be in same line . <div class="example-header"> <mat-form-field> <mat-icon>search</mat-icon> <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter"> </mat-form-field> </div> Above i added my html code .. demo i wrote lot of css but i could't get this help me out to move forward.. Not sure why other answers are so complicated. Just use matPrefix or matSuffix with mat-button (tested for Angular-material v7). Straight from docs: <mat-form-field> <input matInput type="text" placeholder="Search"> <button mat-button matPrefix mat

MatDialog Error: No provider for InjectionToken mat-dialog-scroll-strategy

由 孤人 提交于 2019-12-08 19:21:14
问题 at including Provider: MatDialog in the Constructur constructor(groupService: GroupService, public dialog: MatDialog) I get following error at runtime Error: No provider for InjectionToken mat-dialog-scroll-strategy! I have included the Matdialog in the "app.module.ts" Do i need a different Provider for it and which one? I use angular-material 2.0.0b12 thanks 回答1: You need to include MatDialog Module in the imports. import {MatDialogModule} from '@angular/material'; @NgModule({ imports :

Uncheck active Angular Material toggle buttons on click

由 只愿长相守 提交于 2019-12-08 17:43:27
问题 I need to modify the functionality of the standard Angular Material toggle button component, so that clicking an active button returns the component to a state where no buttons are active. This has two steps: Updating the value of the toggle group Changing the 'checked' parameter of the clicked button to false I've tried several approaches, e.g. Template: <mat-button-toggle-group #group="matButtonToggleGroup"> <mat-button-toggle #no_btn value="no" (click)="update_toggle(group,no_btn)">No</mat

selection list become empty when datasource is updated - datatable materil2

由 我与影子孤独终老i 提交于 2019-12-08 11:35:08
问题 Selection list becomes empty when datasource is updated. steps: 1. select some users steps: 2. select second tab steps: 3. come back to the first tab selected users are available in chips but not selected in datatable. look at https://stackblitz.com/edit/angular-v3kjgj?embed=1&file=app/selectusers.component.ts 回答1: You are saving selection status by the "row" object itself, which are all changed by your loadUsers() call when you change select the first tab. Either don't call loadUsers() every
订阅 angular-material2