angular-material2

问题 I have a question regards Angular Material (with Angular 4+). Say in my component template I add a <mat-horizontal-stepper> component, and within each step <mat-step> I have stepper buttons to navigate the component. Like so... <mat-horizontal-stepper> <mat-step> Step 1 <button mat-button matStepperPrevious type="button">Back</button> <button mat-button matStepperNext type="button">Next</button> </mat-step> <mat-step> Step 2 <button mat-button matStepperPrevious type="button">Back</button>

问题 I have: <md-tab-group color="primary"> <md-tab label="Проэкты"> <h1>Some tab content</h1> </md-tab> <md-tab label="Обучалка"> <h1>Some more tab content</h1> <p>...</p> </md-tab> </md-tab-group> I need to catch an event when a specific tab is clicked and call this function inside my component: onLinkClick() { this.router.navigate(['contacts']); } 回答1: You could use the (selectedTabChange) event . Check Material2#tabs. Template: <mat-tab-group color="primary" (selectedTabChange)="onLinkClick(

问题 I'm using mat-table. It has a filter which works fine with doc example: From https://material.angular.io/components/table/overview, the original code is: <div class="example-header"> <mat-form-field> <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter"> </mat-form-field> </div> <mat-table #table [dataSource]="dataSource"> <!-- the rest of the code --> </mat-table> export class TableFilteringExample { displayedColumns = ['position', 'name', 'weight', 'symbol'];

问题 md-icon s loaded using addSvgIconSetInNamespace appear in the DOM but are not visible. My svg: <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <symbol id="thumb" width="100%" height="100%" viewBox="0 0 24 24"> <path d="M0 0h24v24H0z" fill="none"></path> <path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"></path>

问题 I'm new to angular material 2, and trying to validate the Date of Birth(DOB) form field like following example in Official Angular Website So in input-errors-example.html I added form field like following <md-form-field class="example-full-width"> <input mdInput [mdDatepicker]="picker" placeholder="Choose a date" [formControl]="dobFormControl" onkeypress='return (event.charCode >= 48 && event.charCode <= 57) || event.charCode == 47' maxlength="10"> <md-datepicker-toggle mdSuffix [for]="picker

问题 So I have a md-input and some button. <md-input-container > <input mdInput #myInput name="myInput" type="password" placeholder="Yeah"> </md-input-container> <button md-raised-button (click)="authenticate(myInput)">Start</button> This button sends the whole md-input . I fill in my input and that's what I'm getting when I click the button <input _ngcontent-uqn-44="" mdinput="" name="myInput" placeholder="Yeah" type="password" ng-reflect-placeholder="Yeah" ng-reflect-type="password" class="mat

问题 i have an array of objects person,and each one contain an array field of objects notes [{ "id": 0 ,name : "aa" ,notes:[ {"id":0 , "xx" : 14} ,{ "id" : 1 , "xx" : 12} ,{"id" : 1 , "zz" : 9 } ]} , {"id": 2 ,name : "bb" , notes:[{ "id":0 , "xx" :"7"}, { "id" : 1 , "xx" : 17 }]} , {"id": 3 , name : "cc" , notes:[ "id":0 ,"name" : "xx" : 18 ]} ] i want to retrive the array of persons in the first mat-select and bind the select element to objects then change the second mat-select list values with

问题 i have an array of objects person,and each one contain an array field of objects notes [{ "id": 0 ,name : "aa" ,notes:[ {"id":0 , "xx" : 14} ,{ "id" : 1 , "xx" : 12} ,{"id" : 1 , "zz" : 9 } ]} , {"id": 2 ,name : "bb" , notes:[{ "id":0 , "xx" :"7"}, { "id" : 1 , "xx" : 17 }]} , {"id": 3 , name : "cc" , notes:[ "id":0 ,"name" : "xx" : 18 ]} ] i want to retrive the array of persons in the first mat-select and bind the select element to objects then change the second mat-select list values with

问题 I have a button in angular 4 material table cell that I'd like to appear only when hover on table row: <md-cell *cdkCellDef="let row" contenteditable='false' > <div *ngIf="!row.editorEnabled" >{{row.goalStatusName}} <button md-icon-button><md-icon (click)="row.editorEnabled=true;" mdTooltip="Edit">mode_edit</md-icon></button> </div> </md-cell> How do I achieve this? Update: Entire code: <md-cell *cdkCellDef="let row" contenteditable='false' > <div *ngIf="!row.editorEnabled" >{{row

问题 I am using matHorizontalStepper from Angular Material 5.2.4 with Angular 4/5. Linear mode is on. On step 1 I have a form with two inputs which are required. But stepper checks if only one required input is filled. It's enough for stepper that user filled only one required field and let the user go for the step 2. Here's what I'm talking about https://angular-ugvs4m.stackblitz.io What can I set stepper to validate if all required inputs are filled ? 回答1: I forked your stackblitz app and fixed