Components & Templates Flashcards
7 cards from real Angular Web Framework practice questions. Tap to flip, then mark Knew It or Still Learning — missed cards come back until you master them.
Read the first 7 Components & Templates flashcards as text
Which lifecycle hook is called after Angular projects external content into the component's view?
Answer: ngAfterContentInit
ngAfterContentInit fires after Angular finishes projecting external content (ng-content) into the component.
What does the `host` property in a @Component decorator allow you to configure?
Answer: Host element bindings and listeners
The `host` property maps DOM events and property bindings directly onto the component's host element.
In Angular, what is the purpose of `ng-content` with a `select` attribute?
Answer: To project only matching elements from the parent
The `select` attribute on ng-content acts as a CSS selector to filter which projected content goes into that slot.
Which change detection strategy checks a component only when its inputs change or an event fires from within it?
Answer: OnPush
ChangeDetectionStrategy.OnPush limits checks to when @Input references change or internal events occur, improving performance.
What Angular decorator would you use to expose a DOM event from a child component to its parent?
Answer: @Output
@Output combined with EventEmitter lets a child emit events that the parent can listen to with event binding syntax.
How do you bind to a custom property called `isActive` on a child component in a parent template?
Answer: [isActive]="value"
Square bracket syntax [isActive]="value" is property binding, which passes a value into a child component's @Input.
What is the effect of marking a component's @Input with `{ required: true }` in Angular 16+?
Answer: It generates a compile-time error if the input is not supplied
Angular 16 introduced required inputs that produce a compile-time diagnostic when a parent template omits the binding.