angular-material2

How to implement drag and drop in cypress test?

≡放荡痞女 提交于 2020-01-02 00:59:29
问题 I am struggling to test drag and drop with Cypress and Angular Material Drag and Drop. So the goal is to move "Get to work" from Todo to Done. I have created the following test, that should make it easy for you to reproduce: You can play with the Stackblitz here. describe('Trying to implement drag-n-drop', () => { before(() => { Cypress.config('baseUrl', null); cy.viewport(1000, 600); cy.visit('https://angular-oxkc7l-zirwfs.stackblitz.io') .url().should('contain', 'angular') .get('h2').should

Angular 4 - material 2 - md datepicker set first day of the week

本小妞迷上赌 提交于 2020-01-02 00:51:06
问题 How to set first day of the week using material 2? Currently the default is sunday even if I set the locale to hu or anything else.. 回答1: Found a workaround: Write this class import {NativeDateAdapter} from '@angular/material'; import {Injectable} from '@angular/core'; @Injectable() export class MyDateAdapter extends NativeDateAdapter { getFirstDayOfWeek(): number { return 1; } } Then import to the app.module like: {provide: DateAdapter, useClass: MyDateAdapter}, 回答2: Pretty much the sam

Angular Material MatTableDataSource cannot be found

≡放荡痞女 提交于 2020-01-01 17:09:49
问题 I'm trying to create a table using Angular Material Table, in the examples there is always the import: import {MatTableDataSource} from '@angular/material'; I'm trying to do the same but I'm getting an error: "Module ' ../node_modules/@angular/material/material ' has no exported member MatTableDataSource . Is there anything I'm missing? Here's the package.json versions: "dependencies": { "@angular/animations": "^4.4.6", "@angular/cdk": "^2.0.0-beta.12", "@angular/common": "^4.2.4", "@angular

How can we select mat option when press on tab key?, it should work like enter button in mat-autocomplete angular 6

廉价感情. 提交于 2020-01-01 17:07:11
问题 How can we select mat option when press on tab key?, it should work like enter button in mat-autocomplete angular 6... In below URL its working when press enter, but whenever we press tab button it should select highlighted option. <mat-form-field class="example-full-width"> <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto"> <mat-autocomplete #auto="matAutocomplete"> <mat-option *ngFor="let option of options" [value]=

Get Angular Material v2 slider's value while sliding

旧巷老猫 提交于 2020-01-01 08:18:27
问题 I am using Angular Material v2 md-slider in a component @Component({ selector: 'ha-light', template: `<md-slider min="0" max="1000" step="1" [(ngModel)]="myValue" (change)="onChange()"></md-slider> {{myValue}}`, styleUrls: ['./light.component.css'] }) export class LightComponent implements OnInit { myValue = 500; constructor() { } ngOnInit() { } onChange(){ console.log(this.myValue); } } and myValue updates just fine and onChange method is being called but only when I stop sliding and release

Get Angular Material v2 slider's value while sliding

一笑奈何 提交于 2020-01-01 08:18:03
问题 I am using Angular Material v2 md-slider in a component @Component({ selector: 'ha-light', template: `<md-slider min="0" max="1000" step="1" [(ngModel)]="myValue" (change)="onChange()"></md-slider> {{myValue}}`, styleUrls: ['./light.component.css'] }) export class LightComponent implements OnInit { myValue = 500; constructor() { } ngOnInit() { } onChange(){ console.log(this.myValue); } } and myValue updates just fine and onChange method is being called but only when I stop sliding and release

How can I change Angular Material button background color on hover state?

半世苍凉 提交于 2020-01-01 07:59:09
问题 I have an Angular button: <button md-button class="link-btn" >Cancel</button> .link-btn { background-color: transparent; background-repeat: no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none; font-size: 0.8em; padding: 0px; } .link-btn:hover { background-color: transparent; background-repeat: no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none; font-size: 0.8em; padding: 0px; } Normally it is setting transparent background, but in hover state, gray

Angular2 material 'md-icon' is not a known element

独自空忆成欢 提交于 2020-01-01 07:54:06
问题 I have angular2 application which is using @angular2-material 2.0.0-alpha.8-2 version. Everything works fine. Now I decided to upgrade material version to latest i.e. 2.0.0-alpha.9-3. I followed steps mentioned in GETTING_STARTED. Earlier I had imported individual modules as below: @NgModule({ imports: [ BrowserModule, FormsModule, HttpModule, RouterModule, MdIconModule, MdButtonModule, MdCardModule, MdCheckboxModule, .... .... However change log of 2.0.0-alpha.9-3 version says: "Angular

How do I set default value on md-select component from angular 2 material design?

梦想与她 提交于 2020-01-01 07:33:27
问题 I have the following select component that gets populated from a data coming from a rest api. How Can I set default selected value on md-select? <md-select placeholder= "Warehouse" style="width: 100%" [(ngModel)]='selectedProductWarehouse.warehouse' name="Warehouse" required #Warehouse="ngModel"> <md-option *ngFor="let warehouse of warehouses" [value]="warehouse">{{warehouse.description}}</md-option> </md-select> 回答1: you may try below, Component HTML <md-select placeholder="Favorite food" [

Sticky footer in Angular 2 Material

谁都会走 提交于 2020-01-01 05:32:05
问题 I have been searching and searching for about 3 hours now because I didn't want to have to ask, but how can I keep a 'footer' variable at the bottom but not like fixed at the bottom, so if the content I have is very small it won't just sit halfway in the page but if I have lots of information it won't lock right at the bottom of the page and sit there over data while you scroll I have tried several ways including this: https://david-kerwick.github.io/2017/01/14/material-2-flex-layout-making-a