Angular Core Concepts Quiz Quiz

Enhance your understanding of Angular’s foundational concepts, including components, data binding, dependency injection, directives, and lifecycle hooks. This quiz is designed for learners aiming to solidify their grasp of the most important Angular core features and their practical usage.

1. Angular Components

   Which property of a component’s decorator is used to specify the selector that identifies this component in a template?

   1. providers
   2. imports
   3. template
   4. selector

   Explanation: The 'selector' property in a component’s decorator specifies the custom HTML tag that represents the component in templates. The 'template' property defines the component’s HTML structure, not its identification. 'Providers' are used for dependency injection, and 'imports' are not a valid property of the component decorator. Only 'selector' correctly identifies how a component is referenced.

2. Data Binding Types

   What type of data binding allows property values to be passed from the parent component to the child component using square brackets, for example, u003Cchild [value]='parentValue'u003Eu003C/childu003E?

   1. Structural binding
   2. Two-way binding
   3. Event binding
   4. Property binding

   Explanation: Property binding binds values from a parent to a child component’s input using square brackets. Event binding involves parentheses and is used to listen for events. Two-way binding uses a combination of both property and event binding syntax with '[( )]'. 'Structural binding' is not a core Angular term, making property binding the correct choice.

3. Dependency Injection

   When declaring a dependency in a component’s constructor, which decorator is most commonly used to automatically inject the needed service?

   1. Injectable
   2. Inject
   3. Output
   4. Input

   Explanation: The 'Inject' decorator is applied in a constructor to tell Angular to inject a specific dependency token. 'Injectable' is used on services to mark them as available for injection but is not applied in the component constructor. 'Input' and 'Output' pertain to component property communication, not to dependency injection. Thus, only 'Inject' fits this context.

4. Directives

   Which type of directive is responsible for altering the layout or structure of the DOM, such as with *ngIf or *ngFor?

   1. Service directive
   2. Attribute directive
   3. Pipe directive
   4. Structural directive

   Explanation: Structural directives, identified by an asterisk (*), modify the structure of the DOM by adding or removing elements. Attribute directives alter the appearance or behavior of an element, while service and pipe directives are misnomers—there are no such directive categories in Angular. Therefore, only structural directive is the accurate answer.

5. Lifecycle Hooks

   Which lifecycle hook is called once after the component’s first display, making it ideal for fetching data or performing setup activities?

   1. ngOnInit
   2. ngOnChanges
   3. ngOnDestroy
   4. ngAfterViewInit

   Explanation: ngOnInit is called only once after the component initializes and is commonly used for fetching data or initiating processes. ngOnDestroy runs when the component is about to be removed. ngAfterViewInit runs after the component’s view is fully initialized, and ngOnChanges triggers when input properties change. Thus, ngOnInit is the best lifecycle hook for setup tasks after component creation.