angular-material2

问题 I have an AuthGuard in which I want to use a login material2 dialog with it. So before canActivate returns, the login dialog is shown and if the login is successful then the dialog returns true so then canActivate returns true as well. If the login is not successful, then the dialog does not return anything and tries again. I have already implemented the dialog in a component and its working fine, I'm looking for help on how to integrate it with the canActivate guard. @Injectable() export

问题 I'm having a problem using a mat-sidenav with position="end" inside a mat-sidenav-container that is part of a custom component. The custom component is essentially the mat-sidenav-container, the left side mat-sidenav, plus ng-content slots for the left sidenav content, page content, and an optional right mat-sidenav. Sample: https://stackblitz.com/edit/angular-fxp7dt The problem is that the right sidenav backdrop does not display. A DOM inspection shows that the right mat-sidenav is added

问题 I want the stepper labels to be shown in a toolbar, but the content to be shown in another div. something like: <div> <mat-horizontal-stepper md-stretch-steppers="always"> <mat-step> <ng-template matStepLabel>Head 1</ng-template> </mat-step> <mat-step> <ng-template matStepLabel>Head 1</ng-template> </mat-step> </mat-horizontal-stepper> </div> <div> <any-components></any-components> </div> <div id="contents"> [contents goes here] </div> can i separate the stepper labels from the content? 来源：

问题 I want the stepper labels to be shown in a toolbar, but the content to be shown in another div. something like: <div> <mat-horizontal-stepper md-stretch-steppers="always"> <mat-step> <ng-template matStepLabel>Head 1</ng-template> </mat-step> <mat-step> <ng-template matStepLabel>Head 1</ng-template> </mat-step> </mat-horizontal-stepper> </div> <div> <any-components></any-components> </div> <div id="contents"> [contents goes here] </div> can i separate the stepper labels from the content? 来源：

问题 How to add i18n in ngx-mat-select-search palceholderLabel <div class="form-group col-md-6 mb-lg-5 mb-4"> <mat-form-field class="example-full-width w-100"> <mat-select (selectionChange)='vehicle_maker_updated($event)' formControlName="vehicleMakerValue" placeholder="Motor Make" i18n-placeholder> <mat-option> <ngx-mat-select-search formControlName="vehicleMakerFilterInputValue" placeholder="Select Motor Maker" [noEntriesFoundLabel]="'No matching vehicle makers found'" (ngModelChange)='filter

问题 I am trying to set selectedIndex Property of md-tab-group in material for angular 2 so that I can get animated ink bar below first tab. It worked when tabs were statically defined <md-tab-group> <md-tab label="Tab 1">Content 1</md-tab> <md-tab label="Tab 2">Content 2</md-tab> </md-tab-group> But when I am generating md-tabs dynamically using *ngFor, its not working. <md-tab-group selectedIndex= 0 class="inner-tab"> <md-tab *ngFor="let rule of ruleList"> <ng-template md-tab-label>{

问题 I have a mat-tab group with different tabs. I want to detect click on the active tab header. Eg. I have 2 tabs- a company tab and a users tab and inside each tab there are 2 views - a list view view and a detailed view. Initially I want to load the list and on clicking on an item, want to go to the corresponding item's detailed view. But If I click on the tab header again I want to goto the list view again. There are events like ( selectedTabChange ) which detects if tab is changed but since

问题 I'm using Angular material datatable with array as datasource. I would update my table every data change using renderRows() method as mentionned in the doc. I have my ts file import { Component, OnInit } from '@angular/core'; import { MatTableDataSource } from '@angular/material'; import { AjouttextService } from '../ajouttext.service'; import { DataSource } from "@angular/cdk/collections"; import { Observable } from "rxjs/Observable"; import { nomchamp } from '../model'; @Component({

问题 I need to have the datepicker in Angular always visible. The calendar will be always visible without the dependency on the button (don't need to click on the button) example Source .html <mat-form-field> <input matInput [matDatepicker]="picker" placeholder="Choose a date"> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> </mat-form-field> 回答1: You can use mat-calendar for this: <mat-calendar [selected]="selectedDate"

问题 Using Angular 2 (4) + Material, I need to customize a component's theme. I first try with the built in palettes but keep getting "error: undefined". It works only if map-get is passed "primary", "accent" or "warn" as second parameter: styles.scss @import '~@angular/material/theming'; @include mat-core(); @import 'app/app.component.scss-theme'; $default-theme-primary: mat-palette($mat-light-green); $default-theme-accent: mat-palette($mat-indigo); $default-theme-warn: mat-palette($mat-red);