Essential Angular Concepts Quiz Quiz

Challenge your understanding of core Angular fundamentals such as components, configuration, data binding, services, and more. This easy-level quiz covers the must-know basics for interviews and hands-on work.

1. TypeScript in Angular

   Can Angular applications be developed without using TypeScript?

   1. Only when using decorators
   2. Only for small projects
   3. No, TypeScript is required for Angular features
   4. Yes, JavaScript is fully sufficient

   Explanation: TypeScript is required because Angular relies on its features like decorators and type checking. JavaScript alone cannot handle these features. Using JavaScript for small projects is not supported, and decorators specifically need TypeScript.

2. Application Structure

   How does an Angular application structure the building of a web page?

   1. By running all code in one main file
   2. By using components that each control a part of the UI
   3. By loading static HTML only
   4. By using only services for all logic

   Explanation: Angular uses components to build the UI, with each managing a section of the page. Static HTML, single-file approaches, or relying solely on services do not represent Angular's design.

3. Configuration Files

   What is the primary purpose of the angular.json file in an Angular project?

   1. It manages all configurations for building the app
   2. It lists installed npm packages
   3. It stores database connections
   4. It sets up CSS frameworks

   Explanation: angular.json holds build configurations, determining the entry point and output settings. It does not manage databases, specifically configure CSS frameworks, or list installed npm packages.

4. Component Lifecycle

   What does the ngOnInit() lifecycle hook do in Angular?

   1. Saves the component state to local storage
   2. Runs initialization logic after component properties are set
   3. Destroys the component
   4. Updates the DOM directly

   Explanation: ngOnInit is used for running code when a component is initialized. It does not destroy components, directly update the DOM, or save state to storage.

5. Data Binding Types

   Which of the following is NOT a type of data binding in Angular?

   1. Interpolation
   2. Reference binding
   3. Two-way binding
   4. Property binding

   Explanation: Reference binding is not a data binding type in Angular. Interpolation, property binding, and two-way binding are all established Angular data binding techniques.

6. Understanding Directives

   What is the main role of directives in Angular?

   1. To modify the DOM structure or appearance
   2. To define navigation routes
   3. To bundle stylesheets
   4. To configure the build process

   Explanation: Directives modify the DOM, such as hiding elements or changing classes. They do not manage builds, routing, or stylesheets.

7. Services and Dependency Injection

   Why are services and dependency injection important in Angular?

   1. They handle only routing
   2. They render HTML templates
   3. They define CSS styles
   4. They enable components to access shared logic and data

   Explanation: Services contain reusable logic or data, and DI provides these to components. Rendering, styling, and routing are not handled solely by services and DI.

8. Angular Routing Basics

   How does routing work in Angular applications?

   1. It triggers data binding events
   2. It navigates between views by changing URL paths
   3. It updates CSS classes dynamically
   4. It compiles TypeScript code

   Explanation: Routing uses URL paths to switch between different views in Angular. The other options are unrelated to routing.

9. Component Communication

   What is the recommended way to pass data from a parent component to a child component in Angular?

   1. Modifying the DOM directly
   2. Using @Input() in the child component
   3. Calling the child's constructor
   4. Using @Output() in the parent component

   Explanation: @Input() allows the parent to pass values to the child. Constructors and direct DOM manipulation are not suitable for such data flow, and @Output() is for sending data up.

10. Structural Directives

    What is the main difference between ngIf, ngFor, and ngSwitch in Angular?

    1. All three are used to handle HTTP requests
    2. ngIf runs only during app load, ngFor after build, ngSwitch on user input
    3. ngIf binds styles, ngFor manages services, ngSwitch configures routing
    4. ngIf shows elements conditionally, ngFor repeats them, ngSwitch switches templates

    Explanation: ngIf, ngFor, and ngSwitch are structural directives with distinct functions on DOM elements. The incorrect options suggest unrelated behaviors or technical inaccuracies.