angular-material2

I've noticed that the directive matTooltip doesn't work on a disabled button. How can I achieve it? Example: <button mat-raised-button [disabled]="true" matTooltip="You cannot delete that"> <mat-icon>delete</mat-icon> </button> For an enabled button it works perfectly: <button mat-raised-button [disabled]="false" matTooltip="You cannot delete that"> <mat-icon>delete</mat-icon> </button> Marcin Kunert This doesn't work because it is triggered by mouseenter event which doesn't get fired by most browsers for disabled elements. A workaround is to add matTooltip to a parent element: <div matTooltip

I want to have tabs aligned at the bottom of the md-tab-group , like shown below: It is possible in Material 1 using md-tabs-align="bottom" . Is there anything available in Material 2 for this purpose? Here is my code: <md-tab-group> <md-tab label="Tab One"> Tab One Contents </md-tab> <md-tab label="Tab Two"> Tab Two Contents </md-tab> </md-tab-group> For whomever may stumble across this question. The Tabs section of the component demo site references the following in the API Reference section @Input() | Position of the tab header. headerPosition | After looking through the source I found the

I'm trying to set form control using *ngFor over objects in an Array. Depending on the users sometimes I will have 1 object in the Array but other times multiple. My issue is that I want to create a formControlName using the loop which I can but not sure how to set form group validators in the component? Just setting them like below means if there is only 1 object the form remains invalid while looking for the other formControlName that does not exist. So if the first object with name:"Days" isn't in the list, "Days" would still be in this.form and shows up in controls: Array: indicators = [

I'm using augular/material2 md-select. When I tab into the md-select component I can use the up and down arrows to select items. I can also press the space bar to see the list and use the up and down arrows and the enter key to select an item. What I can't do is press the first letter of an item and have that item selected. Using the example on https://material.angular.io/components/component/select I'd expect to be able to tab into the md-select component and press P to select Pizza. Is this not supported? Is there a work around? Thanks In material doc, only following keyboard interactions

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; } Another option is to set the View Encapsulation to None on your component: @Component({ templateUrl: './my.component.html' , styleUrls: ['./my.component.scss'], //or .css, depending what you use encapsulation: ViewEncapsulation.None, }) Then in your component css you can do exactly

By default the select-dropwon of angular-material will allow the page to scroll and reposition itself accordingly. On the original page of the material-documentation the select-dropdown shows a differetn behaviour: it blocks scrolling when openend: https://material.angular.io/components/select/overview How can I achieve this behaviour? I did not find any options or switch to disable scrolling when the select is clicked EDIT: I did find that there is a thing called "mat-select-scroll-strategy", but it is not documented anywhere. Can anybody give me a hint how to use this? Since the mat-select

This usually isnt a problem but just Material 2 is very under-documented atm so im having trouble making all images the same size but properly resize with window change All the images I have were pretty similar in size when I created then but one was abit longer height wise, but my old code just adjusted that with some bootstrap calls. But using the image in a mat-card it is a longer length and thus looks out of place shown here: The BAC calculator's image is longer than the rest so it looks out of place and pushes others out of proportion under it or forces an empty cell, here is my call for