<div class="greeting">
  Hello, world!
</div>

// tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    ...
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictTemplates": true
  }
}

interface User {
  name: string;
  address: {
    city: string;
    state: string;
  }
}

<div *ngFor="let user of users">
  <h2>{{config.title}}</h2>
  <span>City: {{user.address.city}}</span>
</div>

// tsconfig.app.json
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [ ...],
  "include": [
    "src/**/*.d.ts"
  ],
  "angularCompilerOptions": {
    "enableIvy": false
  }
}

<button cdkCopyToClipboard="👋 You copied me!">Click to copy</button>

constructor(private clipboard: Clipboard) {}

copyId(id: string) {
  this.clipboard.copy(id)
}

<google-map
  height="500px"
  width="100%"
  [zoom]="zoom"
  [center]="center"
  [options]="options"
  (mapClick)="click($event)"
>
  <map-marker
    #markerElem
    *ngFor="let marker of markers"
    [position]="marker.position"
    [label]="marker.label"
    [title]="marker.title"
    [options]="marker.options"
    (mapClick)="openInfo(markerElem, marker.info)"
  >
  </map-marker>

  <map-info-window>{{ infoContent }}</map-info-window>
</google-map>

@ViewChild(ChildDirective) child: ChildDirective;

@ViewChild(ChildDirective, { static: false }) child: ChildDirective; // similar to above code

TestBed.get(ChangeDetectorRef) // returns any

TestBed.inject(ChangeDetectorRef) // returns ChangeDetectorRef

@NgModule({
  imports: [MatDialogModule],
  declarations: [AppComponent, ExampleDialogComponent],
  entryComponents: [ExampleDialogComponent],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

const routes: Routes = [
  {
    path: 'comic/:comicId',
    component: withRoute(ComicComponent)
  }
];

import {Component, Input, ɵrenderComponent as renderComponent, Pipe, ɵmarkDirty as markDirty} from '@angular/core';
import '@angular/compiler';

@Component({...})
class ChildComponent { ... }

@Pipe({ name: 'capitalize' })
class CapitalizePipe { ... }

@Component({
  selector: 'app-cmp',
  template: '<zippy title="Toggle">{{ label | capitalize }}</zippy>',
  deps: [ChildComponent, CapitalizePipe]
})
class AppComponent {
  label = 'hello world';
}

renderComponent(AppComponent);

import {Component, Input, ɵrenderComponent as renderComponent, Pipe, ɵmarkDirty as markDirty} from '@angular/core';
import '@angular/compiler';

@Component({
  selector: 'zippy',
  template: `
    <button (click)="toggle()">
      {{title}}
    </button>
    <div [hidden]="!show">
      <ng-content></ng-content>
    </div>
  `,
})
class ChildComponent {
  @Input() title: string;
  show = false;
  toggle() {
    this.show = !this.show;
    markDirty(this);
  }
}

...