Explore and reinforce your understanding of Angular components, structural and attribute directives, lifecycle hooks, and component communication. Ideal for intermediate learners looking to strengthen their skills in building scalable Angular applications.
In Angular, which property of the @Component decorator defines how a component can be invoked in a template, for example as u003Capp-headeru003E?
Explanation: The selector property specifies the custom HTML tag that will be used to insert this component in templates. The templateUrl property points to the HTML file for the component's view, not how it's called. Providers is for dependency injection, and moduleId is rarely used and unrelated to templates. Thus, selector is the correct answer.
Which of the following is an example of a built-in structural directive in Angular that can add or remove elements based on a condition?
Explanation: *ngIf is a structural directive that dynamically adds or removes elements from the DOM depending on the provided condition. [ngClass] is an attribute directive used to change classes, not structure. (ngSubmit) is an event binding, and (ngIf) is a typo, as Angular requires the asterisk notation for structural directives.
Which lifecycle hook is implemented in a component to respond after Angular sets or updates input properties, such as receiving new @Input values?
Explanation: ngOnChanges is called whenever data-bound input properties change, making it suitable for handling @Input value updates. ngOnInit runs once after the component initializes, not on every update. ngOnDestroy is for cleanup, and ngDoCheck is a custom change detection method, but does not capture input property changes automatically.
What is the primary role of an attribute directive like [ngStyle] in Angular templates?
Explanation: Attribute directives modify the appearance or behavior of existing elements by changing properties, styles, or classes. They do not alter the DOM structure or create new elements, so creating structures is incorrect. Service registration is unrelated, and handling outputs pertains to event binding, not attribute directives.
When a child component needs to emit an event to its parent, which Angular mechanism is typically used for this purpose?
Explanation: @Output with EventEmitter allows child components to raise custom events for the parent to listen and respond to. @Input is used for receiving data, not emitting. ngModel two-way binding is for form controls, not event emission. ViewChild is for referencing component instances, not communicating via events.