diff --git a/modules/@angular/examples/core/di/ts/contentChild/content_child_howto.ts b/modules/@angular/examples/core/di/ts/contentChild/content_child_howto.ts
new file mode 100644
index 0000000000..da2d0e9475
--- /dev/null
+++ b/modules/@angular/examples/core/di/ts/contentChild/content_child_howto.ts
@@ -0,0 +1,24 @@
+/**
+ * @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
+ */
+
+// #docregion HowTo
+import {AfterContentInit, Component, ContentChildren, Directive, QueryList} from '@angular/core';
+
+@Directive({selector: 'child-directive'})
+class ChildDirective {
+}
+
+@Directive({selector: 'someDir'})
+class SomeDir implements AfterContentInit {
+  @ContentChild(ChildDirective) contentChild;
+
+  ngAfterContentInit() {
+    // contentChild is set
+  }
+}
+// #enddocregion
\ No newline at end of file
diff --git a/modules/@angular/examples/core/di/ts/contentChildren/content_children_howto.ts b/modules/@angular/examples/core/di/ts/contentChildren/content_children_howto.ts
new file mode 100644
index 0000000000..48dbd72602
--- /dev/null
+++ b/modules/@angular/examples/core/di/ts/contentChildren/content_children_howto.ts
@@ -0,0 +1,24 @@
+/**
+ * @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
+ */
+
+// #docregion HowTo
+import {AfterContentInit, Component, ContentChildren, Directive, QueryList} from '@angular/core';
+
+@Directive({selector: 'child-directive'})
+class ChildDirective {
+}
+
+@Directive({selector: 'someDir'})
+class SomeDir implements AfterContentInit {
+  @ContentChildren(ChildDirective) contentChildren: QueryList<ChildDirective>;
+
+  ngAfterContentInit() {
+    // contentChildren is set
+  }
+}
+// #enddocregion
\ No newline at end of file
diff --git a/modules/@angular/examples/core/di/ts/viewChild/view_child_howto.ts b/modules/@angular/examples/core/di/ts/viewChild/view_child_howto.ts
new file mode 100644
index 0000000000..604846cf3a
--- /dev/null
+++ b/modules/@angular/examples/core/di/ts/viewChild/view_child_howto.ts
@@ -0,0 +1,24 @@
+/**
+ * @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
+ */
+
+// #docregion HowTo
+import {AfterViewInit, Component, Directive, QueryList, ViewChild} from '@angular/core';
+
+@Directive({selector: 'child-directive'})
+class ChildDirective {
+}
+
+@Component({selector: 'someCmp', templateUrl: 'someCmp.html'})
+class SomeCmp implements AfterViewInit {
+  @ViewChild(ChildDirective) child: ChildDirective;
+
+  ngAfterViewInit() {
+    // child is set
+  }
+}
+// #enddocregion
\ No newline at end of file
diff --git a/modules/@angular/examples/core/di/ts/viewChildren/view_children_howto.ts b/modules/@angular/examples/core/di/ts/viewChildren/view_children_howto.ts
new file mode 100644
index 0000000000..38f1f93d05
--- /dev/null
+++ b/modules/@angular/examples/core/di/ts/viewChildren/view_children_howto.ts
@@ -0,0 +1,24 @@
+/**
+ * @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
+ */
+
+// #docregion HowTo
+import {AfterViewInit, Component, Directive, QueryList, ViewChildren} from '@angular/core';
+
+@Directive({selector: 'child-directive'})
+class ChildDirective {
+}
+
+@Component({selector: 'someCmp', templateUrl: 'someCmp.html'})
+class SomeCmp implements AfterViewInit {
+  @ViewChildren(ChildDirective) viewChildren: QueryList<ChildDirective>;
+
+  ngAfterViewInit() {
+    // viewChildren is set
+  }
+}
+// #enddocregion
\ No newline at end of file