Challenge your understanding of core Angular concepts, including components, data binding, dependency injection, and lifecycle hooks. This quiz is designed to help freshers review essential Angular knowledge commonly covered in technical interviews.
Which of the following is a required property when defining a basic Angular component using a decorator?
Explanation: The 'selector' property is required in an Angular component decorator as it specifies the custom HTML tag used for that component. 'Import' is not a property of the decorator but part of JavaScript syntax for loading modules. 'Module' and 'service' are unrelated to defining a component decorator and are instead used for organizing and injecting functionality. Only 'selector' directly tells Angular how to represent the component in templates.
In Angular templates, which binding syntax allows you to display a component property’s value within HTML, for example, showing a user's name?
Explanation: Interpolation using double curly braces, such as '{{userName}}', is the correct way to bind and display values in Angular HTML templates. '[(userName)]' is not correct syntax and could confuse with two-way binding. '[userName]' is property binding, which assigns values to element properties, not for direct display. '(userName)' would be used for event binding and is not suitable for showing a value. Thus, only interpolation displays the value as text.
Which feature in Angular enables you to automatically provide a service to a component, reducing manual instantiation?
Explanation: Dependency Injection allows Angular to automatically deliver instances of services to components or other services, relieving developers from manually creating them. 'Data Transfer' refers to sharing data, which is not automated service provision. 'Service Looping' is not a concept in Angular and could confuse with repeatedly calling services. 'Event Emission' is about component communication, not providing dependencies. Therefore, Dependency Injection is the accurate feature.
Which lifecycle hook is called once after Angular sets up all data-bound input properties in a component, making it suitable for initialization that depends on those properties?
Explanation: The ngOnInit hook is invoked once after all input properties have been bound, which is the ideal moment for setup that requires input data. ngOnChanges fires whenever an input property changes, not just once. ngOnStart is not an Angular lifecycle hook and is incorrect. ngOnDestroy is called before component removal and is used for cleanup, not initialization. Thus, ngOnInit is the most appropriate choice.
Which directive in Angular is typically used to conditionally include or exclude a block of HTML from the rendered DOM, such as hiding a section based on user login status?
Explanation: The '*ngIf' directive conditionally adds or removes elements from the DOM depending on the evaluated expression, making it useful for scenarios like user login visibility. '*ngModel' is used for two-way data binding, not for DOM manipulation. '*ngSwitch' switches among alternatives but doesn't conditionally render based on a single condition. '*ngStyle' applies styles, not structural changes. Therefore, '*ngIf' is the correct directive for this use case.