angular-material2

I am trying to implement a datepicker component with a dynamic name. I am developing in an Angular Material 2 based project with Angular 4, and this is my implementation: <input mdInput [mdDatepicker]="'start' + column.name + 'Picker'" placeholder="Start {{column.label}}" formControlName="start{{column.name}}"> <button mdSuffix [mdDatepickerToggle]="'start' + column.name + 'Picker'"></button> <md-datepicker #start{{column.name}}Picker></md-datepicker> where column.name changes dynamically in my html page. In runtime I am getting this error: ERROR TypeError: this._datepicker._registerInput is

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. 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, creating your own tiles isn't that much work when using flexbox. Here's a snippet using multi columns, [users

So I have a user-list component and a user-detail component. The user-list component has an md-table listing all users registered. The user is able to click on a button to see the details of the corresponding entity. After editing the Name property and saving (for example), the user-detail redirects to the user-list component. But the md-table displays the old information. How can I trigger an md-table refresh after editing the entity in another component like this scenario? Here is my user-list component: export class UserListComponent implements OnInit { tableDisplayedColumns: string[] = [

When tab inside tab then if selected index of sub tab is 1 then it should show as selected. Let parent tab has two tabs, it has selectedIndex is 0, and sub tab inside parent tab1 has selectedIndex = 1 then content inside it showing but is not showing as selected. Tab content is showing but tab is not selected Here is the working example There is currently an open issue for this. As a workaround you can use 2 way binding on your parent tab selectedIndex and then only show the subtab group when the parent tab is selected: <mat-tab-group [(selectedIndex)]="index"> <mat-tab label="Tab 1">Parent

I have an angular material 2 date-picker implemented in a bootstrap modal form: <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">{{title}}</h4> </div> <div class="modal-body"> <div class="timeline-cal"> <input class="date-field" [mdDatepicker]="picker" placeholder="Choose a date"> <md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle> <md-datepicker #picker></md-datepicker> </div> <div class="modal-footer"> <button type="button" class="btn grey-btn pull-right" (click)="cancel()">Cancel</button> </div> </div> </div

I set up a linear stepper using the Angular Material 2 Stepper. I have forms in different components (component-a, component-b, component-c). In my main container component (container-component) I want to have linear stepper that 'steps' through each component when their form is valid. Is there some sort of functionality to talk up to the stepControl in the stepper to make it properly work? I have attached documentation for the stepper and a StackBlitz version of the application. Also, a link to the repo I have working as well. Material Stepper Component: https://material.angular.io/components

I saw earlier that Angular2 launched the RC5 so I decided to update one of my test apps to see the changes and how to adjust. This app is using Material2, I also updated it to Alpha 7.2, but I'm getting this error when trying to use the md-button component "Template parse errors: Can't bind to 'md-ripple-trigger' since it isn't a known property of 'div'. ("*ngIf="isRippleEnabled()" class="md-button-ripple" [class.md-button-ripple-round]="isRoundButton()" [ERROR ->][md-ripple-trigger]="getHostElement()" [md-ripple-color]="isRoundButton() ? 'rgba(255, 255, 255, 0.2)"): MdButton@0:180 Can't bind