Angular MCQ (Multiple Choice Questions)

This set of Angular MCQ helps you learn “Angular JS” with questions and answers, perfect for freshers and experienced candidates.

1. Which of the following statement is true for AngularJS?
a) AngularJS is a closed-source front-end web framework
b) AngularJS is an open-source front-end web framework
c) AngularJS is an open-source backend web framework
d) AngularJS is a closed-source back-end web framework
View Answer

Answer: b
Explanation: AngularJS is an open-source front-end web framework for constructing single-page apps based on JavaScript. The MEAN stack, which consists of MongoDB database, Express. js web application server framework, AngularJS (or Angular), and Node, uses AngularJS as the frontend.

2. Which of the following is the correct syntax for writing AngularJS expressions?
a) {{expression}}
b) {{expression | filter1 | filter2 | …}}
c) Both of the mentioned
d) None of the mentioned
View Answer

Answer: a
Explanation: The syntax for writing AngularJS expressions is:
{{expression}}
The syntax for applying multiple filters in AngularJS is:
{{expression | filter1 | filter2 | …}}

3. Which of the following is used to create a component in Angular?
a) @Injectable
b) @Component
c) @Directive
d) @NgModule
View Answer

Answer: b
Explanation: The @Component decorator is used to define a component in Angular. It allows you to specify the metadata for the component, including its selector, template, and styles.
advertisement
advertisement

4. Which of the following components can be injected as a dependency in AngularJS?
a) factory
b) service
c) value
d) All of the mentioned
View Answer

Answer: d
Explanation: Dependencies are injected in Angular.JS by using an “injectable factory method” or “constructor function.” As dependencies, these components can be injected with “service” and “value” components.

5. What is the default template language in Angular?
a) XML
b) HTML
c) JavaScript
d) CSS
View Answer

Answer: b
Explanation: Angular uses HTML as the default language for defining the structure and layout of the application. Templates in Angular are written in HTML.

6. Which of the following directives is used to start an angularJS application?
a) ng-repeat
b) ng-init
c) ng-app
d) ng-model
View Answer

Answer: c
Explanation: The ng-app directive is used to initialize an AngularJS application. It marks the root element of the application and tells AngularJS to process the HTML within it.

7. What is the purpose of Angular services?
a) To handle routing
b) To create UI components
c) To provide reusable logic and data sharing
d) To manage templates
View Answer

Answer: c
Explanation: Angular services are used to share business logic, data access, and functionality across multiple components. They are typically injectable into components to keep the application logic organized and reusable.
advertisement

8. What is two-way data binding in Angular?
a) Synchronization between model and view
b) Binding data from view to model only
c) Binding data between two components
d) Binding data from model to view only
View Answer

Answer: a
Explanation: Two-way data binding in Angular allows changes in the model to automatically update the view and vice versa, creating a seamless data flow between the two. This is typically achieved using the `[(ngModel)]` directive.

9. AngularJS expressions bind AngularJS data to HTML like which of the following directive?
a) ng-repeat
b) ng-bind
c) ng-app
d) ng-model
View Answer

Answer: b
Explanation: In AngularJS, the ng-bind directive is used to bind/replace the text content of any HTML element with the value specified in the expression. When the value of the expression changes, the HTML content is updated.
advertisement

10. What is a Model in MVC?
a) the lowest level of the pattern responsible for maintaining data
b) represents server-side data
c) represents data stored in a database
d) None of the mentioned
View Answer

Answer: a
Explanation: In the MVC (Model-View-Controller) pattern, the model is responsible for handling the data and business logic. It represents the structure and shape of the data, often mapped to a class or object.

11. Being a JavaScript-only framework, applications written in AngularJS are not safe and secure.
a) false
b) true
View Answer

Answer: b
Explanation: Applications written in AngularJS are not inherently secure because it is a JavaScript-only framework. To ensure security, server-side authentication and permissions are required.

12. Which of the following is used for routing in Angular?
a) Angular Core
b) Angular HTTP
c) Angular Router
d) Angular CLI
View Answer

Answer: c
Explanation: The Angular Router is responsible for navigating between views or pages in an Angular application. It maps URLs to components and supports features like lazy loading and route guards.

13. Which of the following statement is correct about data binding in AngularJS?
a) Automatic synchronization of data between model and view components
b) Automatic synchronization of data between model and controller components
c) Technique to save html data in the database
d) Technique to bind database data to html control
View Answer

Answer: a
Explanation: Data binding in AngularJS is the automatic synchronization of data between the model and view components, ensuring that changes in the model are reflected in the view and vice versa.

14. Which of the following is an advantage of AngularJS?
a) Uses dependency injection and makes use of separation of concerns
b) Code is unit-testable
c) Provides reusable components
d) All of the mentioned
View Answer

Answer: d
Explanation: AngularJS offers several advantages, such as easy integration with dependency injection, the ability to create unit-testable code, and reusable components, which help in building maintainable applications.

15. What is the purpose of Angular directives?
a) To manage data binding
b) To define UI components
c) To handle HTTP requests
d) To manipulate the DOM
View Answer

Answer: d
Explanation: Angular directives are used to manipulate the DOM by changing the appearance or behavior of elements, such as adding event listeners or dynamically modifying the element’s content.

16. What is the lifecycle hook method in Angular to handle initialization of a component?
a) ngOnDestroy()
b) ngDoCheck()
c) ngOnChanges()
d) ngOnInit()
View Answer

Answer: d
Explanation: The ngOnInit() lifecycle hook is called after a component has been initialized and the input properties are set. It is used to perform tasks such as fetching data from an API or setting up the initial state.

17. Which of the following is used to define a route in Angular?
a) routerLink
b) RouterModule
c) router-outlet
d) ng-route
View Answer

Answer: b
Explanation: The `RouterModule` is used to define routes in Angular. It is imported into the application and configured with routes that map URLs to components.

18. Which Angular module provides support for reactive programming?
a) ReactiveFormsModule
b) BrowserAnimationsModule
c) HttpClientModule
d) FormsModule
View Answer

Answer: a
Explanation: `ReactiveFormsModule` is an Angular module that provides support for reactive programming, especially for building forms that are more scalable and dynamic in nature using `FormControl` and `FormGroup`.

19. What is the purpose of Angular pipes?
a) To validate form data
b) To manage data binding
c) To transform data in templates
d) To fetch data from APIs
View Answer

Answer: c
Explanation: Angular pipes are used to transform data in templates. They are a powerful tool for formatting values before displaying them, such as transforming dates, currencies, or custom data transformations.

20. Which of the following is the correct syntax for defining a component in Angular?
a) @Component({ selector: ‘app-component’, template: ‘…’ })
b) @Directive({ selector: ‘app-component’, template: ‘…’ })
c) @NgModule({ selector: ‘app-component’, template: ‘…’ })
d) @Component({ selector: ‘component’, template: ‘…’ })
View Answer

Answer: a
Explanation: The `@Component` decorator is used to define a component. It includes the selector (used to reference the component in templates), the template (which defines the component’s HTML), and other configuration options.

21. What does the @Output decorator do in Angular?
a) Emits events from a child component to a parent
b) Passes data from a parent to a child component
c) Defines routes
d) Defines lifecycle hooks
View Answer

Answer: a
Explanation: The `@Output` decorator is used in Angular to emit events from a child component to a parent component. It uses an `EventEmitter` to send data or notifications to the parent component.

22. What is the purpose of Angular’s HttpClientModule?
a) To manage form validations
b) To manage routing
c) To fetch data from APIs
d) To handle HTTP requests
View Answer

Answer: d
Explanation: `HttpClientModule` is a built-in Angular module that provides an API for making HTTP requests. It allows components and services to communicate with remote APIs using standard HTTP methods like GET, POST, PUT, and DELETE.

23. What does the ngFor directive do in Angular?
a) Defines routes
b) Loops over a collection of items
c) Binds data to the UI
d) Handles form validation
View Answer

Answer: b
Explanation: The `ngFor` directive in Angular is used to iterate over a collection (like an array) and render each item dynamically in the view. This is helpful for creating lists and repeating elements in templates.

24. How do you define a module’s imports in Angular?
a) @Import decorator
b) imports property in the component decorator
c) Using the @NgModule decorator’s imports array
d) ngImport() function
View Answer

Answer: c
Explanation: In Angular, modules are imported by adding them to the `imports` array inside the `@NgModule` decorator. This allows the module to access other imported modules’ functionality.

25. What is Angular’s primary module system?
a) NgModule
b) CommonJS
c) ES6 Modules
d) AMD
View Answer

Answer: a
Explanation: Angular uses `NgModules` as the primary organizational unit for an application. An `NgModule` helps bundle together related components, directives, pipes, and services, making it easier to manage different parts of the app.

26. How do you import a module in Angular?
a) import { moduleName } from ‘modulePath’
b) include { moduleName } in @NgModule()
c) @import { moduleName }
d) import ‘modulePath’
View Answer

Answer: a
Explanation: Angular modules are imported using the `import` statement, specifying the module name and path. This is done at the top of the TypeScript file where the module is needed.

27. How does Angular handle dependency injection?
a) By creating global variables
b) By manually importing services in components
c) By using constructor parameters to inject services
d) By using the ngModel directive
View Answer

Answer: c
Explanation: Angular handles dependency injection by providing services to components via constructor parameters. The Angular injector automatically provides the required dependencies when a component or service is instantiated.

28. What is an Angular module?
a) A routing configuration
b) A component in an Angular application
c) A container for components, directives, pipes, and services
d) A collection of services
View Answer

Answer: c
Explanation: An Angular module is a container that groups related components, directives, pipes, and services. Modules help organize an Angular application and manage dependencies between different parts of the app.

29. What does the Angular CLI command `ng serve` do?
a) Runs tests on the Angular application
b) Compiles and serves the Angular application on a local server
c) Builds the Angular application for production
d) Starts a new Angular project
View Answer

Answer: b
Explanation: The `ng serve` command compiles and serves the Angular application on a local development server. It automatically refreshes the app as changes are made during development.

30. Which directive is used to display a list of elements based on an array in Angular?
a) ngFor
b) ngModel
c) ngIf
d) ngSwitch
View Answer

Answer: a
Explanation: The ngFor directive is used to iterate over an array and create a list of elements in the template.

31. What is Dependency Injection (DI) in Angular?
a) A design pattern that allows you to inject services into components
b) A method to manage HTTP requests
c) A technique for component-based routing
d) A directive for creating reusable components
View Answer

Answer: a
Explanation: DI in Angular is a design pattern where services are provided to components automatically through the constructor, reducing tight coupling between components and services.

32. Which decorator is used to define an Angular service?
a) @Component
b) @Service
c) @Injectable
d) @Directive
View Answer

Answer: c
Explanation: The @Injectable decorator is used to define a service that can be injected into components or other services in Angular.

33. What is lazy loading in Angular?
a) Compiling the application on-demand
b) Loading all modules and components upfront
c) Delaying the loading of modules until they are needed
d) Preloading data from an API
View Answer

Answer: c
Explanation: Lazy loading is a technique used to load Angular modules only when they are required, reducing the initial loading time and improving performance.

34. Which module is used to add Angular Material components to an application?
a) MatButtonModule
b) MatModule
c) BrowserAnimationsModule
d) AngularMaterialModule
View Answer

Answer: a
Explanation: Each Angular Material component has its corresponding module (e.g., MatButtonModule for buttons). These modules need to be imported into the application module to use Material components.

35. Which of the following is the correct way to perform a GET request using Angular’s HttpClient?
a) httpClient.query(‘/url’)
b) httpClient.get(‘/url’)
c) httpClient.fetch(‘/url’)
d) httpClient.request(‘/url’)
View Answer

Answer: b
Explanation: The httpClient.get(‘/url’) method sends a GET request to the specified URL and returns an observable of the response data.

36. What does the command ng serve do in an Angular project?
a) Builds the application
b) Runs the application in development mode
c) Creates a new module
d) Compiles TypeScript files
View Answer

Answer: b
Explanation: The ng serve command compiles the application and serves it on a development server, making it accessible through localhost:4200. This command watches for file changes and automatically reloads the application.

37. Which Angular CLI command is used to generate a new component?
a) ng generate component
b) ng build component
c) ng create component
d) ng add component
View Answer

Answer: a
Explanation: The ng generate component command creates a new component with the necessary files, including the component class, template, and styles.

38. What is the purpose of the Store in NgRx?
a) To handle HTTP requests
b) To perform form validation
c) To store application state in a centralized manner
d) To handle UI-related logic
View Answer

Answer: c
Explanation: The Store in NgRx holds the application’s state in one centralized location. This makes it easier to manage state changes and ensures that the state is predictable and traceable.

39. Which RxJS operator is used to transform emitted values in an observable?
a) filter
b) map
c) merge
d) switchMap
View Answer

Answer: b
Explanation: The map operator is used to apply a function to the emitted values of an observable, transforming them into a new value before passing them down the stream.

40. Which Angular directive is used to apply conditional rendering of elements in a template?
a) ngFor
b) ngSwitch
c) ngIf
d) ngModel
View Answer

Answer: c
Explanation: The ngIf directive is used to conditionally include or remove an element from the DOM based on the truthiness of an expression. It’s often used for dynamic content display.

41. Which of the following is used to optimize performance in Angular by reducing the number of change detection cycles?
a) Use of Pure Pipes
b) Use of ngOnInit
c) Use of two-way binding
d) Use of ngAfterViewInit
View Answer

Answer: a
Explanation: Pure pipes only execute when their input data changes. They reduce unnecessary calculations by limiting the number of times Angular runs change detection, improving performance.

42. In Angular, what is the role of the async pipe?
a) To handle errors in asynchronous operations
b) To subscribe to observables and unwrap their values in templates
c) To delay the execution of a task
d) To convert synchronous data into asynchronous data
View Answer

Answer: b
Explanation: The async pipe subscribes to an observable or promise and automatically updates the view with the emitted value. It also handles unsubscription when the component is destroyed.

43. Which Angular service is used to manage HTTP requests and responses?
a) HttpModule
b) HttpClient
c) HttpRequestService
d) HttpService
View Answer

Answer: b
Explanation: The HttpClient service is used to make HTTP requests and handle responses. It provides methods like get(), post(), and put() for interacting with RESTful APIs.

44. Which Angular feature is used to preload modules in an application for faster navigation?
a) AOT Compilation
b) Service Workers
c) Preloading Strategy
d) Change Detection
View Answer

Answer: c
Explanation: Angular’s preloading strategy allows certain modules to be loaded in the background after the application has started, reducing the time needed to load when the user navigates to a route that requires the module.

Sanfoundry Global Education & Learning Series – Javascript Programming.

advertisement
advertisement
Subscribe to our Newsletters (Subject-wise). Participate in the Sanfoundry Certification contest to get free Certificate of Merit. Join our social networks below and stay updated with latest contests, videos, internships and jobs!

Youtube | Telegram | LinkedIn | Instagram | Facebook | Twitter | Pinterest
Manish Bhojasia - Founder & CTO at Sanfoundry
Manish Bhojasia, a technology veteran with 20+ years @ Cisco & Wipro, is Founder and CTO at Sanfoundry. He lives in Bangalore, and focuses on development of Linux Kernel, SAN Technologies, Advanced C, Data Structures & Alogrithms. Stay connected with him at LinkedIn.

Subscribe to his free Masterclasses at Youtube & discussions at Telegram SanfoundryClasses.