angular-material2

By default, when the esc button is pressed, the dialog closes. However, I don't want this intended behaviour. What I would like to happen is to prevent closing when the esc button is pressed but still allow a click on the backdrop to close the dialog. How can this be done? I've tried something like this. However, it doesn't work: openEditDialog() { const dialogRef = this.dialog.open(EditPlaceDialogComponent, { width: '90%', height: '720px' }); dialogRef.keydownEvents().subscribe(e => { if (e.keyCode === 27) { e.preventDefault(); dialogRef.disableClose = false; } }); dialogRef.afterClosed()

I am using the MatTable component from Angular Material to make a dynamic data table. I need to get the current position of a row. I can easily get the row on which the user clicked but I am unable to know its current position in the list (which depends on sort/filtering/pagination). Any idea? in your mat-cell you can get index like *ngFor as below <mat-cell *matCellDef="let element;let i = index;"> {{ i }} </mat-cell> Update from Angular 5 use also index as i <ng-container matColumnDef="rowIndex"> <th mat-header-cell *matHeaderCellDef> Index </th> <td mat-cell *matCellDef="let element;index

Working with Angular Material2 mat-selection-list , Able to identify whether current option is selected or non-selected[Boolean]. compnenent.html <mat-selection-list #shoes (selectionChange)="onSelection($event, shoes.selectedOptions)" > <mat-list-option *ngFor="let shoe of typesOfShoes" [value]='shoe'> {{shoe}} </mat-list-option> </mat-selection-list> component.ts export class ListSelectionExample { typesOfShoes = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers']; onSelection(e, v){ console.error(e.option.selected,v); } } e.option.selected notifies whether current option is selected or

I am new to angular 2 and material design. I would like to know how to style the slide-toggle button to be smaller. <div class="example-section"> <mat-slide-toggle class="line-toggle" <span class="font-size-12">Slide Me</span> </mat-slide-toggle> </div> The css is as below .example-section { display: flex; align-content: center; align-items: center; height: 18px; margin-top: -12px; } .line-toggle{ height: 10px; line-height: 8px; } I would like to decrease the size of the button and reduce the height of the slider. I've found you can use /deep/ in the css but you also have to target the

I have followed the instructions at angular material2 Getting Started to install @angular/material. Via Atom, I updated package.json, app.module, and beyond the Getting Started instructions, I updated systemjs.config, as follows: '@angular/material':'node_modules/@angular/material', I get these errors: zone.js:1274 GET http://localhost:3000/node_modules/@angular/material/ 404 (Not Found) (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/node_modules/@angular/material (…) I believe I have tracked the problem to the fact that many @angular folders have a bundle sub-folder

I am practically new in Angular2 and inherited the project with Angular 2 frontend. After switching to the new Angular 4.0 on console I see the error: "compatibility.ts:221 Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https://material.angular.io/guide/theming " The mdb.min.css is in the app/assets/css folder. The specification in package.json shows the following: "@angular/common": "^4.0.0", "@angular/compiler": "^4.0.0", "@angular/core": "^4.0.0", ... "angular-bootstrap-md": "*" How to fix the error?

I want to use mat-card directive for show my products.The angular-material docs seems to me not thorough. I found many examples on the Internet with using Table with dataSource ( example 1 , example 2 ) Now I get the productList with all products and iterate it with ngFor . I show all products on the page. How can I feed the productList to the paginator and iterate with processed data ( paginationList ). *component.html file it show all products: <mat-paginator #paginator [length]="productList.length" [pageSize]="5" [pageSizeOptions]="[5, 10, 25, 100]" [showFirstLastButtons]="true" </mat

I have created an autocomplete field with Angular Material and getting country list from web api succesfully. CountryID -> item value(or index) Country -> item text When I try to get selected item's value (not text) it return the text as expected. But I need to get selected item's value. This is my code: this.WeatherSearchForm.get('country').value; // this returns the selected country name, ex: France and <md-input-container> <input mdInput placeholder="Select Country..." [mdAutocomplete]="auto" class="form-control validate filter-input" formControlName="country"> </md-input-container> <md

i am using angular material 6 ,i have a vaidation inside mat-form-field mat-error is not displayed , when move after mat-form-field to the mat-error which is displaying properly. Not Working code: <mat-form-field> <input matInput type="time" formControlName="ToTime"/> <mat-error *ngIf="DaterForm.get('ToTime').hasError('InValidToTime')">FromTime Should be less than ToTime if choose a same date</mat-error> </mat-form-field> Working Fine: <input matInput type="time" formControlName="ToTime"/> </mat-form-field> <mat-error *ngIf="DaterForm.get('ToTime').hasError('InValidToTime')">FromTime Should be

I am using the Angular2 Material Design data table in my application and it's awesome. I was wondering if there is any way to get the index number or row number? Something like row.index ? I noticed in the CDK data table documentation that it mentions that "The directive also exports the same properties as ngFor (index, even, odd, first, last)" but does not have any examples how to get the index. Any help or guidance is greatly appreciated. Thanks! You can get the row index the same way like *ngFor , add let i = index within the <md-row> <md-row *cdkRowDef="let row; columns: displayedColumns;