arturovt

import { Component, ChangeDetectionStrategy } from '@angular/core';
 
@Component({
  selector: 'app-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ButtonComponent {
  @Input()

arturovt

export class CountriesService implements Mutateble<Country> {
  public mutateSource(
    countries: Country[],
    key: keyof Country,
    value: Country[keyof Country]
  ): Country[] {
    countries.forEach((country) => {
      country[key] = value;
    }); // BAD
 

arturovt

const userToRemoveIndex = this.users.indexOf(user);
 
this.users = this.users.filter((_, index) => {
  return index !== userToRemoveIndex;
}); // BAD
 
this.users = [
  ...this.users.slice(0, userToRemoveIndex),
  ...this.users.slice(userToRemoveIndex + 1)
]; // BAD

arturovt

function reducer(state: number[]) {
  const newState = [...state]; // BAD
 
  const newState = [].concat(state); // BAD
 
  const newState = state.slice(); // BEST
}

arturovt

export class ChartComponent {
  public async ngOnInit(): Promise<void> {
    const { Chart } = await import('chart.js');
 
    this.zone.runOutsideAngular(() => {
      new Chart(...);
    });
  }
}

arturovt

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "module": "esnext"
  }
}

arturovt

@Injectable()
export class TodosResolver implements Resolve<Todo[]> {
  private todos: Todo[] = [];
 
  constructor(private todoService: TodoService) {}
 
  public resolve(): Todo[] | Observable<Todo[]> {
    if (this.todos.length) {
      return this.todos;
    }

arturovt

const routes: Routes = [
  {
    path: 'todos',
    component: TodosComponent,
    resolve: {
      todos: TodosResolver
    }
  }
];

arturovt

@Injectable()
export class TodosResolver implements Resolve<Todo[]> {
  constructor(private todoService: TodoService) {}
 
  public resolve(): Observable<Todo[]> {
    return this.todoService.getTodos();
  }
}

arturovt

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
 
@Component({
  selector: 'app-todos',
  template: `
    <app-todo *ngFor="let todo of todos" [todo]="todo"></app-todo>
  `
})
export class TodosComponent {