Ivan Stroykin

public getElementData(): Observable<any[]> {
  return this._httpClient.get('api/test'); // any[]
}

public displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
public dataSource;

// constructor ...

ngOnInit(): void {
  this._getElementData();
}

private _getElementData(): void {
  this._homeService.getElementData().subscribe(res => {
    this.dataSource = new MatTableDataSource(res);
  });
}

public displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
public dataSource = new MatTableDataSource();

// constructor ...

ngOnInit(): void {
  this._getElementData();
}

private _getElementData(): void {
  this._homeService.getElementData().subscribe(res => {
    this.dataSource.data = res;
  });
}

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu" [overlapTrigger]="false">
    <button mat-menu-item>Item 1</button>
    <button mat-menu-item>Item 2</button>
</mat-menu>

<header>...</header>
<main>
  <router-outlet></main>
<footer>...</footer>

<header>...</header>
<main>
  <sidebar>...</sidebar>
  <router-outlet>
</main>
<footer>...</footer>

const routes: Routes = [
  {
    path: 'first', component: FirstLayoutComponent, children: [
      { path: 'test1', component: Test1Component }
    ]
  },
  {
    path: 'secod'm component: SecondLayoutComponent, children: [
        { path: 'test2', component: Test2Component }
    ]
  }
];

<button (click)="showConfirmLogout()">Logout</button>

public showConfirmLogout(): void {
  this._confirmService.open('Вы действительно хотите выйти?').then(() => {
    this._logout();
  });
}

private _logout(): void {
  this._authService.logout().subscribe(() => {
    this._router.navigate(['/login']);
  });
}

ngOnInit() {
    ymaps.ready().then(() => {
      this.map = new ymaps.Map('map', {
        center: [50.450100, 30.523400],
        zoom: 12
      });
    });
  }

<app-user *ngFor="let u of users">[user]="u"</app-user>

<app-user *ngFor="let u of users" [user]="u"></app-user>

<app-user *ngFor="let user of users" [user]="user"></app-user>

<!-- validateTime - кастомная валидация -->
<div *ngIf="form.get('time').hasError('required')">...</div>
<div *ngIf="form.get('time').hasError('validateTime')">...</div>

'./.user.component.css'

import { MaterialModule } from '@angular/material';

import {
MatInputModule, MatRadioModule, ...
} from '@angular/material';

@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

import { NgModule } from '@angular/core';
import {  
MatButtonModule,
MatInputModule,
MatCardModule,
MatCheckboxModule,
// ...
} from '@angular/material';

@NgModule({
  exports: [
    MatButtonModule,
    MatInputModule,
    MatCardModule,
    MatCheckboxModule,
    // ...
  ]
})
export class MaterialModule { }

export { MaterialModule } from './material.module';

// ...imports
import { MaterialModule } from './material';

@NgModule({
  exports: [
    // ...exports
    MaterialModule,
  ]
})
export class SharedModule { }

Сильно ли это повлияет на производительность? Всё таки я не все компоненты библиотеки материал использую в проекте.

/**
 * @param {string[]} items 
 * @param {string} element
 * @return {string}
 */
function getItem(items, element) {
  return items[items.indexOf(element) + 1] || items[0];
}