Component Basics — Series 2

Preview — 3 of 10 questions

What is the practical difference between these two components?

javascript

@Component({ selector: 'app-a', standalone: true, template: `<p>Hi</p>` })
export class A {}

@Component({ selector: 'app-b', standalone: true, templateUrl: './b.html' })
export class B {}

AtemplateUrl fetches the HTML over the network at runtime, so it is slower

Btemplate is inline, templateUrl points at a separate file — the build inlines it either way, so the choice is about file size and tooling, not behaviour

Ctemplate only accepts a single element

DtemplateUrl is required for standalone components

What does :host select?

javascript

:host {
  display: block;
  border: 1px solid #333;
}

AThe <body> element of the page

BEvery element inside the component's template

CThe component's own host element — <app-card> itself, which is otherwise unstyled and, being an unknown tag, display: inline by default

DThe parent component's host element

What is $event here, and what does save() receive?

javascript

<input (input)="save($event)" />

AThe component instance

BThe input's string value, unwrapped by Angular

CAngular's own change record for the binding

DThe native DOM Event object — so reading the text means ($event.target as HTMLInputElement).value

Answer all 10 questions (7 more), see explanations for every answer, and track your score.