Angular Kickstart: Easy Quiz on Core Features Quiz

Challenge your understanding of core Angular features with this focused quiz. Explore key concepts like components, data binding, services, modules, and directives to strengthen your fundamentals and build robust applications.

1. Component Identification

   Which file is typically required for declaring the template, class, and metadata for a reusable view called a component in an Angular application?

   1. Service Java file
   2. Component TypeScript file
   3. Index HTML file
   4. Model JSON file

   Explanation: The Component TypeScript file defines the logic, template reference, and associated metadata for a component. Model JSON files are used for data but do not create UI views. Index HTML files are entry points and do not declare individual components. Service Java files are unrelated, as services are usually defined in TypeScript for Angular applications.

2. Data Binding Type

   In Angular, which binding technique allows a parent component to send data to a child component using property binding syntax, such as [item]='data'?

   1. Input Binding
   2. Interpolation Binding
   3. Output Binding
   4. Event Binding

   Explanation: Input Binding uses property binding syntax to pass data from parent to child components through decorated input properties. Event Binding is used to handle child-to-parent communication. Interpolation Binding displays values in the template, not sending data. Output Binding refers to emitting events to the parent component, not passing data downward.

3. Service Usage

   Why would you implement a service in Angular to handle logic such as fetching data from an external source?

   1. To promote code reusability and separation of concerns
   2. To directly create user interface elements
   3. To store static HTML templates
   4. To style components using CSS

   Explanation: Services are ideal for managing data logic, promoting reusability, and isolating concerns away from the component view. Services do not create UI elements; that is the role of components. They are not intended for static HTML storage or styling, which is typically handled by templates and style sheets.

4. Module Declaration Purpose

   What is the primary reason for declaring modules in an Angular application, such as with an NgModule decorator?

   1. To generate database schemas
   2. To set up user authentication logic
   3. To organize related components, directives, and pipes
   4. To handle HTTP requests automatically

   Explanation: Modules group related functionality, helping organize and structure an application’s building blocks. Handling HTTP requests and user authentication are implemented in services or other constructs, not through modules themselves. Modules do not generate database schemas; that task belongs to backend technologies.

5. Structural Directive Example

   Which built-in structural directive in Angular would you use to display a list of items by repeating an element for each item, such as looping through an array of products?

   1. *ngClass
   2. *ngModel
   3. *ngIf
   4. *ngFor

   Explanation: *ngFor is designed to iterate over collections and repeat elements accordingly. *ngIf is used for conditionally including or excluding elements. *ngClass is a directive for dynamic CSS class bindings, and *ngModel is used for two-way data binding, not structural repetitions.