How to use the @angular/core.ChangeDetectionStrategy.OnPush function in @angular/core

import { Component, ChangeDetectionStrategy, Renderer2 } from '@angular/core'
import { AppInitService } from '../shared/fusing/app-init.service'
import { PlatformService } from '../shared/fusing/platform.service'

@Component({
  selector: 'pm-app',
  styleUrls: ['./app.component.css'],
  templateUrl: './app.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent {
  constructor(rdr: Renderer2, ais: AppInitService, ps: PlatformService) {
    if (ps.isElectron) {
      ais.init(rdr)
    }
  }
}

import {
  ChangeDetectionStrategy,
  Component,
  OnInit
} from '@angular/core';

import {
  FormBuilder,
  FormGroup
} from '@angular/forms';

@Component({
  selector: 'sky-radio-demo',
  templateUrl: './radio-demo.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class SkyRadioDemoComponent implements OnInit {
  public iconSelectedValue = 'info';
  public iconGroupSelectedValue = 'table';
  public radioForm: FormGroup;

  public seasons = [
    { name: 'Spring', disabled: false },
    { name: 'Summer', disabled: false },
    { name: 'Fall', disabled: true },
    { name: 'Winter', disabled: false }
  ];

  public favoriteSeason = this.seasons[1];

  constructor(

import { Component, ChangeDetectionStrategy } from '@angular/core';
import { DataService, Atom } from '../data.service';
import { Observable } from 'rxjs';

@Component({
	selector: 'example-drag-row-basic',
	templateUrl: 'example-drag-row-basic.component.html',
	styleUrls: ['example-drag-row-basic.component.scss'],
	providers: [DataService],
	changeDetection: ChangeDetectionStrategy.OnPush
})
export class ExampleDragRowBasicComponent {
	rows$: Observable;

	constructor(dataService: DataService) {
		this.rows$ = dataService.getAtoms();
	}
}

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { BasePageComponent } from '../../page/page.component';

@Component({
  selector: 'app-exception-filters',
  templateUrl: './exception-filters.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class WsExceptionFiltersComponent extends BasePageComponent {}

import { FocusMonitor } from '@angular/cdk/a11y';
import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
import { ChangeDetectionStrategy, Component, ElementRef, Input, OnDestroy, TemplateRef } from '@angular/core';
import { NovoStepLabel } from './step-label.component';
import { CdkStepHeader } from '@angular/cdk/stepper';

@Component({
  selector: 'novo-step-header',
  templateUrl: 'step-header.component.html',
  styleUrls: ['step-header.component.scss'],
  host: {
    class: 'novo-step-header',
    role: 'tab',
  },
  preserveWhitespaces: false,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class NovoStepHeader extends CdkStepHeader implements OnDestroy {
  @Input()
  theme: string;
  @Input()
  color: string;
  @Input()
  icon: string;
  /** State of the given step. */
  @Input()
  state: string;

  /** Label of the given step. */
  @Input()
  label: NovoStepLabel | string;

import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewChild } from "@angular/core";
import { FormGroup } from "@angular/forms";
import { DateInputComponent } from "@progress/kendo-angular-dateinputs";
import {
    DynamicFormLayout,
    DynamicFormLayoutService,
    DynamicFormValidationService,
    DynamicFormControlComponent,
    DynamicInputModel
} from "@ng-dynamic-forms/core";

@Component({
    selector: "dynamic-kendo-dateinput",
    templateUrl: "./dynamic-kendo-dateinput.component.html",
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class DynamicKendoDateInputComponent extends DynamicFormControlComponent {

    @Input() group: FormGroup;
    @Input() layout: DynamicFormLayout;
    @Input() model: DynamicInputModel;

    @Output() blur: EventEmitter = new EventEmitter();
    @Output() change: EventEmitter = new EventEmitter();
    @Output() focus: EventEmitter = new EventEmitter();

    @ViewChild("kendoDateInput") kendoDateInput: DateInputComponent;

    constructor(protected layoutService: DynamicFormLayoutService,
                protected validationService: DynamicFormValidationService) {

Component,
    EventEmitter,
    Input,
    OnChanges,
    OnInit,
    Output,
    SimpleChanges,
    ViewEncapsulation
} from '@angular/core';

import { PanelMode } from '../../standard-types';
import { CandyDate } from '../../../core';
import { DateHelperService, DateHelperByDatePipe } from '../../date-helper.service';

@Component({
    changeDetection: ChangeDetectionStrategy.OnPush,
    selector: 'calendar-header',
    exportAs: 'calendarHeader',
    templateUrl: 'calendar-header.component.html'
})
export class CalendarHeaderComponent implements OnInit, OnChanges {
    @Input() enablePrev = true;
    @Input() enableNext = true;
    @Input() disabledMonth: (date: Date) => boolean;
    @Input() disabledYear: (date: Date) => boolean;
    @Input() value: CandyDate;
    @Output() readonly valueChange = new EventEmitter();

    @Input() panelMode: PanelMode;
    @Output() readonly panelModeChange = new EventEmitter();

    @Output() readonly chooseDecade = new EventEmitter();

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { environment } from '../../../../environments/environment';
import { BindIoInner } from 'ngx-bind-io';

@BindIoInner()
@Component({
  selector: 'groups-frame',
  templateUrl: './groups-frame.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class GroupsFrameComponent {
  public apiUrl = environment.apiUrl;
  parentTitle$: Observable;
  title$: Observable;
  constructor(private _activatedRoute: ActivatedRoute) {
    this.parentTitle$ = this._activatedRoute.parent.parent.data.pipe(map(data => data && data.meta && data.meta.title));
    this.title$ = this._activatedRoute.data.pipe(map(data => data && data.meta && data.meta.title));
  }
}

import { Component, ChangeDetectionStrategy }  from "@angular/core";
import { NS_ROUTER_DIRECTIVES } from 'nativescript-angular/router';
import { COMMON_DIRECTIVES } from './../directives';
import { Link } from "./../link";

var menuLinks = [
    new Link("Declare Border", "/declareBorderComponent"),
];

@Component({
    selector: 'border-component',
    directives: [NS_ROUTER_DIRECTIVES, COMMON_DIRECTIVES],
    templateUrl: 'examples-list.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush
})

export class BorderExamplesComponent {
    public links: Array;

    constructor() {
        this.links = [];

        for (var i = 0; i < menuLinks.length; i++) {
            this.links.push(menuLinks[i]);
        }
    }
}