angular-cdk

I use a git project for a virtual keyboard ( https://ngx-material-keyboard.github.io/demo/ ). And I have some issues to get it running on a small device with 450*250 pixel. At the end I found the necessary changes in the css if I modify it directly at the web browser with dev tools. Now I have to find the right position to change the sources. There will be used the overlay component from angular2-material to visualize the keyboard. If I comment out the position in the cdk-overlay-container, it works: .cdk-overlay-container { /* position: fixed; */ z-index: 1000; } But I cant overwrite these

As recently angular introduced drag and drop in angular material https://material.angular.io/cdk/drag-drop/overview . All examples describes with in a single component. How to use this in two different components, Drag one component item and drop into another component. You may use properties id and cdkDropListConnectedTo to link both lists: Component 1: <div cdkDropList id="list-1" cdkDropListConnectedTo="list-2" (cdkDropListDropped)="drop($event)"> <div *ngFor="let item of list" cdkDrag>{{ item }}</div> </div> Component 2: <div cdkDropList id="list-2" cdkDropListConnectedTo="list-1"

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']; dataSource = new MatTableDataSource(ELEMENT_DATA); applyFilter(filterValue: string) { filterValue =