<repo_name>hzxc/material-angular-demo<file_sep>/src/app/other/timeago-demo/jq-plugin.directive.ts
import { Directive, ElementRef, AfterViewInit, OnInit } from '@angular/core';
import { AfterViewChecked, OnChanges } from '@angular/core/src/metadata/lifecycle_hooks';

@Directive({
  // tslint:disable-next-line:directive-selector
  selector: '[jq-plugin]'
})
export class JqPluginDirective implements OnInit, OnChanges, AfterViewInit, AfterViewChecked {




  constructor(
    private _element: ElementRef
  ) {

  }

  ngOnInit() {

  }

  ngOnChanges() {

  }

  ngAfterViewChecked() {

  }

  ngAfterViewInit(): void {
    console.log('ngAfterViewChecked');
    const $element = $(this._element.nativeElement);
    const pluginName = $element.attr('jq-plugin');
    const options = $element.attr('jq-options');
    if (!options) {
      $element.timeago();
      // $element[pluginName]();
    } else {
      // tslint:disable-next-line:no-eval
      $element[pluginName](eval('(' + options + ')'));
    }
  }
}
<file_sep>/src/app/ng-chart-demo/ng-chart-demo.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgChartDemoComponent } from './ng-chart-demo.component';
import { ChartModule } from 'angular-highcharts';
import { NgChartDemoRoutingModule } from './ng-chart-demo-routing.module';
@NgModule({
  imports: [
    CommonModule,
    ChartModule,
    NgChartDemoRoutingModule
  ],
  declarations: [NgChartDemoComponent]
})
export class NgChartDemoModule { }
<file_sep>/src/app/check-box/check-box.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-check-box',
  templateUrl: './check-box.component.html',
  styleUrls: ['./check-box.component.scss']
})
export class CheckBoxComponent implements OnInit {




  foods = [
    { value: 'steak-0', viewValue: 'Steak' },
    { value: 'pizza-1', viewValue: 'Pizza' },
    { value: 'tacos-2', viewValue: 'Tacos' }
  ];

  languages: LanguageDto[] = [
    {
      'name': 'de',
      'displayName': 'Deutsch',
      'icon': 'flag-icon flag-icon-de',
      'isDefault': false,
      'isDisabled': false,
      'isRightToLeft': false
    },
    {
      'name': 'en',
      'displayName': 'English',
      'icon': 'flag-icon flag-icon-gb',
      'isDefault': false,
      'isDisabled': false,
      'isRightToLeft': false
    },
    {
      'name': 'es-MX',
      'displayName': 'Español (México)',
      'icon': 'flag-icon flag-icon-mx',
      'isDefault': false,
      'isDisabled': false,
      'isRightToLeft': false
    },
    {
      'name': 'es',
      'displayName': 'Español (Spanish)',
      'icon': 'flag-icon flag-icon-es',
      'isDefault': false,
      'isDisabled': false,
      'isRightToLeft': false
    },
    {
      'name': 'fr',
      'displayName': 'Français',
      'icon': 'flag-icon flag-icon-fr',
      'isDefault': false,
      'isDisabled': false,
      'isRightToLeft': false
    },
    {
      'name': 'it',
      'displayName': 'Italiano',
      'icon': 'flag-icon flag-icon-it',
      'isDefault': false,
      'isDisabled': false,
      'isRightToLeft': false
    },
    {
      'name': 'pt-BR',
      'displayName': 'Português (Brasil)',
      'icon': 'flag-icon flag-icon-br',
      'isDefault': false,
      'isDisabled': false,
      'isRightToLeft': false
    },
    {
      'name': 'ru',
      'displayName': 'Pусский',
      'icon': 'flag-icon flag-icon-ru',
      'isDefault': false,
      'isDisabled': false,
      'isRightToLeft': false
    },
    {
      'name': 'tr',
      'displayName': 'Türkçe',
      'icon': 'flag-icon flag-icon-tr',
      'isDefault': false,
      'isDisabled': false,
      'isRightToLeft': false
    },
    {
      'name': 'ar',
      'displayName': 'العربية',
      'icon': 'flag-icon flag-icon-sa',
      'isDefault': false,
      'isDisabled': false,
      'isRightToLeft': true
    },
    {
      'name': 'zh-CN',
      'displayName': '简体中文',
      'icon': 'flag-icon flag-icon-cn',
      'isDefault': true,
      'isDisabled': false,
      'isRightToLeft': false
    }
  ];

  private selectedItem: LanguageDto = new LanguageDto();

  constructor() {
    this.selectedItem.name = 'zh-CN';
    this.selectedItem.displayName = '简体中文';
    this.selectedItem.icon = 'flag-icon flag-icon-cn';
    this.selectedItem.isDefault = true;
    this.selectedItem.isDisabled = false;
    this.selectedItem.isRightToLeft = false;
  }

  ngOnInit() {
  }

}

class LanguageDto {
  name: string;
  'displayName': string;
  'icon': string;
  'isDefault': boolean;
  'isDisabled': boolean;
  'isRightToLeft': boolean;
}
<file_sep>/src/app/rxjs-demo/rxjs-demo.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RxjsDemoComponent } from './rxjs-demo.component';
import { RxjsDemoRoutingModule } from './rxjs-demo-routing.module';
import { MaterialModule } from '../shared/material/material.module';

@NgModule({
  imports: [
    CommonModule,
    RxjsDemoRoutingModule,
    MaterialModule
  ],
  declarations: [RxjsDemoComponent]
})
export class RxjsDemoModule { }
<file_sep>/src/app/autocomplete/filter/filter.component.ts
import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'app-filter',
  templateUrl: './filter.component.html',
  styleUrls: ['./filter.component.scss']
})
export class FilterComponent implements OnInit {
  myControl: FormControl = new FormControl();

  options = [
    'One',
    'Two',
    'Three'
  ];

  filteredOptions: Observable<string[]>;

  ngOnInit() {
    this.filteredOptions = this.myControl.valueChanges
      .startWith(null)
      .map(val => val ? this.filter(val) : this.options.slice());
  }

  filter(val: string): string[] {
    return this.options.filter(option =>
      option.toLowerCase().indexOf(val.toLowerCase()) === 0);
  }
}
<file_sep>/src/app/ng-chart-demo/ng-chart-demo-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { NgChartDemoComponent } from './ng-chart-demo.component';

const routes: Routes = [
  { path: '', component: NgChartDemoComponent }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

export class NgChartDemoRoutingModule { }
<file_sep>/src/app/table/retrieving-data-through-http/retrieving-data-through-http.component.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { Http } from '@angular/http';
import { DataSource } from '@angular/cdk/collections';
import { MatPaginator, MatSort } from '@angular/material';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/merge';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/finally';
@Component({
  selector: 'app-retrieving-data-through-http',
  templateUrl: './retrieving-data-through-http.component.html',
  styleUrls: ['./retrieving-data-through-http.component.scss']
})
export class RetrievingDataThroughHttpComponent implements OnInit {
  displayedColumns = ['created_at', 'state', 'number', 'title'];
  exampleDatabase: ExampleHttpDao | null;
  dataSource: ExampleDataSource | null;

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  constructor(private http: Http) {

  }
  ngOnInit() {
    this.exampleDatabase = new ExampleHttpDao(this.http);
    this.dataSource = new ExampleDataSource(
      this.exampleDatabase, this.paginator, this.sort);
  }
}

export interface GithubApi {
  items: GithubIssue[];
  total_count: number;
}

export interface GithubIssue {
  created_at: string;
  number: string;
  state: string;
  title: string;
}

export class ExampleHttpDao {
  constructor(private http: Http) { }

  getRepoIssues(sort: string, order: string, page: number): Observable<GithubApi> {
    const href = 'https://api.github.com/search/issues';
    const requestUrl =
      `${href}?q=repo:angular/material2&sort=${sort}&order=${order}&page=${page + 1}`;

    return this.http.get(requestUrl)
      .map(response => response.json() as GithubApi);
  }
}

export class ExampleDataSource extends DataSource<GithubIssue> {
  // The number of issues returned by github matching the query.
  resultsLength = 0;
  isLoadingResults = true;
  isRateLimitReached = false;

  constructor(private exampleDatabase: ExampleHttpDao,
    private paginator: MatPaginator,
    private sort: MatSort) {
    super();
  }

  /** Connect function called by the table to retrieve one stream containing the data to render. */
  connect(): Observable<GithubIssue[]> {
    const displayDataChanges = [
      this.sort.sortChange,
      this.paginator.page
    ];

    // If the user changes the sort order, reset back to the first page.
    this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);

    return Observable.merge(...displayDataChanges)
      .startWith(null)
      .do(_ => { this.isLoadingResults = true; })
      .switchMap(() => {
        return this.exampleDatabase.getRepoIssues(
          this.sort.active, this.sort.direction, this.paginator.pageIndex);
      })
      .map(data => {
        // Flip flag to show that loading has finished.
        this.isLoadingResults = false;
        this.isRateLimitReached = false;
        this.resultsLength = data.total_count;
        return data.items;
      })
      .catch(() => {
        this.isLoadingResults = false;
        // Catch if the GitHub API has reached its rate limit. Return empty data.
        this.isRateLimitReached = true;
        return Observable.of([]);
      });
  }

  disconnect() { }
}
<file_sep>/src/app/other/timeago-demo/timeago-demo.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-timeago-demo',
  templateUrl: './timeago-demo.component.html',
  styleUrls: ['./timeago-demo.component.scss']
})
export class TimeagoDemoComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}
<file_sep>/src/app/reg-exp/reg-exp.component.ts
import { Component, OnInit } from '@angular/core';
import { ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-reg-exp',
  templateUrl: './reg-exp.component.html',
  styleUrls: ['./reg-exp.component.scss']
})
export class RegExpComponent implements OnInit {

  private msg: string;
  @ViewChild('ele') ele: ElementRef;
  constructor() { }

  ngOnInit() {
  }

  test() {
    const re = /apples/gi;
    // const re = /\d/i;
    const str = 'Apples are round, and apples are juicy.';
    if (str.search(re) === -1) {
      this.msg = 'Does not contain Apples';
    } else {
      this.msg = 'Contains Apples';
    }
    console.log(str.match(re));
  }

  otherTest() {
    const value = undefined;
    const value1 = null;
    const value2 = '';
    console.log(value ? true : false);
    if (value) {
      console.log(true);
    } else {
      console.log(false);
    }

    console.log(value1 ? true : false);
    if (value1) {
      console.log(true);
    } else {
      console.log(false);
    }
    console.log(value2 ? true : false);
    if (value2) {
      console.log(true);
    } else {
      console.log(false);
    }
  }

  elementTest() {
    $(this.ele.nativeElement).html('123123');
  }
}
<file_sep>/src/app/app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: 'autocomplete',
    loadChildren: './autocomplete/autocomplete.module#AutocompleteModule',
  },
  {
    path: 'rxjs',
    loadChildren: './rxjs-demo/rxjs-demo.module#RxjsDemoModule',
  },
  {
    path: 'checkBox',
    loadChildren: './check-box/check-box.module#CheckBoxModule',
  },
  {
    path: 'datepicker',
    loadChildren: './datepicker/datepicker.module#DatepickerModule',
  },
  {
    path: 'table',
    loadChildren: './table/table.module#TableModule',
  },
  {
    path: 'chips',
    loadChildren: './chips/chips.module#ChipsModule',
  },
  {
    path: 'dialog',
    loadChildren: './dialog/dialog.module#DialogModule',
  },
  {
    path: 'select',
    loadChildren: './select/select.module#SelectModule',
  },
  {
    path: 'tabs',
    loadChildren: './tabs/tabs.module#TabsModule',
  },
  {
    path: 'progress',
    loadChildren: './progress/progress.module#ProgressModule',
  },
  {
    path: 'regExp',
    loadChildren: './reg-exp/reg-exp.module#RegExpModule',
  },
  {
    path: 'menu',
    loadChildren: './menu/menu.module#MenuModule',
  },
  {
    path: 'other',
    loadChildren: './other/other.module#OtherModule',
  },
  {
    path: 'e-ngx-print-demo',
    loadChildren: './e-ngx-print-demo/e-ngx-print-demo.module#ENgxPrintDemoModule',
  },
  {
    path: 'charts',
    loadChildren: './ng-chart-demo/ng-chart-demo.module#NgChartDemoModule',
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
<file_sep>/src/app/dialog/dialog.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DialogComponent } from './dialog.component';
import { DialogRoutingModule } from './dialog-routing.module';
import { MaterialModule } from '../shared/material/material.module';
import { SimpleComponent } from './simple/simple.component';
import { FormsModule } from '@angular/forms';
import { FlexLayoutModule } from '@angular/flex-layout';


@NgModule({
  imports: [
    CommonModule,
    DialogRoutingModule,
    MaterialModule,
    FormsModule,
    FlexLayoutModule
  ],
  entryComponents: [
    SimpleComponent
  ],
  declarations: [
    DialogComponent,
    SimpleComponent
  ]
})
export class DialogModule { }
<file_sep>/src/app/datepicker/datepicker.module.ts
import { MaterialModule } from './../shared/material/material.module';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DatepickerComponent } from './datepicker.component';
import { DatepickerRoutingModule } from './datepicker-routing.module';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';


@NgModule({
  imports: [
    CommonModule,
    DatepickerRoutingModule,
    MaterialModule,
    ReactiveFormsModule,
    FormsModule
  ],
  declarations: [DatepickerComponent]
})
export class DatepickerModule {



}
<file_sep>/src/app/autocomplete/autocomplete.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AutocompleteRoutingModule } from './autocomplete-routing.module';
import { SimpleComponent } from './simple/simple.component';
import { MaterialModule } from '../shared/material/material.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { OverviewComponent } from './overview/overview.component';
import { AutocompleteComponent } from './autocomplete.component';
import { SetDisplayValueComponent } from './set-display-value/set-display-value.component';
import { FilterComponent } from './filter/filter.component';

@NgModule({
  imports: [
    CommonModule,
    AutocompleteRoutingModule,
    MaterialModule,
    FormsModule,
    ReactiveFormsModule
  ],
  declarations: [
    SimpleComponent,
    OverviewComponent,
    AutocompleteComponent,
    SetDisplayValueComponent,
    FilterComponent
  ]
})
export class AutocompleteModule { }
<file_sep>/src/app/select/select.component.ts
import { Component, OnInit } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-select',
  templateUrl: './select.component.html',
  styleUrls: ['./select.component.scss']
})
export class SelectComponent implements OnInit {

  animalControl = new FormControl('Fox', [Validators.required]);

  selectValue = 'Fox';

  animals = [
    { name: 'Dog', sound: 'Woof!' },
    { name: 'Cat', sound: 'Meow!' },
    { name: 'Cow', sound: 'Moo!' },
    { name: 'Fox', sound: 'Wa-pa-pa-pa-pa-pa-pow!' },
  ];
  constructor() { }

  ngOnInit() {
  }
}
<file_sep>/src/app/rxjs-demo/rxjs-demo.component.ts
import { element } from 'protractor';
import { Observable } from 'rxjs/Observable';
import { Component, OnInit, ViewChild } from '@angular/core';
import 'rxjs/add/observable/of';
import 'rxjs/add/observable/from';
import 'rxjs/add/observable/interval';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switch';
import 'rxjs/add/operator/delay';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/first';
import 'rxjs/add/operator/last';
import 'rxjs/add/operator/switchMap';
import { MatButton } from '@angular/material';

@Component({
  selector: 'app-rxjs-demo',
  templateUrl: './rxjs-demo.component.html',
  styleUrls: ['./rxjs-demo.component.scss']
})
export class RxjsDemoComponent implements OnInit {

  items: Array<Item> = new Array();
  @ViewChild('switchButton') switchButton: MatButton;

  constructor() {

  }

  swithTest() {
    // var result = clicks.switchMap((ev) => Rx.Observable.interval(1000));
    // result.subscribe(x => console.log(x));
  }

  ngOnInit() {
    console.log(this.switchButton);
    const clicks = Observable.fromEvent(this.switchButton._elementRef.nativeElement, 'click');
    // const result = clicks.switchMap((ev) => Observable.interval(1000));
    const higherOrder = clicks.map((ev) => Observable.interval(1000));
    const result = higherOrder.switch();

    result.subscribe(x => console.log(x));
  }

  trigger() {


    const obj1$ = Observable.from([1, 2, 3, 4, 5]).filter(x => x > 3);
    const obj2$ = Observable.of<Item>(
      {
        isFree: null,
        value: '-1',
        displayText: '- All -',
        isSelected: false
      },
      {
        isFree: null,
        value: '',
        displayText: 'Not assigned',
        isSelected: false
      },
      {
        isFree: true,
        value: '1',
        displayText: 'Standard',
        isSelected: false
      }
    );
    const obj3$ = Observable.from<Item>(
      [
        {
          isFree: null,
          value: '-1',
          displayText: '- All -',
          isSelected: false
        },
        {
          isFree: null,
          value: '',
          displayText: 'Not assigned',
          isSelected: false
        },
        {
          isFree: true,
          value: '1',
          displayText: 'Standard',
          isSelected: false
        }
      ]
    );
    // obj1$.subscribe(val => console.log(val));
    obj2$.filter(v => v.value === '1').subscribe(val => console.log(val));
    obj3$.subscribe(val => this.items.push(val));
    console.log(this.items);
  }
}

export class Item {

  public isFree?: boolean;

  public value: string;

  public displayText: string;

  public isSelected: boolean;

  constructor(data?: Item) {
    if (data) {
      for (const property in data) {
        if (data.hasOwnProperty(property)) {
          (<any>this)[property] = (<any>data)[property];
        }
      }
    }
  }


}
<file_sep>/src/app/progress/configurable-progress-spinner/configurable-progress-spinner.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-configurable-progress-spinner',
  templateUrl: './configurable-progress-spinner.component.html',
  styleUrls: ['./configurable-progress-spinner.component.scss']
})
export class ConfigurableProgressSpinnerComponent implements OnInit {
  color = 'primary';
  mode = 'determinate';
  value = 50;
  constructor() { }

  ngOnInit() {
  }

  valueChange(value) {
    console.log(value);
  }

  progressChange(progress) {
    console.log(progress);
  }

}
<file_sep>/src/app/other/other.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Ot1Component } from './ot1/ot1.component';
import { OtherRoutingModule } from './other-routing.module';
import { TimeagoDemoComponent } from './timeago-demo/timeago-demo.component';
import { OtherComponent } from './other.component';
import { MaterialModule } from '../shared/material/material.module';
import { JqPluginDirective } from './timeago-demo/jq-plugin.directive';

@NgModule({
  imports: [
    CommonModule,
    OtherRoutingModule,
    MaterialModule,
  ],
  declarations: [
    Ot1Component,
    TimeagoDemoComponent,
    OtherComponent,
    JqPluginDirective]
})
export class OtherModule { }
<file_sep>/src/app/reg-exp/reg-exp.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RegExpComponent } from './reg-exp.component';
import { RegExpRoutingModule } from './reg-exp-routing.module';
import { MaterialModule } from '../shared/material/material.module';

@NgModule({
  imports: [
    CommonModule,
    RegExpRoutingModule,
    MaterialModule
  ],
  declarations: [RegExpComponent]
})
export class RegExpModule { }
<file_sep>/src/app/autocomplete/set-display-value/set-display-value.component.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/from';
@Component({
  selector: 'app-set-display-value',
  templateUrl: './set-display-value.component.html',
  styleUrls: ['./set-display-value.component.scss']
})
export class SetDisplayValueComponent implements OnInit {


  private displayGroup: FormGroup;

  options = [
    new User('Mary', 'Mary1'),
    new User('Shelley', 'Shelley1'),
    new User('Igor', 'Igor1')
  ];

  filteredOptions: Observable<User[]>;

  constructor(fb: FormBuilder) {
    this.displayGroup = fb.group({
      username: [],
    }
    );
  }

  ngOnInit() {
    // this.filteredOptions = Observable.from(this.options).map(_ => _);
    this.filteredOptions = this.displayGroup.controls['username'].valueChanges
      .startWith(null)
      .map(user => user && typeof user === 'object' ? user.name : user)
      .map(name => name ? this.filter(name) : this.options.slice());

    console.log(this.filteredOptions);
  }

  filter(name: string): User[] {
    return this.options.filter(option =>
      option.name.toLowerCase().indexOf(name.toLowerCase()) === 0);
  }

  displayFn(user: User): string {
    return user ? ' <span class="flag-icon flag-icon-cn"></span>' + user.name : null;
  }

}

export class User {
  constructor(public name: string, public text: string) { }
}
<file_sep>/src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatButtonModule} from '@angular/material/button';
import { MatMomentDateModule } from '@angular/material-moment-adapter';
import { SelectComponent } from './select/select.component';
import { MatCardModule } from '@angular/material';
import { ChartModule } from 'angular-highcharts';
@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatMomentDateModule,
    MatCardModule,
    ChartModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
<file_sep>/src/app/menu/menu.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BaseMenuComponent } from './base-menu/base-menu.component';
import { MaterialModule } from '../shared/material/material.module';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MenuRoutingModule } from './menu-routing.module';

@NgModule({
  imports: [
    CommonModule,
    MaterialModule,
    FlexLayoutModule,
    MenuRoutingModule
  ],
  declarations: [BaseMenuComponent]
})
export class MenuModule { }
<file_sep>/src/app/table/table.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TableComponent } from './table.component';
import { RetrievingDataThroughHttpComponent } from './retrieving-data-through-http/retrieving-data-through-http.component';
import { SortingPaginationFilteringComponent } from './sorting-pagination-filtering/sorting-pagination-filtering.component';
import { TableRoutingModule } from './table-routing.module';
import { MaterialModule } from '../shared/material/material.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import {
  MatTableModule,
  MatPaginatorModule,
  MatSortModule
} from '@angular/material';

@NgModule({
  imports: [
    CommonModule,
    TableRoutingModule,
    MaterialModule,
    MatTableModule,
    MatPaginatorModule,
    MatSortModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule
  ],
  declarations: [
    TableComponent,
    RetrievingDataThroughHttpComponent,
    SortingPaginationFilteringComponent
  ]
})
export class TableModule { }
<file_sep>/src/app/datepicker/datepicker.component.ts
import { Component, OnInit, ViewChild, ViewChildren, QueryList } from '@angular/core';
import * as moment from 'moment';
import { FormGroup, FormBuilder } from '@angular/forms';
import { MatInput, MatDatepickerToggle } from '@angular/material';
@Component({
  selector: 'app-datepicker',
  templateUrl: './datepicker.component.html',
  styleUrls: ['./datepicker.component.scss']
})
export class DatepickerComponent implements OnInit {

  @ViewChildren(MatInput) matInputs: QueryList<MatInput>;
  @ViewChild(MatInput) matInput: MatInput;

  disabledState = false;
  dp1Value: moment.Moment;
  private dpGroup: FormGroup;
  result: {
    dp1Value: moment.Moment,
    dp2Value: moment.Moment,
    dp3Value: moment.Moment,
  } = <any>[];
  constructor(
    fb: FormBuilder
  ) {
    this.dpGroup = fb.group({
      dp1Value: []
    });
  }
  change() {
    // this.matInputs.forEach(element => {
    //   element.value = moment().startOf('day');
    // });
    this.matInputs.last.value = moment().startOf('day').toString();

    this.matInput.value = moment().startOf('day').toString();
    this.matInput.readonly = !this.matInput.readonly;
    this.disabledState = !this.disabledState;
    console.log(this.dpGroup.controls['dp1Value'].value);
  }

  ngOnInit() {

  }

}
