@Directive({
    selector: '[autofocus]'
  })
  export class AutofocusDirective {
    private focus = true;

    constructor(private el: ElementRef) {
    }

    ngOnInit() {
      if (this.focus) {

        window.setTimeout(() => {
          this.el.nativeElement.focus();
        });
      }
    }

    @Input() set autofocus(condition: boolean) {
      this.focus = condition;
    }
  }

@Component({
    selector: 'app-hello',
    template: '<div>hello world</div>'
  })
  export class HelloComponent {

    constructor() {
    }
  }

@Pipe({ name: 'upper' })
  export class UpperPipe implements PipeTransform {
    transform(value: any, args: any[] = null): any {
      return value ? value.toUpperCase() : '';
    }
  }
  // usage: {{ 'mah' | upper }}

import {
    Component,
    Input,
    Output,
    EventEmitter
  } from '@angular/core';

  @Component({
    selector: 'child-component',
    template: '<div>child</div>'
  }
  export class ItemOutputComponent {
    @Input() item = ''
    @Output() newItemEvent = new EventEmitter<string>();

    addNewItem(value: string) {
      // newItemEvent event triggers parent callback
      this.newItemEvent.emit(value);
    }
  }

<parent-component>
    <child-component item="test" (newItemEvent)="callback($event)"></child-component>
  </parent-component>

<ul>
    <li *ngFor="let item of items">{{item}}</li>
  </ul>

<ul>
    <li *ngIf="valid">{{item}}</li>
  </ul>

<div [ngClass]="'first second'></div>
  <div [ngClass]="['first', 'second']></div>
  <div [ngClass]="{'first': true, 'second': true, 'third': false}></div>
  <div [ngClass]="stringExp|arrayExp|objExp></div>
  <div [ngClass]="{'class1 class2 class3' : true}></div>
  <div [ngClass]="{ slected: addUserButtonClicked }></div>
  <div [ngClass]="[invalidChanges ? 'error-block' : 'info-block']></div>

<some-element [ngStyle]="{'font-style': styleExp}">...</some-element>
  <some-element [ngStyle]="{'max-width.px': widthExp}">...</some-element>
  <some-element [ngStyle]="objExp">...</some-element>

<!-- if switch_expression is set to 'match'
  then some-element will be displayed -->
  <container-element [ngSwitch]="switch_expression">
    <!-- the same view can be shown in more than one case -->
    <some-element *ngSwitchCase="'match'">...</some-element>
    <some-element1 *ngSwitchCase="match_expression_2">...</some-element1>
    <some-other-element *ngSwitchCase="match_expression_3">...</some-other-element>
    <!--default case when there are no matches -->
    <some-element *ngSwitchDefault>...</some-element>
  </container-element>

  DatePipe: Formats a date value according to locale rules.
  UpperCasePipe: Transforms text to all upper case.
  LowerCasePipe: Transforms text to all lower case.
  CurrencyPipe: Transforms a number to a currency string, formatted according to locale rules.
  DecimalPipe: Transforms a number into a string with a decimal point, formatted according to locale rules.
  PercentPipe: Transforms a number to a percentage string, formatted according to locale rules.

@Injectable()
  export class ApiService {
      ...
  }

import {AfterViewInit, Component, Directive, ViewChild} from '@angular/core';

  @Directive({selector: 'child-directive'})
  class ChildDirective {
  }

  @Component({selector: 'someCmp', template: 'someCmp.html'})
  class SomeCmp implements AfterViewInit {
    @ViewChild(ChildDirective) child!: ChildDirective;

    ngAfterViewInit() {
      // child is set
    }
  }

<app-parent>
        <strong class="app">Developer</strong>
        <strong class="app1">app 1 content</strong>
    </app-parent>

<div>
    <span>Hello, I am </span>
    <ng-content select=".app"></ng-content>
  </div>

  <div>
    <ng-content select=".app1"></ng-content>
  </div>

import {AfterContentInit, Component, Directive, ViewChild} from '@angular/core';

  @Directive({selector: 'child-directive'})
  class ChildDirective {
  }

  @Component({
    selector: 'someCmp',
    template: '<div><ng-content></ng-content></div>'
  })
  class SomeCmp implements AfterContentInit {
    @ContentChild(ChildDirective) child!: ChildDirective;

    ngAfterContentInit() {
      // Content is set
    }
  }

<ng-template #ref>html content</ng-template>

<ng-container *ngIf="true">
  <!-- here ng-container will not be added to dom -->
      <div>test</div>
  </ng-container>