import { Component, OnInit } from '@angular/core';
import { UserService } from '../../services/user.service';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import {DataSource} from '@angular/cdk/collections';
import { User } from '../../models/user.model';
import {SelectionModel} from '@angular/cdk/collections';

@Component({
  selector: 'usertable',
  templateUrl: './usertable.component.html',
  styleUrls: ['./usertable.component.css']
})
export class UsertableComponent implements OnInit {
  dataSource = new UserDataSource(this.userService);
  displayedColumns = ['select', 'cl1', 'cl2', 'cl3', 'cl4'];
  constructor(private userService: UserService) { }
  selection = new SelectionModel<Element>(true, []);
  ngOnInit() {
  }


  /** Whether the number of selected elements matches the total number of rows. */

  isAllSelected() {
   const numSelected = this.selection.selected.length;
   const numRows = this.dataSource.data.length;
   return numSelected === numRows;
  }

  /** Selects all rows if they are not all selected; otherwise clear selection. */

  masterToggle() {
    this.isAllSelected() ?
        this.selection.clear() :
        this.dataSource.data.forEach(row => this.selection.select(row));
  }
}

export class UserDataSource extends DataSource<any> {
      constructor(private userService: UserService) {
        super();
      }
      connect(): Observable<User[]> {
        return this.userService.getUser();
      }
      disconnect() {}
    }

<ng-container matColumnDef="select">
                <mat-header-cell *matHeaderCellDef>
                    <mat-checkbox class="materialfix" (change)="$event ? masterToggle() : null"
                                  [checked]="selection.hasValue() && isAllSelected()"
                                  [indeterminate]="selection.hasValue() && !isAllSelected()">
                    </mat-checkbox>
                </mat-header-cell>
                <mat-cell *matCellDef="let row">
                    <mat-checkbox (click)="$event.stopPropagation()"
                                  (change)="$event ? selection.toggle(row) : null"
                                  [checked]="selection.isSelected(row)">
                    </mat-checkbox>
                </mat-cell>
            </ng-container>

            <ng-container matColumnDef="cl1">
                <mat-header-cell class="fontChange" *matHeaderCellDef mat-sort-header> Cl1</mat-header-cell>
                <mat-cell *matCellDef="let element"> {{element.cl1}} </mat-cell>
            </ng-container>


            <ng-container matColumnDef="cl2">
                <mat-header-cell class="fontChange" *matHeaderCellDef mat-sort-header> cl2</mat-header-cell>
                <mat-cell *matCellDef="let element"> {{element.cl2}} </mat-cell>
            </ng-container>


            <ng-container matColumnDef="cl3">
                <mat-header-cell class="fontChange" *matHeaderCellDef mat-sort-header> cl3</mat-header-cell>
                <mat-cell *matCellDef="let element"> {{element.cl3}} </mat-cell>
            </ng-container>


            <ng-container matColumnDef="cl4">
                <mat-header-cell class="fontChange" *matHeaderCellDef mat-sort-header> cl4 </mat-header-cell>
                <mat-cell *matCellDef="let element"> {{element.cl4| date: 'yyyy-MM-dd  '}} </mat-cell>
            </ng-container>

            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
            <mat-row *matRowDef="let row; columns: displayedColumns;"
                     (click)="selection.toggle(row)">
            </mat-row>
        </mat-table>

export class UsertableComponent implements OnInit {
  dataSource = new MatTableDataSource();
  displayedColumns = ['select', 'cl1', 'cl2', 'cl3', 'cl4'];
  constructor(private userService: UserService) { }
  selection = new SelectionModel<User>(true, []);
  ngOnInit() {
    this.userService.getUser().subscribe(users => {
      this.dataSource.data = users;
    });
  }
  ....