Essential Angular Concepts for Interviews (Easy Edition) Quiz

Get familiar with key Angular 16+ concepts using real-world scenarios. Perfect for brushing up on directives, forms, pipes, and more before your next interview.

1. Types of Angular Directives

   Which of the following is NOT a type of Angular directive?

   1. Component
   2. Service
   3. Structural
   4. Attribute

   Explanation: Component, Structural, and Attribute are the three types of Angular directives. Service is a separate concept used for business logic and dependency injection, not a directive. The other options are correct directive types.

2. Role of ngOnInit

   Why is ngOnInit() preferred over the constructor for initialization logic in Angular components?

   1. ngOnInit() injects services
   2. Constructor is used for API calls
   3. Constructor is called after ngOnInit()
   4. ngOnInit() is called after inputs are set, suitable for logic

   Explanation: ngOnInit() runs after the component's inputs are initialized, making it ideal for startup logic or API calls. Constructors are for injecting services, not for running initialization code that depends on inputs. The other options misrepresent their purposes.

3. Observables vs Promises

   When would you choose Observables over Promises in an Angular application?

   1. For module lazy loading
   2. When only synchronous data is needed
   3. For single, one-time data fetches
   4. When handling real-time updates

   Explanation: Observables are ideal for real-time updates, like chats or dynamic data streams. Promises suit single, one-off operations. Synchronous data does not require either, and lazy loading concerns modules, not Observables directly.

4. Choosing Forms Approach

   Which Angular form type is best for handling complex and dynamic form controls?

   1. Template-Driven Forms
   2. HTML Forms
   3. Reactive Forms
   4. Reactive Directives

   Explanation: Reactive Forms are recommended for dynamic and complex scenarios due to their flexibility and structure. Template-Driven Forms fit simple cases. HTML Forms lack Angular's features, and 'Reactive Directives' is not a real form type.

5. Understanding *ngIf, *ngFor, *ngSwitch

   What is the main function of *ngFor in Angular templates?

   1. Iterate and display list elements
   2. Render content based on a condition
   3. Switch between CSS classes
   4. Inject dependencies

   Explanation: *ngFor is used to loop over collections and render multiple elements. *ngIf handles conditional rendering, switching classes is done with directives like ngClass, and dependency injection is unrelated.

6. ViewChild vs ContentChild

   How does ViewChild differ from ContentChild in Angular?

   1. ViewChild is used in modules, ContentChild in components
   2. ViewChild is for services, ContentChild is for directives
   3. There is no difference
   4. ViewChild accesses template elements, ContentChild accesses projected content

   Explanation: ViewChild retrieves elements defined in the component's own template, while ContentChild is for accessing elements passed via <ng-content>. The other options are inaccurate or incorrect.

7. Purpose of Pipes

   What is the primary use of pipes in Angular templates?

   1. To transform data output
   2. To inject dependencies
   3. To define HTTP requests
   4. To create form controls

   Explanation: Pipes are used to format and transform data directly in templates, like formatting dates or currency. Pipes do not inject dependencies, handle HTTP requests, or create form controls.

8. Using HttpClient

   Which feature does Angular's HttpClient module NOT provide?

   1. Compiling templates
   2. Making asynchronous HTTP calls
   3. Using HttpInterceptor for tokens
   4. Handling errors with catchError

   Explanation: HttpClient is used for HTTP operations, error handling, and features like HttpInterceptor. Compiling templates is handled by Angular's compiler, not by HttpClient.

9. Lazy Loading in Angular

   What does Angular's lazy loading allow you to do?

   1. Run unit tests automatically
   2. Compile SCSS files
   3. Load feature modules only when needed
   4. Load all modules at startup

   Explanation: Lazy loading defers loading of feature modules until they are required, improving app performance. It does not compile styles, run tests, or load everything at once.

10. Angular CLI Use Cases

    Which of the following is a common Angular CLI command for generating a new component?

    1. ng compile login
    2. ng generate component login
    3. ng pipe login
    4. ng http request login

    Explanation: The Angular CLI uses 'ng generate component login' to create a new component. The other commands are invalid or serve different purposes not associated with component creation.