docs: create file to improve docs (#45828)

Move ZippyComponent and ZippyContentDirective to example-zippy.component.ts file to improve readability of the docs

PR Close #45828

aio/content/examples/content-projection/src/app/example-zippy.component.ts

@@ -0,0 +1,24 @@
+import { Component, Directive, Input, TemplateRef, ContentChild} from '@angular/core';
+
+let nextId = 0;
+
+// #docregion zippycontentdirective
+@Directive({
+  selector: '[appExampleZippyContent]'
+})
+export class ZippyContentDirective {
+  constructor(public templateRef: TemplateRef<unknown>) {}
+}
+// #enddocregion zippycontentdirective
+
+@Component({
+  selector: 'app-example-zippy',
+  templateUrl: 'example-zippy.template.html',
+})
+export class ZippyComponent {
+  contentId = `zippy-${nextId++}`;
+  @Input() expanded = false;
+  // #docregion contentchild
+  @ContentChild(ZippyContentDirective) content!: ZippyContentDirective;
+  // #enddocregion contentchild
+}