angular-material2

I'm building an angular5 application for this I need angular material, which version of angular material compatible with angular 5 application and how to install it. With Angular 5, you can use angular material 5. Execute the following commands to install ver 5.2.5 of @angular/material and @angular/cdk : npm install --save @angular/material@5.2.5 npm install --save @angular/cdk@5.2.5 For the newer version of angular v.6.0 you can use : npm install --save @angular/material@6.2.1 npm install --save @angular/cdk@6.0.0 One new command is added in the latest CLI ver. (you need to update to the

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"> Option 1 </span> </div> </div> </button> </md-menu> In CSS file, I do this: .mat-menu-panel.notifications

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 using only classes) solution for it? If not what is the CSS based solution? The code below meets the

I have an array that comes from my API and I'm using Material2#AutoComplete to filter this... it's working so far, however I'm in trouble to display the another property instead of the binded value in option . I know I have to use displayWith , however it isn't working as I'm expecting. The function called as [displayWith]="displayFn.bind(this)"> just returns me the id , how can I get the full object and so return the name on function. BTW, I still want to have the id binded in my FormControl . Some code: Component: export class AutocompleteOverviewExample { stateCtrl: FormControl;

I am using Angular Material v2 md-slider in a component @Component({ selector: 'ha-light', template: `<md-slider min="0" max="1000" step="1" [(ngModel)]="myValue" (change)="onChange()"></md-slider> {{myValue}}`, styleUrls: ['./light.component.css'] }) export class LightComponent implements OnInit { myValue = 500; constructor() { } ngOnInit() { } onChange(){ console.log(this.myValue); } } and myValue updates just fine and onChange method is being called but only when I stop sliding and release the mouse button. Is there a way to have myValue update and also have the function called as I am

I have an Angular button: <button md-button class="link-btn" >Cancel</button> .link-btn { background-color: transparent; background-repeat: no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none; font-size: 0.8em; padding: 0px; } .link-btn:hover { background-color: transparent; background-repeat: no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none; font-size: 0.8em; padding: 0px; } Normally it is setting transparent background, but in hover state, gray background is shown? How to remove that? As of Angular 6, the use of /deep/ or ng-deep in the chosen

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: 'Carbon', weight: 12.0107, symbol: 'C'}, {position: 70976, name: 'Nitrogen', weight: 14.0067, symbol: 'N

I have the following select component that gets populated from a data coming from a rest api. How Can I set default selected value on md-select? <md-select placeholder= "Warehouse" style="width: 100%" [(ngModel)]='selectedProductWarehouse.warehouse' name="Warehouse" required #Warehouse="ngModel"> <md-option *ngFor="let warehouse of warehouses" [value]="warehouse">{{warehouse.description}}</md-option> </md-select> you may try below, Component HTML <md-select placeholder="Favorite food" [(ngModel)]="selectedValue" name="food"> <md-option *ngFor="let food of foods" [value]="food.value" > {{food