Q: Parent: <app-child (saved)="onSaved($event)"</app-child What does $event refer to inside onSaved($event)?

Correct answer: Whatever value was passed to saved.emit(...) — here the string 'done'. For a custom @Output EventEmitter, $event is exactly whatever value was passed to .emit(...). Only for native DOM events (like a raw (click) on an HTML element) would $event be the browser's Event object.

Q: Which lifecycle hook runs once after Angular has initialized the component's data-bound input properties and is the standard place for initialization logic such as fetching initial data?

Correct answer: ngOnInit. ngOnInit runs once after Angular has initialized the component's data-bound input properties. Inputs actually bound by a parent are available then; an optional input that was not bound can still retain its default value or remain undefined. The constructor runs earlier, before Angular applies input bindings.

Question 1

Which decorator marks a TypeScript class as an Angular component?

Accepted Answer

Correct answer: @Component. @Component supplies Angular with the metadata needed to treat the class as a component, including its view (template or templateUrl) and, for normal template usage, a selector. @Directive defines a directive without a component view, @Injectable participates in DI compilation, and @NgModule defines a module.

Question 2

In @Component({ selector: 'app-user-card', ... }), what does the selector property control?

Accepted Answer

Correct answer: The custom HTML tag used to place the component in a template. selector defines the CSS-like selector (by default an element name) that other templates use to instantiate the component, e.g.

Question 3

Parent template:

Accepted Answer

Correct answer: It lets the parent bind a value into name via property binding. @Input() exposes name as a bindable property. The parent uses square-bracket property binding, [name]="parentName", to pass a value down one-way from parent to child.

Question 4

Which class does Angular provide for a component to emit custom events, typically paired with @Output()?

Accepted Answer

Correct answer: EventEmitter. @Output() properties are conventionally typed as new EventEmitter<T(). Calling .emit(value) on it raises the custom event that a parent template can bind to with (eventName)="...".

Question 5

Parent: <app-child (saved)="onSaved($event)"</app-child What does $event refer to inside onSaved($event)?

Accepted Answer

Correct answer: Whatever value was passed to saved.emit(...) — here the string 'done'. For a custom @Output EventEmitter, $event is exactly whatever value was passed to .emit(...). Only for native DOM events (like a raw (click) on an HTML element) would $event be the browser's Event object.

Question 6

Which lifecycle hook runs once after Angular has initialized the component's data-bound input properties and is the standard place for initialization logic such as fetching initial data?

Accepted Answer

Correct answer: ngOnInit. ngOnInit runs once after Angular has initialized the component's data-bound input properties. Inputs actually bound by a parent are available then; an optional input that was not bound can still retain its default value or remain undefined. The constructor runs earlier, before Angular applies input bindings.

Frontend Angular Components Lifecycle Interview Questions

Sample questions

By specialization

By seniority

Other fields