docs: remove Component and Directives (#45828)

Move all content to example-zippy.component.ts

PR Close #45828

Author: alefra86

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

@@ -1,42 +1,7 @@
-import { Component, Directive, Input, TemplateRef, ContentChild, HostBinding, HostListener } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html'
 })
 export class AppComponent {}
-
-@Directive({
-  selector: 'button[appExampleZippyToggle]',
-})
-export class ZippyToggleDirective {
-  @HostBinding('attr.aria-expanded') ariaExpanded = this.zippy.expanded;
-  @HostBinding('attr.aria-controls') ariaControls = this.zippy.contentId;
-  @HostListener('click') toggleZippy() {
-    this.zippy.expanded = !this.zippy.expanded;
-  }
-  constructor(public zippy: ZippyComponent) {}
-}
-
-// #docregion zippycontentdirective
-@Directive({
-  selector: '[appExampleZippyContent]'
-})
-export class ZippyContentDirective {
-  constructor(public templateRef: TemplateRef<unknown>) {}
-}
-// #enddocregion zippycontentdirective
-
-let nextId = 0;
-
-@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
-}