Angular Essentials: Fundamentals Quiz Quiz

Explore key concepts in Angular basics with this multiple-choice quiz designed to reinforce foundational frontend development skills. Assess your knowledge of modules, components, templates, data binding, directives, and more in core Angular applications.

1. Component Structure

   Which decorator is used in Angular to define a class as a component and let Angular know how to process it?

   1. @Component
   2. @Service
   3. @Directive
   4. @Injectable

   Explanation: The @Component decorator is used to identify a class as an Angular component and provide related metadata. @Service and @Injectable are used for services, not components, making them incorrect here. @Directive is for defining structural or attribute directives, not components. Only @Component establishes the class as a visual, functional part of the UI.

2. Template Syntax

   Which syntax correctly binds a component property called 'username' to an input field’s value in Angular’s template?

   1. [value]='username'
   2. (value)='username'
   3. ${username}
   4. (bind)='username'

   Explanation: Using square brackets, as in [value]='username', performs property binding and sets the input’s value to the username property from the component. (value)='username' uses parentheses incorrectly, which are for event binding, not property binding. ${username} is JavaScript template literal syntax and not used in Angular templates. (bind)='username' is not valid Angular syntax.

3. Module Basics

   What is the main purpose of an Angular module defined with the @NgModule decorator?

   1. To organize related components, directives, and services
   2. To add styling to components
   3. To declare external scripts
   4. To create database connections

   Explanation: An Angular module, defined with @NgModule, is used to group related pieces like components, directives, and services for organization and dependency management. Adding styling to components is done with stylesheets or the styles field, not by modules. Declaring external scripts happens in the configuration files, and database connections are handled via services or other mechanisms, not modules.

4. Event Binding

   How do you handle a click event from a button in an Angular template?

   1. (click)='onClick()'
   2. [click]='onClick()'
   3. {click}='onClick()'
   4. *click='onClick()'

   Explanation: Event binding in Angular uses parentheses as in (click)='onClick()', which calls the method when the user clicks the button. [click]='onClick()' uses the wrong brackets and is meant for property binding. {click}='onClick()' and *click='onClick()' are invalid and not recognized by Angular templates. Only the correct form listens for events properly.

5. Interpolation

   Which syntax displays the value of a component property called 'firstName' inside a paragraph element in an Angular template?

   1. {{ firstName }}
   2. *firstName*
   3. [firstName]
   4. (( firstName ))

   Explanation: The double curly braces, as in {{ firstName }}, are used for string interpolation in Angular and will display the property’s value. *firstName* and (( firstName )) are not valid Angular syntax and will not work. [firstName] would attempt property binding instead of interpolation, and does not display values as text.

6. Data Binding Types

   Which of the following binds data from the component to the view and vice versa in Angular?

   1. [(ngModel)]
   2. [ngModel]
   3. (ngModel)
   4. {ngModel}

   Explanation: The [(ngModel)] syntax, known as 'banana in a box,' sets up two-way data binding in Angular, meaning changes in either the view or component update each other. [ngModel] is for one-way binding from the component to the view, so it's not bi-directional. (ngModel) is not a recognized event in Angular. {ngModel} is not valid Angular syntax.

7. Directive Usage

   Which built-in Angular directive is used to conditionally include or exclude a template block from the DOM?

   1. *ngIf
   2. *ngFor
   3. #ngIf
   4. <ngShow>

   Explanation: *ngIf is a structural directive that conditionally adds or removes elements from the DOM depending on the expression's truthiness. *ngFor is also a structural directive, but it's used for looping rather than showing or hiding content. #ngIf is not a valid directive identifier. <ngShow> is not part of Angular's structural directive set.

8. Service Injection

   How is a service typically provided to an Angular component so that it can be used inside that component?

   1. By declaring it in the component’s constructor parameters
   2. By importing it in the component's HTML file
   3. By adding it inside the export statement
   4. By placing it in the assets folder

   Explanation: Angular uses dependency injection, so services are provided by declaring them as a parameter in the component's constructor. Importing a service in the HTML file is not possible or meaningful—the component's TypeScript file handles imports. Adding it in the export statement or placing it in the assets folder has no effect on dependency injection or service availability.

9. Lifecycle Hooks

   Which lifecycle hook method is called by Angular when a component is created and its data-bound properties are initialized?

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

   Explanation: ngOnInit is automatically called once after the component's construction and after the data-bound properties are set, making it ideal for initialization code. ngAfterViewInit is triggered after the component's view is fully initialized. ngOnDestroy is called before the component is removed from the DOM. ngDoCheck is for detecting and acting upon changes.

10. Component Selector

    In an Angular component’s metadata, which property is used to define the HTML tag that identifies the component in templates?

    1. selector
    2. templateUrl
    3. styles
    4. providers

    Explanation: The selector property in an Angular component’s decorator specifies the tag used to include that component in templates. templateUrl specifies the path to the component’s template, not its tag. styles is for component-specific styling information. providers is used to declare service providers available to the component.