arturovt

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

arturovt

import { Component, ChangeDetectionStrategy, Input, ElementRef } from '@angular/core';
 
@Component({
  selector: 'app-calendar',
  template: `
    <app-events (chooseEvent)="chooseEvent($event.detail)"></app-events>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class CalendarComponent {

arturovt

const event = new CustomEvent('chooseEvent', {
  detail: this.event,
  bubbles: true
});
 
this.host.nativeElement.dispatchEvent(event);

arturovt

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

arturovt

<div *ngFor="let item of items">
  <app-button color="blue" [shouldEmit]="true" (click)="doSomeStuff()"></app-button>
</div>

arturovt

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

arturovt

import { Component, OnInit, ViewChild, ElementRef, NgZone } from '@angular/core';
 
import * as Chart from 'chart.js';
 
@Component({
  selector: 'app-line-chart',
  template: `
    <canvas #canvas></canvas>
  `
})

arturovt

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
 
import * as Chart from 'chart.js';
 
@Component({
  selector: 'app-line-chart',
  template: `
    <canvas #canvas></canvas>
  `
})

arturovt

this.todosService.getTodos().pipe(
  detectChanges(this.ref)
).subscribe((todos) => {
  this.todos = todos;
});

arturovt

export function detectChanges<T>(ref: ChangeDetectorRef) {
  return finalize<T>(() => !(ref as ViewRef).destroyed && ref.detectChanges());
}