docs: add api doc to commonly queried elements

packages/examples/core/ts/change_detect/change-detection.ts

@@ -0,0 +1,96 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+/* tslint:disable:no-console  */
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Directive} from '@angular/core';
+
+
+// #docregion mark-for-check
+@Component({
+  selector: 'my-app',
+  template: `Number of ticks: {{numberOfTicks}}`,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+
+class AppComponent {
+  numberOfTicks = 0;
+
+  constructor(private ref: ChangeDetectorRef) {
+    setInterval(() => {
+      this.numberOfTicks++;
+      // require view to be updated
+      this.ref.markForCheck();
+    }, 1000);
+  }
+}
+// #enddocregion mark-for-check
+
+// #docregion detach
+class DataListProvider {
+  // in a real application the returned data will be different every time
+  get data() { return [1, 2, 3, 4, 5]; }
+}
+
+@Component({
+  selector: 'giant-list',
+  template: `
+      <li *ngFor="let d of dataProvider.data">Data {{d}}</li>
+    `,
+})
+class GiantList {
+  constructor(private ref: ChangeDetectorRef, private dataProvider: DataListProvider) {
+    ref.detach();
+    setInterval(() => { this.ref.detectChanges(); }, 5000);
+  }
+}
+
+@Component({
+  selector: 'app',
+  providers: [DataListProvider],
+  template: `
+      <giant-list><giant-list>
+    `,
+})
+class App {
+}
+// #enddocregion detach
+
+// #docregion reattach
+class DataProvider {
+  data = 1;
+  constructor() {
+    setInterval(() => { this.data = 2; }, 500);
+  }
+}
+
+
+@Component({selector: 'live-data', inputs: ['live'], template: 'Data: {{dataProvider.data}}'})
+class LiveData {
+  constructor(private ref: ChangeDetectorRef, private dataProvider: DataProvider) {}
+
+  set live(value: boolean) {
+    if (value) {
+      this.ref.reattach();
+    } else {
+      this.ref.detach();
+    }
+  }
+}
+
+@Component({
+  selector: 'app',
+  providers: [DataProvider],
+  template: `
+       Live Update: <input type="checkbox" [(ngModel)]="live">
+       <live-data [live]="live"><live-data>
+     `,
+})
+
+class App1 {
+  live = true;
+}
+// #enddocregion reattach