How to use @angular/material - 10 common examples

ngOnInit() {
    this.setJobsTargetDatabase();
    this.dataSource = new MatTableDataSource(this.jobs);
    this.dataSource.sortingDataAccessor = (item, property) => {
      switch (property) {
        case 'name':
          return item['flowName'];
        case 'duration':
          return differenceInSeconds(item['startTime'], item['endTime']);
        case 'committed':
          return item['successfulEvents'];
        case 'errors':
          return item['failedEvents'];
        default: return item[property];
      }
    };
    // Check all filters across data source
    this.dataSource.filterPredicate = (data: any, filterValues: string) => {
      filterValues = JSON.parse(filterValues);

private initializeDataSource(): void {
		this.dataSource = new MatTableDataSource(this.data);

		// if there are observers subscribed to the StarkPagination event, it means that the developer will take care of the pagination
		// so we just re-emit the event from the Stark Pagination component (online mode)
		if (this.paginationChanged.observers.length > 0) {
			this.starkPaginator.paginated.subscribe((paginateEvent: StarkPaginateEvent) => {
				this.paginationChanged.emit(paginateEvent);
			});
		} else {
			// if there are no observers, then the data will be paginated internally in the MatTable via the Stark paginator event (offline mode)
			this.dataSource.paginator = this.starkPaginator;
		}

		this.starkPaginator.emitMatPaginationEvent();

		this.dataSource.filterPredicate = (rowData: object, globalFilter: string) => {
			const matchFilter: boolean[] = [];

private transformer = (node: ExtendedMenu, level: number) => {
        return {
            expandable: !!node.subMenus && node.subMenus.length > 0,
            name: node.displayName,
            level,
            id: node.id,
            extMenu: node
        };
    }

    treeControl = new FlatTreeControl(
        node => node.level, node => node.expandable);
    treeFlattener = new MatTreeFlattener(
        this.transformer, node => node.level, node => node.expandable, (node: ExtendedMenu) => node.subMenus);

    dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
    hasChild = (_: number, node: MenuNode) => node.expandable || node.level === 0;

    ngOnInit(): void {
        this.pageService.init('menus').subscribe()
        this.app = this.activetedRouter.snapshot.data.app
        this.menus = this.app.menus as ExtendedMenu[]
        this.dataSource.data = this.menus
    }

    ngAfterViewInit(): void {
        // Ensure we have nested node with more than 1
        if(this.menus.some(a => ObjectUtils.isNotNull(a.subMenus) && a.subMenus.length > 0)){
            this.tree.treeControl.expandAll()
        }
    }

extMenu: node,
            checked: isChecked
        }
        if(isChecked){
            this.checklistSelection.select(menuNode)
        }

        return menuNode;
    }

    treeControl = new FlatTreeControl(
        node => node.level, node => node.expandable);
    treeFlattener = new MatTreeFlattener(
        this.transformer, node => node.level, node => node.expandable, (node: ExtendedMenu) => node.subMenus);

    dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);

    checklistSelection = new SelectionModel(true)
    menuProfile: MenuProfile

    
    hasChild = (_: number, node: MenuNode) => node.expandable || node.level === 0;

    ngOnInit(): void {
    }

    onRoleChange() {
        // Refill the claim list based on role
        this.menuProfile = _.find(this.app.menuProfiles, profile => profile.role === this.selectedRole)
        if (this.menuProfile) {

        }

app: App
    menus: Array = []
    private transformer = (node: ExtendedMenu, level: number) => {
        return {
            expandable: !!node.subMenus && node.subMenus.length > 0,
            name: node.displayName,
            level,
            id: node.id,
            extMenu: node
        };
    }

    treeControl = new FlatTreeControl(
        node => node.level, node => node.expandable);
    treeFlattener = new MatTreeFlattener(
        this.transformer, node => node.level, node => node.expandable, (node: ExtendedMenu) => node.subMenus);

    dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
    hasChild = (_: number, node: MenuNode) => node.expandable || node.level === 0;

    ngOnInit(): void {
        this.pageService.init('menus').subscribe()
        this.app = this.activetedRouter.snapshot.data.app
        this.menus = this.app.menus as ExtendedMenu[]
        this.dataSource.data = this.menus
    }

    ngAfterViewInit(): void {
        // Ensure we have nested node with more than 1
        if(this.menus.some(a => ObjectUtils.isNotNull(a.subMenus) && a.subMenus.length > 0)){
            this.tree.treeControl.expandAll()

name: node.displayName,
            level,
            id: node.id,
            extMenu: node,
            checked: isChecked
        }
        if(isChecked){
            this.checklistSelection.select(menuNode)
        }

        return menuNode;
    }

    treeControl = new FlatTreeControl(
        node => node.level, node => node.expandable);
    treeFlattener = new MatTreeFlattener(
        this.transformer, node => node.level, node => node.expandable, (node: ExtendedMenu) => node.subMenus);

    dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);

    checklistSelection = new SelectionModel(true)
    menuProfile: MenuProfile

    
    hasChild = (_: number, node: MenuNode) => node.expandable || node.level === 0;

    ngOnInit(): void {
    }

    onRoleChange() {
        // Refill the claim list based on role
        this.menuProfile = _.find(this.app.menuProfiles, profile => profile.role === this.selectedRole)

// When there is a result data from the backend,
    //  1. Get all the column names except '_id', using the first instance of
    //      result data.
    //  2. Use those names to generate a list of display columns, which would
    //      be used for displaying on angular mateiral table.
    //  3. Pass the result data as array to generate a new angular material
    //      data table.
    //  4. Set the newly created data table to our own paginator.


    // generate columnDef from first row, column definition is in order
    this.currentDisplayColumns = Object.keys(resultData[0]).filter(x => x !== '_id');
    this.currentColumns = ResultPanelComponent.generateColumns(this.currentDisplayColumns);

    // create a new DataSource object based on the new result data
    this.currentDataSource = new MatTableDataSource(resultData);

    // set the paginator to be the new DataSource's paginator
    this.currentDataSource.paginator = this.paginator;
  }

this.yearProgressStyleModel.yearsColorsMap));

		// Find progressions for moment watched on selected years
		const progressAtDayModels: ProgressAtDayModel[] = this.yearProgressService.findProgressionsAtDay(this.yearProgressions,
			this.momentWatched,
			this.selectedProgressType.type,
			this.selectedYears,
			this.yearProgressStyleModel.yearsColorsMap);

		// If target progression given, seek for target model of watched day.
		// It includes the value that athlete should reach at that day to respect target
		const targetProgressModel = (this.targetProgressModels) ? _.find(this.targetProgressModels, {
			dayOfYear: this.momentWatched.dayOfYear()
		}) : null;

		this.dataSource = new MatTableDataSource(); // Force table to refresh with new instantiation.
		this.dataSource.data = this.rows(progressAtDayModels, targetProgressModel);
	}

(response: any) => {

        this.logger.info('ContactsComponent: subscribe() success handler');

        this.count = response.body.meta.count;
        this.items = response.body.data.map((item => this.entityAdapter.adapt(item)));

        // this.logger.info('count: ' + response.body.meta.count);
        // this.logger.info('items: ' + JSON.stringify(this.items, null, 2));

        this.dataSource = new MatTableDataSource(this.items);
        this.dataSource.data = this.items;
        this.dataSource.sortingDataAccessor = pathDataAccessor;
        this.dataSource.sort = this.sort;

      },
      (error) => {

import { SerialPortHistoryPreviewGlobal } from "../models/serialporthistory.global";

@Component({
  selector: 'serialporthistorygcode',
  templateUrl: './serialporthistory-gcode.component.html',
  styleUrls: ['./serialporthistory-gcode.component.css']
})
export class SerialPortHistoryGCodeComponent implements OnChanges, OnInit, OnDestroy {

  forserialportid: number = -1;

  @Input()
  autoreloadonempty: boolean = false;

  serialcommands: SerialCommand[] = [];
  serialcommandsDataSource = new MatTableDataSource(this.serialcommands);

  displayedColumns: string[] = [/* 'SeqId', */ 'sentTime', 'commandText', 'replyType', 'resultText', 'replyReceivedTime'];

  @ViewChild(MatPaginator)
  paginator: MatPaginator;

  private hubConnection: HubConnection;
  private _initDone: boolean = false;

  constructor(
    private serivalServerService: SerialServerService,
    public serialServer: SerialServerConnection,
    public previewGlobal: SerialPortHistoryPreviewGlobal
  ) {
  }