const template = "
{{hero.name}}
";

@Component({
  selector: "app-hero",
  template: template,
})
export class HeroComponent {
  @Input() hero: Hero;
}

@Input() set appUnless(condition: boolean) {
  if (!condition && !this.hasView) {
    this.viewContainer.createEmbeddedView(this.templateRef);
    this.hasView = true;
  } else if (condition && this.hasView) {
    this.viewContainer.clear();
    this.hasView = false;
  }
}

import { Component, Input } from "@angular/core";

import { AdComponent } from "./ad.component";

@Component({
  template: `
    

      
{{ data.headline }}

      {{ data.body }}
    
  `,
})
export class HeroJobAdComponent implements AdComponent {
  @Input() data: any;
}

export class StoutItemComponent {
  @Input() item!: Item;
}

const template = "
{{hero.name}}
";

@Component({
  selector: "app-hero",
  template: template + "
{{hero.title}}
",
})
export class HeroComponent {
  @Input() hero: Hero;
}

import { Component, Input } from "@angular/core"; // First, import Input
export class ItemDetailComponent {
  @Input() item = ""; // decorate the property with @Input()
}

@Directive({
  selector: "[appForbiddenName]",
  providers: [
    {
      provide: NG_VALIDATORS,
      useExisting: ForbiddenValidatorDirective,
      multi: true,
    },
  ],
})
export class ForbiddenValidatorDirective
  implements Validator
{
  @Input("appForbiddenName") forbiddenName = "";

  validate(
    control: AbstractControl
  ): ValidationErrors | null {
    return this.forbiddenName
      ? forbiddenNameValidator(
          new RegExp(this.forbiddenName, "i")
        )(control)
      : null;
  }
}

export type Loaded = { type: "loaded"; data: T };
export type Loading = { type: "loading" };
export type LoadingState = Loaded | Loading;
export class IfLoadedDirective {
  @Input("ifLoaded") set state(state: LoadingState) {}
  static ngTemplateGuard_state(
    dir: IfLoadedDirective,
    expr: LoadingState
  ): expr is Loaded {
    return true;
  }
}

export interface Person {
  name: string;
}

@Component({
  template: `
{{ state.data }}
`,
})
export class AppComponent {
  state: LoadingState;
}

import {
  Directive,
  ElementRef,
  Input,
  OnChanges,
} from "@angular/core";

@Directive({ selector: "[highlight]" })
/**
 * Set backgroundColor for the attached element to highlight color
 * and set the element's customProperty to true
 */
export class HighlightDirective implements OnChanges {
  defaultColor = "rgb(211, 211, 211)"; // lightgray

  @Input("highlight") bgColor = "";

  constructor(private el: ElementRef) {
    el.nativeElement.style.customProperty = true;
  }

  ngOnChanges() {
    this.el.nativeElement.style.backgroundColor =
      this.bgColor || this.defaultColor;
  }
}

import {
  Directive,
  ElementRef,
  HostListener,
  Input,
} from "@angular/core";

@Directive({
  selector: "[appHighlight]",
})
export class HighlightDirective {
  @Input("appHighlight") highlightColor = "";

  private el: HTMLElement;

  constructor(el: ElementRef) {
    this.el = el.nativeElement;
  }

  @HostListener("mouseenter") onMouseEnter() {
    this.highlight(this.highlightColor || "cyan");
  }

  @HostListener("mouseleave") onMouseLeave() {
    this.highlight("");
  }

  private highlight(color: string) {
    this.el.style.backgroundColor = color;
  }
}

@Input() appHighlight = '';

import {
  Component,
  EventEmitter,
  HostBinding,
  Input,
  Output,
} from "@angular/core";
import {
  animate,
  state,
  style,
  transition,
  trigger,
} from "@angular/animations";

@Component({
  selector: "my-popup",
  template: `
    Popup: {{ message }}
    ✖
  `,
  animations: [
    trigger("state", [
      state(
        "opened",
        style({ transform: "translateY(0%)" })
      ),
      state(
        "void, closed",
        style({ transform: "translateY(100%)", opacity: 0 })
      ),
      transition("* => *", animate("100ms ease-in")),
    ]),
  ],
  styles: [
    `
      :host {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: #009cff;
        height: 48px;
        padding: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid black;
        font-size: 24px;
      }

      button {
        border-radius: 50%;
      }
    `,
  ],
})
export class PopupComponent {
  @HostBinding("@state")
  state: "opened" | "closed" = "closed";

  @Input()
  get message(): string {
    return this._message;
  }
  set message(message: string) {
    this._message = message;
    this.state = "opened";
  }
  private _message = "";

  @Output()
  closed = new EventEmitter();
}

import { Component, OnInit, Input } from "@angular/core";
import { Hero } from "../hero";

@Component({
  selector: "app-hero-detail",
  templateUrl: "./hero-detail.component.html",
  styleUrls: ["./hero-detail.component.css"],
})
export class HeroDetailComponent implements OnInit {
  @Input() hero?: Hero;

  constructor() {}

  ngOnInit() {}
}

export class SizerComponent {
  @Input() size!: number | string;
  @Output() sizeChange = new EventEmitter();

  dec() {
    this.resize(-1);
  }
  inc() {
    this.resize(+1);
  }

  resize(delta: number) {
    this.size = Math.min(
      40,
      Math.max(8, +this.size + delta)
    );
    this.sizeChange.emit(this.size);
  }
}

@Component({
  selector: "app-hero-bio",
  template: ` 
{{ hero.name }}
    
    `,
  providers: [HeroCacheService],
})
export class HeroBioComponent implements OnInit {
  @Input() heroId = 0;

  constructor(private heroCache: HeroCacheService) {}

  ngOnInit() {
    this.heroCache.fetchCachedHero(this.heroId);
  }

  get hero() {
    return this.heroCache.hero;
  }
}

@Component({
  selector: 'app-typical',
  template: '
A typical component for {{data.name}}
'
})
export class TypicalComponent {
  @Input() data: TypicalData;
  constructor(private someService: SomeService) { ... }
}

@Input() hero?: Hero;

@Component({
  selector: "app-hero",
  template: "
{{hero.name}}
",
})
export class HeroComponent {
  @Input() hero: Hero;
}

export class AdBannerComponent
  implements OnInit, OnDestroy
{
  @Input() ads: AdItem[] = [];
  currentAdIndex = -1;
  @ViewChild(AdDirective, { static: true })
  adHost!: AdDirective;
  interval: number | undefined;

  constructor(
    private componentFactoryResolver: ComponentFactoryResolver
  ) {}

  ngOnInit() {
    this.loadComponent();
    this.getAds();
  }

  ngOnDestroy() {
    clearInterval(this.interval);
  }

  loadComponent() {
    this.currentAdIndex =
      (this.currentAdIndex + 1) % this.ads.length;
    const adItem = this.ads[this.currentAdIndex];

    const componentFactory =
      this.componentFactoryResolver.resolveComponentFactory(
        adItem.component
      );

    const viewContainerRef = this.adHost.viewContainerRef;
    viewContainerRef.clear();

    const componentRef =
      viewContainerRef.createComponent(
        componentFactory
      );
    componentRef.instance.data = adItem.data;
  }

  getAds() {
    this.interval = setInterval(() => {
      this.loadComponent();
    }, 3000);
  }
}

@Input() defaultColor = '';

@Component(...)
class MyDialog {
  @Input() content: string;
}

import {
  Directive,
  Input,
  TemplateRef,
  ViewContainerRef,
} from "@angular/core";

/**
 * Add the template content to the DOM unless the condition is true.
 */
@Directive({ selector: "[appUnless]" })
export class UnlessDirective {
  private hasView = false;

  constructor(
    private templateRef: TemplateRef,
    private viewContainer: ViewContainerRef
  ) {}

  @Input() set appUnless(condition: boolean) {
    if (!condition && !this.hasView) {
      this.viewContainer.createEmbeddedView(
        this.templateRef
      );
      this.hasView = true;
    } else if (condition && this.hasView) {
      this.viewContainer.clear();
      this.hasView = false;
    }
  }
}

import {
  Component,
  EventEmitter,
  HostBinding,
  Input,
  Output,
} from "@angular/core";
import {
  animate,
  state,
  style,
  transition,
  trigger,
} from "@angular/animations";

@Component({
  selector: "my-popup",
  template: `
    Popup: {{ message }}
    ✖
  `,
  animations: [
    trigger("state", [
      state(
        "opened",
        style({ transform: "translateY(0%)" })
      ),
      state(
        "void, closed",
        style({ transform: "translateY(100%)", opacity: 0 })
      ),
      transition("* => *", animate("100ms ease-in")),
    ]),
  ],
  styles: [
    `
      :host {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: #009cff;
        height: 48px;
        padding: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid black;
        font-size: 24px;
      }

      button {
        border-radius: 50%;
      }
    `,
  ],
})
export class PopupComponent {
  @HostBinding("@state")
  state: "opened" | "closed" = "closed";

  @Input()
  get message(): string {
    return this._message;
  }
  set message(message: string) {
    this._message = message;
    this.state = "opened";
  }
  private _message = "";

  @Output()
  closed = new EventEmitter();
}

export class ItemOutputComponent {
  @Output() newItemEvent = new EventEmitter();

  addNewItem(value: string) {
    this.newItemEvent.emit(value);
  }
}

export class SizerComponent {
  @Input() size!: number | string;
  @Output() sizeChange = new EventEmitter();

  dec() {
    this.resize(-1);
  }
  inc() {
    this.resize(+1);
  }

  resize(delta: number) {
    this.size = Math.min(
      40,
      Math.max(8, +this.size + delta)
    );
    this.sizeChange.emit(this.size);
  }
}

@Output() newItemEvent = new EventEmitter();

@Component({
  selector: "app-zippy",
  template: `
    

      
Toggle
      

        
      
    
  `,
})
export class ZippyComponent {
  visible = true;
  @Output() open = new EventEmitter();
  @Output() close = new EventEmitter();

  toggle() {
    this.visible = !this.visible;
    if (this.visible) {
      this.open.emit(null);
    } else {
      this.close.emit(null);
    }
  }
}

test("loads items eventually", async () => {
  // Click button
  fireEvent.click(getByText(node, "Load"));

  // Wait for page to update with query text
  const items = await findByText(node, /Item #[0-9]: /);
  expect(items).toHaveLength(10);
});

test("movie title appears", async () => {
  // element is initially not present...

  // wait for appearance inside an assertion
  await waitFor(() => {
    expect(getByText("the lion king")).toBeInTheDocument();
  });
});

const puppeteer = require("puppeteer");
const {
  getDocument,
  queries,
  waitFor,
} = require("pptr-testing-library");

const { getByTestId, getByLabelText } = queries;

const browser = await puppeteer.launch();
const page = await browser.newPage();

// Grab ElementHandle for document
const $document = await getDocument(page);
// Your favorite query methods are available
const $form = await getByTestId($document, "my-form");
// returned elements are Puppeteer ElementHandles too!
const $email = await getByLabelText($form, "Email");
// interact with puppeteer like usual
await $email.type("pptr@example.com");
// waiting works too!
await waitFor(() => getByText("Loading..."));

await fireEvent.click(getByText("Click me"));

const handler = jest.fn();

const {
  container: { firstChild: input },
} = render();

fireEvent.input(input, { target: { value: "a" } });

expect(handler).toHaveBeenCalledTimes(1);

const ref = createRef();
const spy = jest.fn();

render(
  h(elementType, {
    onDblClick: spy,
    ref,
  })
);

fireEvent["onDblClick"](ref.current);

expect(spy).toHaveBeenCalledTimes(1);

const { getByLabelText, queryAllByTestId } =
  render(Component);

// With options.
const { results } = render(YourComponent, {
  target: MyTarget,
  props: { myProp: "value" },
});

// Props only.
const { results } = render(YourComponent, {
  myProp: "value",
});

const cb = jest.fn();


function Counter() {
  useEffect(cb);


  const [count, setCount] = useState(0);


  return  setCount(count + 1)}>{count};
}


const { container: { firstChild: buttonNode }, } = render();


// Clear the first call to useEffect that the initial render triggers.
cb.mockClear();


// Fire event Option 1.
fireEvent.click(buttonNode);


// Fire event Option 2.
fireEvent(
buttonNode,
new Event('MouseEvent', {
  bubbles: true,
  cancelable: true,
  button: 0,
});


expect(buttonNode).toHaveTextContent('1');
expect(cb).toHaveBeenCalledTimes(1);

const table = document.createElement("table");

const { container } = render(TableBody, {
  props,
  container: document.body.appendChild(table),
});

const { getByDataCy } = render();

expect(getByDataCy("my-component")).toHaveTextContent(
  "Hello"
);

test("has correct welcome text", () => {
  render();
  expect(screen.getByRole("heading")).toHaveTextContent(
    "Welcome, John Doe"
  );
});

render();

test("handles click correctly", () => {
  render();

  userEvent.click(screen.getByText("Check"));
  expect(screen.getByLabelText("Check")).toBeChecked();
});

// Example, a function to traverse table contents
import * as tableQueries from "my-table-query-library";
import { queries } from "@testing-library/react";

const { getByRowColumn, getByText } = render(, {
  queries: { ...queries, ...tableQueries },
});

test("has correct input value", () => {
  render();
  expect(screen.getByRole("form")).toHaveFormValues({
    firstName: "John",
    lastName: "Doe",
  });
});

const table = document.createElement("table");

const { container } = render(, {
  container: document.body.appendChild(table),
});

// @testing-library/react
const { container } = render();
const foo = container.querySelector('[data-foo="bar"]');

const { getByLabelText, queryAllByTestId } = render(
  
);

@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  styleUrls: ["app.component.css"],
  animations: [
    slideInAnimation,
    // animation triggers go here
  ],
})
export class AppComponent {
  @HostBinding("@.disabled")
  public animationsDisabled = false;
}

import { Component } from "@angular/core";
import { FormBuilder } from "@angular/forms";

@Component({
  selector: "app-profile-editor",
  templateUrl: "./profile-editor.component.html",
  styleUrls: ["./profile-editor.component.css"],
})
export class ProfileEditorComponent {
  profileForm = this.fb.group({
    firstName: [""],
    lastName: [""],
    address: this.fb.group({
      street: [""],
      city: [""],
      state: [""],
      zip: [""],
    }),
  });

  constructor(private fb: FormBuilder) {}
}

const template = "
{{hero.name}}
";

@Component({
  selector: "app-hero",
  template: template,
})
export class HeroComponent {
  @Input() hero: Hero;
}

import { Component } from "@angular/core";

@Component({
  selector: "app-shipping",
  templateUrl: "./shipping.component.html",
  styleUrls: ["./shipping.component.css"],
})
export class ShippingComponent {
  constructor() {}
}

@Component({
  selector: "app-hero-list",
  templateUrl: "./hero-list.component.html",
  providers: [HeroService],
})
export class HeroListComponent implements OnInit {
  /* . . . */
}

@Component({
  selector: "app-hero-of-the-month",
  templateUrl: "./hero-of-the-month.component.html",
  // TODO: move this aliasing, `useExisting` provider to the AppModule
  providers: [
    { provide: MinimalLogger, useExisting: LoggerService },
  ],
})
export class HeroOfTheMonthComponent {
  logs: string[] = [];
  constructor(logger: MinimalLogger) {
    logger.logInfo("starting up");
  }
}

import { Component } from "@angular/core";
import { FormGroup, FormControl } from "@angular/forms";

@Component({
  selector: "app-profile-editor",
  templateUrl: "./profile-editor.component.html",
  styleUrls: ["./profile-editor.component.css"],
})
export class ProfileEditorComponent {
  profileForm = new FormGroup({
    firstName: new FormControl(""),
    lastName: new FormControl(""),
  });
}

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  animations: [
    slideInAnimation
    // animation triggers go here
  ]
})

import { Component } from "@angular/core";

@Component({
  selector: "app-cart",
  templateUrl: "./cart.component.html",
  styleUrls: ["./cart.component.css"],
})
export class CartComponent {
  constructor() {}
}

import { Attribute, Component } from "@angular/core";

@Component({
  selector: "app-my-input-with-attribute-decorator",
  template: "
The type of the input is: {{ type }}
",
})
export class MyInputWithAttributeDecoratorComponent {
  constructor(@Attribute("type") public type: string) {}
}

import { Component, Input } from "@angular/core";

import { AdComponent } from "./ad.component";

@Component({
  template: `
    

      
{{ data.headline }}

      {{ data.body }}
    
  `,
})
export class HeroJobAdComponent implements AdComponent {
  @Input() data: any;
}

const template = "
{{hero.name}}
";

@Component({
  selector: "app-hero",
  template: template + "
{{hero.title}}
",
})
export class HeroComponent {
  @Input() hero: Hero;
}

// BAD CODE - title is private
@Component({
  selector: "app-root",
  template: "
{{title}}
",
})
export class AppComponent {
  private title = "My App"; // Bad
}

@Component({
  selector: "my-component",
  template:
    ' {{person.name}} lives on {{address.street}} ',
})
class MyComponent {
  person?: Person;
  address?: Address;

  setData(person: Person, address: Address) {
    this.person = person;
    this.address = address;
  }
}

@Component({
  selector: "app-hero-bios-and-contacts",
  template: ` 
      
    
    
      
    
    
      
    `,
  providers: [HeroService],
})
export class HeroBiosAndContactsComponent {
  constructor(logger: LoggerService) {
    logger.logInfo("Creating HeroBiosAndContactsComponent");
  }
}

import { Component } from "@angular/core";
@Component({
  selector: "hello-world-bindings",
  templateUrl: "./hello-world-bindings.component.html",
})
export class HelloWorldBindingsComponent {
  fontColor = "blue";
  sayHelloId = 1;
  canClick = false;
  message = "Hello, World";
  sayMessage() {
    alert(this.message);
  }
}

import { Component } from "@angular/core";
@Component({
  template: `
    
About
    
Quote of the day:
    
  `,
})
export class AboutComponent {}

@Component({
  selector: "async-observable-pipe",
  template: `

    observable|async: Time: {{ time | async }}
  
`,
})
export class AsyncObservablePipeComponent {
  time = new Observable((observer) => {
    setInterval(
      () => observer.next(new Date().toString()),
      1000
    );
  });
}

@Component({
  selector: "my-component",
  template:
    ' {{person.name}} lives on {{address!.street}} ',
})
class MyComponent {
  person?: Person;
  address?: Address;

  setData(person: Person, address: Address) {
    this.person = person;
    this.address = address;
  }
}

@Component({
  selector: "app-sorted-heroes",
  template: `

    {{ hero.name }}
  
`,
  providers: [HeroService],
})
export class SortedHeroesComponent extends HeroesBaseComponent {
  constructor(heroService: HeroService) {
    super(heroService);
  }

  protected afterGetHeroes() {
    this.heroes = this.heroes.sort((h1, h2) => {
      return h1.name < h2.name
        ? -1
        : h1.name > h2.name
        ? 1
        : 0;
    });
  }
}

import { Router, NavigationStart } from "@angular/router";
import { filter } from "rxjs/operators";

@Component({
  selector: "app-routable",
  template: "Routable1Component template",
})
export class Routable1Component implements OnInit {
  navStart: Observable;

  constructor(router: Router) {
    // Create a new Observable that publishes only the NavigationStart event
    this.navStart = router.events.pipe(
      filter((evt) => evt instanceof NavigationStart)
    ) as Observable;
  }

  ngOnInit() {
    this.navStart.subscribe(() =>
      console.log("Navigation Started!")
    );
  }
}

export type Loaded = { type: "loaded"; data: T };
export type Loading = { type: "loading" };
export type LoadingState = Loaded | Loading;
export class IfLoadedDirective {
  @Input("ifLoaded") set state(state: LoadingState) {}
  static ngTemplateGuard_state(
    dir: IfLoadedDirective,
    expr: LoadingState
  ): expr is Loaded {
    return true;
  }
}

export interface Person {
  name: string;
}

@Component({
  template: `
{{ state.data }}
`,
})
export class AppComponent {
  state: LoadingState;
}

import { Component } from "@angular/core";

import { Observable, interval } from "rxjs";
import { map, take } from "rxjs/operators";

@Component({
  selector: "app-hero-async-message",
  template: ` 
Async Hero Message and AsyncPipe
    
Message: {{ message$ | async }}
    Resend`,
})
export class HeroAsyncMessageComponent {
  message$: Observable;

  private messages = [
    "You are my hero!",
    "You are the best hero!",
    "Will you be my hero?",
  ];

  constructor() {
    this.message$ = this.getResendObservable();
  }

  resend() {
    this.message$ = this.getResendObservable();
  }

  private getResendObservable() {
    return interval(500).pipe(
      map((i) => this.messages[i]),
      take(this.messages.length)
    );
  }
}

@Component({
  selector: 'app-movie-list',
  templateUrl: './movie-list.component.html',
  styleUrls: [ './movie-list.component.css' ],
})

import { FormGroup } from "@angular/forms";

@Component({
  selector: "my-component",
  template: "MyComponent Template",
})
export class MyComponent implements OnInit {
  nameChangeLog: string[] = [];
  heroForm!: FormGroup;

  ngOnInit() {
    this.logNameChange();
  }
  logNameChange() {
    const nameControl = this.heroForm.get("name");
    nameControl?.valueChanges.forEach((value: string) =>
      this.nameChangeLog.push(value)
    );
  }
}

import { Component } from "@angular/core";
import { FormControl } from "@angular/forms";

@Component({
  selector: "app-name-editor",
  templateUrl: "./name-editor.component.html",
  styleUrls: ["./name-editor.component.css"],
})
export class NameEditorComponent {
  name = new FormControl("");
}

@Component({
  selector: "app-open-close",
  animations: [
    trigger("openClose", [
      // ...
    ]),
  ],
  templateUrl: "open-close.component.html",
  styleUrls: ["open-close.component.css"],
})
export class OpenCloseComponent {
  onAnimationEvent(event: AnimationEvent) {}
}

@Component({
  template: `
    

      
      
Hello, {{ customer }}
      

        
        

          {{ customer.value }}
        
      
    
  `,
})
class AppComponent {
  customers = [{ value: "Ebony" }, { value: "Chiho" }];
  customer = "Padma";
}

@Component({
/* . . . */
  providers: [UserService]
})

@Component({
  selector: "app-no-encapsulation",
  template: `
    
None
    
No encapsulation
  `,
  styles: ["h2, .none-message { color: red; }"],
  encapsulation: ViewEncapsulation.None,
})
export class NoEncapsulationComponent {}

@Component({
  selector: "my-component",
  template:
    ' {{person.addresss.street}} ',
})
class MyComponent {
  person?: Person;
}

import { Component } from "@angular/core";
import { FormGroup, FormControl } from "@angular/forms";

@Component({
  selector: "app-profile-editor",
  templateUrl: "./profile-editor.component.html",
  styleUrls: ["./profile-editor.component.css"],
})
export class ProfileEditorComponent {
  profileForm = new FormGroup({
    firstName: new FormControl(""),
    lastName: new FormControl(""),
    address: new FormGroup({
      street: new FormControl(""),
      city: new FormControl(""),
      state: new FormControl(""),
      zip: new FormControl(""),
    }),
  });
}

@Component({
  selector: "app-unsorted-heroes",
  template: `

    {{ hero.name }}
  
`,
  providers: [HeroService],
})
export class HeroesBaseComponent implements OnInit {
  constructor(private heroService: HeroService) {}

  heroes: Hero[] = [];

  ngOnInit() {
    this.heroes = this.heroService.getAllHeroes();
    this.afterGetHeroes();
  }

  // Post-process heroes in derived class override.
  protected afterGetHeroes() {}
}

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-heroes",
  templateUrl: "./heroes.component.html",
  styleUrls: ["./heroes.component.css"],
})
export class HeroesComponent implements OnInit {
  constructor() {}

  ngOnInit() {}
}

@Component({
  selector: "app-hero-contact",
  template: ` 

    Phone #: {{ phoneNumber }}
    !!!
  
`,
})
export class HeroContactComponent {
  hasLogger = false;

  constructor(
    @Host() // limit to the host component's instance of the HeroCacheService
    private heroCache: HeroCacheService,

    @Host() // limit search for logger; hides the application-wide logger
    @Optional() // ok if the logger doesn't exist
    private loggerService?: LoggerService
  ) {
    if (loggerService) {
      this.hasLogger = true;
      loggerService.logInfo(
        "HeroContactComponent can log!"
      );
    }
  }

  get phoneNumber() {
    return this.heroCache.hero.phone;
  }
}

import {
  Component,
  EventEmitter,
  HostBinding,
  Input,
  Output,
} from "@angular/core";
import {
  animate,
  state,
  style,
  transition,
  trigger,
} from "@angular/animations";

@Component({
  selector: "my-popup",
  template: `
    Popup: {{ message }}
    ✖
  `,
  animations: [
    trigger("state", [
      state(
        "opened",
        style({ transform: "translateY(0%)" })
      ),
      state(
        "void, closed",
        style({ transform: "translateY(100%)", opacity: 0 })
      ),
      transition("* => *", animate("100ms ease-in")),
    ]),
  ],
  styles: [
    `
      :host {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: #009cff;
        height: 48px;
        padding: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid black;
        font-size: 24px;
      }

      button {
        border-radius: 50%;
      }
    `,
  ],
})
export class PopupComponent {
  @HostBinding("@state")
  state: "opened" | "closed" = "closed";

  @Input()
  get message(): string {
    return this._message;
  }
  set message(message: string) {
    this._message = message;
    this.state = "opened";
  }
  private _message = "";

  @Output()
  closed = new EventEmitter();
}

import { Component, OnInit, Input } from "@angular/core";
import { Hero } from "../hero";

@Component({
  selector: "app-hero-detail",
  templateUrl: "./hero-detail.component.html",
  styleUrls: ["./hero-detail.component.css"],
})
export class HeroDetailComponent implements OnInit {
  @Input() hero?: Hero;

  constructor() {}

  ngOnInit() {}
}

import { Component } from "@angular/core";

@Component({
  selector: "app-zippy-multislot",
  template: `
    
Multi-slot content projection
    Default:
    
    Question:
    
  `,
})
export class ZippyMultislotComponent {}

@Component({
  selector: "app-hero-bios",
  template: ` 
    
    `,
  providers: [HeroService],
})
export class HeroBiosComponent {}

@Component({
  selector: "app-nav-bar",
  template: ` `,
})
export class NavBarComponent {
  navStyle = "font-size: 1.2rem; color: cornflowerblue;";
  linkStyle = "underline";
  activeLinkStyle = "overline";
  /* . . . */
}

import { Component, Inject } from "@angular/core";

import { DateLoggerService } from "./date-logger.service";
import { Hero } from "./hero";
import { HeroService } from "./hero.service";
import { LoggerService } from "./logger.service";
import { MinimalLogger } from "./minimal-logger.service";
import { RUNNERS_UP, runnersUpFactory } from "./runners-up";

@Component({
  selector: "app-hero-of-the-month",
  templateUrl: "./hero-of-the-month.component.html",
  providers: [
    { provide: Hero, useValue: someHero },
    { provide: TITLE, useValue: "Hero of the Month" },
    { provide: HeroService, useClass: HeroService },
    { provide: LoggerService, useClass: DateLoggerService },
    { provide: MinimalLogger, useExisting: LoggerService },
    {
      provide: RUNNERS_UP,
      useFactory: runnersUpFactory(2),
      deps: [Hero, HeroService],
    },
  ],
})
export class HeroOfTheMonthComponent {
  logs: string[] = [];

  constructor(
    logger: MinimalLogger,
    public heroOfTheMonth: Hero,
    @Inject(RUNNERS_UP) public runnersUp: string,
    @Inject(TITLE) public title: string
  ) {
    this.logs = logger.logs;
    logger.logInfo("starting up");
  }
}

@Component({
  template: ` 
Something Yellow
    
The Default (Gray)
    
No Highlight
    `,
})
class TestComponent {}

@Component({
  selector: "app-shadow-dom-encapsulation",
  template: `
    
ShadowDom
    

      Shadow DOM encapsulation
    
    
    
  `,
  styles: ["h2, .shadow-message { color: blue; }"],
  encapsulation: ViewEncapsulation.ShadowDom,
})
export class ShadowDomEncapsulationComponent {}

import { Component } from "@angular/core";

@Component({
  selector: "app-power-boost-calculator",
  template: `
    
Power Boost Calculator
    Normal power: 
    
    Boost factor: 
    
    

      Super Hero Power:
      {{ power | exponentialStrength: factor }}
    
  `,
  styles: ["input {margin: .5rem 0;}"],
})
export class PowerBoostCalculatorComponent {
  power = 5;
  factor = 1;
}

import { Component } from "@angular/core";
import { FormBuilder } from "@angular/forms";

import { CartService } from "../cart.service";

@Component({
  selector: "app-cart",
  templateUrl: "./cart.component.html",
  styleUrls: ["./cart.component.css"],
})
export class CartComponent {
  items = this.cartService.getItems();
  checkoutForm = this.formBuilder.group({
    name: "",
    address: "",
  });
  constructor(
    private cartService: CartService,
    private formBuilder: FormBuilder
  ) {}

  onSubmit(): void {
    // Process checkout data here
    this.items = this.cartService.clearCart();
    console.warn(
      "Your order has been submitted",
      this.checkoutForm.value
    );
    this.checkoutForm.reset();
  }
}

import { Component } from "@angular/core";
@Component({
  selector: "hello-world-ngif",
  templateUrl: "./hello-world-ngif.component.html",
})
export class HelloWorldNgIfComponent {
  message = "I'm read only!";
  canEdit = false;
  onEditClick() {
    this.canEdit = !this.canEdit;
    if (this.canEdit) {
      this.message = "You can edit me!";
    } else {
      this.message = "I'm read only!";
    }
  }
}

@Component({
  selector: "app-hero-bio",
  template: ` 
{{ hero.name }}
    
    `,
  providers: [HeroCacheService],
})
export class HeroBioComponent implements OnInit {
  @Input() heroId = 0;

  constructor(private heroCache: HeroCacheService) {}

  ngOnInit() {
    this.heroCache.fetchCachedHero(this.heroId);
  }

  get hero() {
    return this.heroCache.hero;
  }
}

@Component({
  animations: [
    trigger("filterAnimation", [
      transition(":enter, * => 0, * => -1", []),
      transition(":increment", [
        query(
          ":enter",
          [
            style({ opacity: 0, width: "0px" }),
            stagger(50, [
              animate(
                "300ms ease-out",
                style({ opacity: 1, width: "*" })
              ),
            ]),
          ],
          { optional: true }
        ),
      ]),
      transition(":decrement", [
        query(":leave", [
          stagger(50, [
            animate(
              "300ms ease-out",
              style({ opacity: 0, width: "0px" })
            ),
          ]),
        ]),
      ]),
    ]),
  ],
})
export class HeroListPageComponent implements OnInit {
  heroTotal = -1;
}

@Component({
  selector: 'app-typical',
  template: '
A typical component for {{data.name}}
'
})
export class TypicalComponent {
  @Input() data: TypicalData;
  constructor(private someService: SomeService) { ... }
}

import { Component } from "@angular/core";

@Component({
  selector: "hello-world-interpolation",
  templateUrl: "./hello-world-interpolation.component.html",
})
export class HelloWorldInterpolationComponent {
  message = "Hello, World!";
}

import { Component } from "@angular/core";

@Component({
  selector: "app-parent",
  template: "",
})
export class ParentComponent {}

import { Component } from "@angular/core";
import { Observable } from "rxjs";

@Component({
  selector: "app-stopwatch",
  templateUrl: "./stopwatch.component.html",
})
export class StopwatchComponent {
  stopwatchValue = 0;
  stopwatchValue$!: Observable;

  start() {
    this.stopwatchValue$.subscribe(
      (num) => (this.stopwatchValue = num)
    );
  }
}

import { ActivatedRoute } from "@angular/router";

@Component({
  selector: "app-routable",
  template: "Routable2Component template",
})
export class Routable2Component implements OnInit {
  constructor(private activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    this.activatedRoute.url.subscribe((url) =>
      console.log("The URL changed to: " + url)
    );
  }
}

@Component({
  selector: "app-hero",
  template: "
{{hero.name}}
",
})
export class HeroComponent {
  @Input() hero: Hero;
}

import { Component } from "@angular/core";

@Component({
  selector: "hello-world",
  template: `
    
Hello World
    
This is my first component!
  `,
})
export class HelloWorldComponent {
  // The code in this class drives the component's behavior.
}

import { Component } from "@angular/core";
import { ParentComponent } from "./parent.component";

@Component({
  selector: "app-child",
  template: "The child!",
})
export class ChildComponent {
  constructor(private parent: ParentComponent) {}
}

import {
  Component,
  OnInit,
  Self,
  SkipSelf,
} from "@angular/core";
import {
  BROWSER_STORAGE,
  BrowserStorageService,
} from "./storage.service";

@Component({
  selector: "app-storage",
  template: `
    Open the inspector to see the local/session storage
    keys:

    
Session Storage
    
      Set Session Storage
    

    
Local Storage
    Set Local Storage
  `,
  providers: [
    BrowserStorageService,
    {
      provide: BROWSER_STORAGE,
      useFactory: () => sessionStorage,
    },
  ],
})
export class StorageComponent implements OnInit {
  constructor(
    @Self()
    private sessionStorageService: BrowserStorageService,
    @SkipSelf()
    private localStorageService: BrowserStorageService
  ) {}

  ngOnInit() {}

  setSession() {
    this.sessionStorageService.set(
      "hero",
      "Dr Nice - Session"
    );
  }

  setLocal() {
    this.localStorageService.set("hero", "Dr Nice - Local");
  }
}

import { Component } from "@angular/core";

@Component({
  selector: "app-zippy-basic",
  template: `
    
Single-slot content projection
    
  `,
})
export class ZippyBasicComponent {}

import { Component } from "@angular/core";

import { Hero } from "../hero";

@Component({
  selector: "app-hero-form",
  templateUrl: "./hero-form.component.html",
  styleUrls: ["./hero-form.component.css"],
})
export class HeroFormComponent {
  powers = [
    "Really Smart",
    "Super Flexible",
    "Super Hot",
    "Weather Changer",
  ];

  model = new Hero(
    18,
    "Dr IQ",
    this.powers[0],
    "Chuck Overstreet"
  );

  submitted = false;

  onSubmit() {
    this.submitted = true;
  }

  newHero() {
    this.model = new Hero(42, "", "");
  }
}

import { Component } from "@angular/core";
import { Logger } from "../logger.service";

@Component({
  selector: "hello-world-di",
  templateUrl: "./hello-world-di.component.html",
})
export class HelloWorldDependencyInjectionComponent {
  count = 0;

  constructor(private logger: Logger) {}

  onLogMe() {
    this.logger.writeCount(this.count);
    this.count++;
  }
}

@Component({
  selector: "my-component",
  template: "{{person.addresss.street}}",
})
class MyComponent {
  person?: Person;
}

@Component({
  selector: "app-zippy",
  template: `
    

      
Toggle
      

        
      
    
  `,
})
export class ZippyComponent {
  visible = true;
  @Output() open = new EventEmitter();
  @Output() close = new EventEmitter();

  toggle() {
    this.visible = !this.visible;
    if (this.visible) {
      this.open.emit(null);
    } else {
      this.close.emit(null);
    }
  }
}

import { Component, OnInit } from "@angular/core";
import { Hero } from "../hero";

@Component({
  selector: "app-heroes",
  templateUrl: "./heroes.component.html",
  styleUrls: ["./heroes.component.css"],
})
export class HeroesComponent implements OnInit {
  hero: Hero = {
    id: 1,
    name: "Windstorm",
  };

  constructor() {}

  ngOnInit() {}
}

@Component({
  selector: "app-emulated-encapsulation",
  template: `
    
Emulated
    

      Emulated encapsulation
    
    
  `,
  styles: ["h2, .emulated-message { color: green; }"],
  encapsulation: ViewEncapsulation.Emulated,
})
export class EmulatedEncapsulationComponent {}

import { Component } from "@angular/core";

import { Hero } from "../hero";

@Component({
  selector: "app-hero-form",
  templateUrl: "./hero-form.component.html",
  styleUrls: ["./hero-form.component.css"],
})
export class HeroFormComponent {
  powers = [
    "Really Smart",
    "Super Flexible",
    "Super Hot",
    "Weather Changer",
  ];

  model = new Hero(
    18,
    "Dr IQ",
    this.powers[0],
    "Chuck Overstreet"
  );

  submitted = false;

  onSubmit() {
    this.submitted = true;
  }
}