Angular Quiz ( Beginner ) - All Questions

This beginner-level Angular quiz is designed for learners starting their journey with Angular framework. It covers core fundamentals such as components, modules, templates, data binding, directives, services, and basic CLI concepts—perfect for practice and entry-level interviews.

Question 1: What is Angular?

A JavaScript library
A backend framework
A frontend framework
A database

Explanation: Angular is a frontend framework used to build web applications.

Question 2: Angular is primarily written in which language?

Java
TypeScript
Python
PHP

Explanation: Angular is written using TypeScript.

Question 3: Which company develops Angular?

Facebook
Microsoft
Google
Amazon

Explanation: Angular is developed and maintained by Google.

Question 4: What command is used to create a new Angular project?

ng start
ng new
ng create
ng init

Explanation: ng new creates a new Angular project.

Question 5: Which file is the main entry point of an Angular app?

index.html
main.ts
app.module.ts
angular.json

Explanation: main.ts bootstraps the Angular application.

Question 6: What is a component in Angular?

A service
A module
A UI building block
A directive only

Explanation: Components control views (UI) in Angular.

Question 7: Which decorator defines a component?

@NgModule
@Injectable
@Component
@Directive

Explanation: @Component is used to define a component.

Question 8: What does @NgModule do?

Defines a service
Defines a component
Groups related components and services
Handles routing

Explanation: @NgModule organizes application building blocks.

Question 9: Which file defines the root module?

main.ts
app.component.ts
app.module.ts
index.html

Explanation: app.module.ts defines the root module.

Question 10: What is interpolation in Angular?

Calling functions
Binding events
Displaying data using {{ }}
Looping elements

Explanation: Interpolation displays data using {{ }} syntax.

Question 11: Which syntax is used for property binding?

{{ }}
[ ]
( )
#

Explanation: Property binding uses square brackets.

Question 12: Which syntax is used for event binding?

[ ]
{{ }}
( )
*

Explanation: Event binding uses parentheses.

Question 13: What is two-way data binding syntax?

[value]
(change)
{{data}}
[(ngModel)]

Explanation: [(ngModel)] enables two-way data binding.

Question 14: Which directive repeats elements in a list?

*ngIf
*ngSwitch
*ngFor
ngRepeat

Explanation: *ngFor is used to loop through collections.

Question 15: Which directive conditionally displays elements?

*ngFor
*ngIf
ngShow
*ngLoop

Explanation: *ngIf conditionally renders elements.

Question 16: What does *ngSwitch do?

Loops data
Switches components
Displays content based on cases
Handles routing

Explanation: *ngSwitch renders elements based on matching cases.

Question 17: What is a service in Angular?

UI element
Reusable business logic
Template file
Module decorator

Explanation: Services contain reusable business logic.

Question 18: Which decorator makes a class a service?

@Component
@Service
@Injectable
@Provider

Explanation: @Injectable marks a class as a service.

Question 19: What is dependency injection?

Creating components
Injecting CSS
Providing dependencies to classes
Routing modules

Explanation: Dependency injection supplies required dependencies.

Question 20: Which Angular module provides ngModel?

HttpClientModule
FormsModule
BrowserModule
CommonModule

Explanation: FormsModule provides ngModel.

Question 21: Which module is required to run Angular in the browser?

CommonModule
FormsModule
BrowserModule
HttpClientModule

Explanation: BrowserModule is required for browser apps.

Question 22: Which Angular CLI command starts the development server?

ng start
ng serve
ng run
ng build

Explanation: ng serve starts the dev server.

Question 23: What port does ng serve use by default?

3000
8080
4200
5000

Explanation: Angular uses port 4200 by default.

Question 24: Which file contains project configuration?

package.json
tsconfig.json
angular.json
main.ts

Explanation: angular.json holds project configuration.

Question 25: What is HttpClient used for?

Routing
State management
Making HTTP requests
Form validation

Explanation: HttpClient is used for API communication.

Question 26: Which module provides HttpClient?

BrowserModule
CommonModule
HttpClientModule
FormsModule

Explanation: HttpClientModule provides HTTP services.

Question 27: What is a template in Angular?

CSS file
HTML view
TypeScript logic
JSON config

Explanation: Templates define the HTML view.

Question 28: Which file holds component HTML?

.ts
.css
.html
.json

Explanation: Component templates are written in HTML files.

Question 29: Which lifecycle hook runs first?

ngOnChanges
ngOnInit
constructor
ngAfterViewInit

Explanation: Constructor runs first when a component is created.

Question 30: Which lifecycle hook is used for initialization logic?

ngOnInit
ngDoCheck
ngAfterContentInit
ngOnDestroy

Explanation: ngOnInit is used for initialization.

Question 31: What is routing in Angular?

Component creation
Navigating between views
Calling APIs
Handling forms

Explanation: Routing enables navigation between views.

Question 32: Which module enables routing?

RouterModule
RouteModule
NavigationModule
BrowserModule

Explanation: RouterModule enables Angular routing.

Question 33: What is <router-outlet> used for?

Display headers
Render routed components
Bind data
Load services

Explanation: router-outlet displays routed components.

Question 34: What is a directive?

A service
A component only
A class that modifies DOM behavior
A module

Explanation: Directives modify DOM behavior.

Question 35: Which directive applies styles conditionally?

ngClass
ngStyle
Both A and B
ngIf

Explanation: ngClass and ngStyle apply styles dynamically.

Question 36: What does ngClass do?

Binds events
Applies CSS classes dynamically
Loops data
Validates forms

Explanation: ngClass dynamically applies CSS classes.

Question 37: What does ngStyle do?

Adds classes
Applies inline styles
Handles routing
Handles forms

Explanation: ngStyle applies inline styles dynamically.

Question 38: Which Angular feature improves performance by reusing DOM?

Directives
Change detection
TrackBy in ngFor
Services

Explanation: trackBy optimizes ngFor rendering.

Question 39: What is change detection?

Routing mechanism
Detecting data changes and updating view
Handling HTTP calls
Managing state

Explanation: Change detection updates the view on data change.

Question 40: Which file manages dependencies?

angular.json
package.json
tsconfig.json
main.ts

Explanation: package.json manages dependencies.

Question 41: What does ng build do?

Runs server
Creates production build
Installs packages
Generates components

Explanation: ng build creates a build output.

Question 42: Which flag creates a production build?

--dev
--prod
--build
--release

Explanation: --prod creates a production build.

Question 43: What is Angular CLI?

UI library
Command-line tool
Template engine
Database tool

Explanation: Angular CLI is a command-line tool.

Question 44: Which command generates a component?

ng add component
ng create component
ng generate component
ng build component

Explanation: ng generate component creates a component.

Question 45: What does ngOnDestroy do?

Initializes component
Destroys module
Cleanup before component removal
Handles errors

Explanation: ngOnDestroy is used for cleanup.

Question 46: Which Angular feature supports modular architecture?

Services
Modules
Directives
Pipes

Explanation: Modules support modular architecture.

Question 47: What is the main benefit of Angular?

Lightweight scripting
Complete frontend framework
Backend processing
Database management

Explanation: Angular provides a complete frontend solution.

Back to programming Quizzes

Angular Quiz ( Beginner )

Questions

~15

Minutes

Min Limit