Angular Beginner Quiz
30 questions on Angular Basics.
Question 1: Which command is used to create a new Angular workspace and initial project using the Angular CLI?
- A. angular create
- B. ng new β (correct answer)
- C. npm angular
- D. ng start
Explanation: The command ng new <project-name> is the official Angular CLI command used to bootstrap and build the entire workspace structure and folder scaffolding for a new application.
Question 2: What language is predominantly used to write Angular applications?
- A. Python
- B. TypeScript β (correct answer)
- C. Ruby
- D. PHP
Explanation: Angular is designed with first-class support for TypeScript, a typed superset of JavaScript that compiles down to plain JavaScript.
Question 3: Which decorator is used to define a class as an Angular component?
- A. @Module
- B. @Directive
- C. @Component β (correct answer)
- D. @Injectable
Explanation: The @Component decorator provides metadata to specify the TypeScript class, HTML template, and CSS selector/styles belonging to an Angular component.
Question 4: What is the default binding expression for one-way data interpolation in Angular templates?
- A. {{ value }} β (correct answer)
- B. { value }
- C. [[ value ]]
- D. <% value %>
Explanation: Angular uses double curly braces {{ }} (often called "mustache" syntax) to evaluate string interpolation inside dynamic HTML templates.
Question 5: Which decorator defines an Angular module, which groups together components, directives, and services?
- A. @Component
- B. @NgModule β (correct answer)
- C. @Module
- D. @Injectable
Explanation: @NgModule is a decorator function that describes module metadata, declaring imports, declarations, exports, and providers.
Question 6: Which directive is used in Angular templates to conditionally render an HTML block?
- A. *ngFor
- B. *ngIf β (correct answer)
- C. ngShow
- D. ngSwitch
Explanation: *ngIf is a structural directive that adds or removes an element from the DOM based on a boolean condition evaluation.
Question 7: Which syntax is used to bind an event handler to a DOM element in Angular?
- A.
[click]="handler()"
- B.
(click)="handler()" β (correct answer)
- C.
bind-click="handler()"
- D.
click={handler}
Explanation: In Angular template syntax, parentheses (event) represent target event binding. Brackets [property] represent property binding.
Question 8: Which command compiles and starts an Angular application locally in developer server mode?
- A. ng serve β (correct answer)
- B. ng run
- C. npm start
- D. ng compile
Explanation: The ng serve command compiles the application, starts a local development server (typically on port 4200), and auto-reloads pages upon file changes.
Question 9: What is dependency injection (DI) in Angular?
- A. A method to style HTML pages
- B. A design pattern used to supply dependencies (like database services) to classes rather than instantiating them manually β (correct answer)
- C. An error debugging tool
- D. A server hosting model
Explanation: Angular's built-in dependency injection system resolves class dependencies (services) by injecting them directly through class constructor parameters.
Question 10: Which decorator defines a class as an injectable service in Angular?
- A. @Component
- B. @NgModule
- C. @Injectable β (correct answer)
- D. @Service
Explanation: The @Injectable decorator informs Angular that the service class can be resolved and injected as a dependency inside components or other services.
Question 11: Which directive is used in Angular templates to iterate over a list of items?
- A. *ngIf
- B. *ngFor β (correct answer)
- C. ngRepeat
- D. ngLoop
Explanation: *ngFor is a structural directive used to loop through arrays or collections, generating child elements for each item inside the list.
Question 12: How is two-way data binding represented in Angular template forms?
- A.
[ngModel]
- B.
(ngModel)
- C.
[(ngModel)] β (correct answer)
- D.
{{ ngModel }}
Explanation: Called the "banana-in-a-box" syntax, [(ngModel)] combines property binding [] and event binding () to enable two-way data synchronization.
Question 13: Which file contains configuration dependencies, scripts, and build information for an Angular application?
- A. package.json β (correct answer)
- B. angular.json
- C. tsconfig.json
- D. index.html
Explanation: Like all Node.js projects, package.json tracks project scripts, packages, and library dependencies. angular.json configures specific Angular CLI builds.
Question 14: Which tool in Angular is used to transform data before rendering it in templates (e.g., lowercase, uppercase, currency)?
- A. Filters
- B. Pipes β (correct answer)
- C. Directives
- D. Modules
Explanation: Pipes are simple functions designed to format template data in real-time using the pipe symbol |. Example: {{ name | uppercase }}.
Question 15: What will happen if you run ng generate component user-profile?
- A. A new database model is built
- B. A new folder containing component class, HTML, CSS, and spec test files is created and declared in the nearest module β (correct answer)
- C. The project is deleted
- D. A production package is built
Explanation: The ng generate command (shorthand ng g) automates component, pipe, service, or directive creation, registering them automatically in metadata modules.
Question 16: What is the role of ComponentStore or services when managing component state in Angular?
- A. They compile code to WebAssembly
- B. They store local data persistently in browser databases
- C. They isolate business logic from UI template layout, providing a single source of truth for component state β (correct answer)
- D. They handle server routing
Explanation: Separating business/state logic into services makes component templates lean, reusable, testable, and maintainable.
Question 17: Which decorator is used to pass data from a parent component down into a child component?
- A. @Input() β (correct answer)
- B. @Output()
- C. @Inject()
- D. @Param()
Explanation: The @Input() decorator marks a class property as an input port, letting parent templates bind values to it using brackets: [childProp]="parentVal".
Question 18: Which decorator is used to send events or data from a child component up to its parent component?
- A. @Input()
- B. @Output() β (correct answer)
- C. @Event()
- D. @Dispatch()
Explanation: @Output() declares an event emitter inside a child component. The parent listens to it using event binding syntax: (childEvent)="parentMethod($event)".
Question 19: Which Angular lifecycle hook is called immediately after a component is initialized and its input properties are set?
- A. ngOnDestroy
- B. ngOnInit β (correct answer)
- C. ngAfterViewInit
- D. ngOnChanges
Explanation: ngOnInit is the most common lifecycle hook. It executes once after Angular is done initializing input bindings, making it the perfect place to fetch API data.
Question 20: What is the difference between template-driven forms and reactive forms in Angular?
- A. Template-driven forms use template directives and are easier; reactive forms use explicit class models, offering better control and testability β (correct answer)
- B. Reactive forms are slower
- C. Template-driven forms are not supported in modern Angular
- D. They are identical
Explanation: Template-driven forms rely on templates (ngModel), ideal for basic forms. Reactive forms leverage FormBuilder models in TypeScript, ideal for complex validations.
Question 21: Which class from @angular/common/http is injected into services to make HTTP requests (GET, POST, etc.)?
- A. HTTP
- B. HttpClient β (correct answer)
- C. HttpModule
- D. RequestClient
Explanation: The HttpClient service executes asynchronous HTTP communications, returning RxJS Observable structures by default.
Question 22: What library does Angular use natively to handle asynchronous streams and event subscription pipelines?
- A. Lodash
- B. RxJS β (correct answer)
- C. jQuery
- D. Axios
Explanation: Reactive Extensions for JavaScript (RxJS) is a core library in Angular, providing Observable patterns to handle asynchronous events and HTTP data pipelines.
Question 23: What is the purpose of the RouterModule.forRoot() method inside an Angular application?
- A. To cache component views
- B. To initialize routing arrays and services at the root level of the application β (correct answer)
- C. To protect login pages
- D. To speed up lazy loading
Explanation: forRoot() configures routes at the application root level. Feature modules use forChild() to avoid duplicating router service states.
Question 24: What does the async pipe do in Angular templates?
- A. Pauses template loading
- B. Subscribes to an Observable or Promise automatically, returning the latest values, and cleans up (unsubscribes) on component destruction β (correct answer)
- C. Executes code concurrently in web workers
- D. Speeds up database queries
Explanation: The async pipe ({{ stream$ | async }}) automates Observable subscription and prevents dangerous memory leaks by automatically unsubscribing on destroy.
Question 25: What does "lazy loading" routes do in Angular?
- A. Delays page loading to show animations
- B. Loads feature modules on-demand only when a user navigates to their specific path, reducing initial load file size β (correct answer)
- C. Caches all data locally
- D. Automatically logs out inactive users
Explanation: By using dynamic import paths (loadChildren: () => import(...)), Angular splits routes into separate bundle files, downloading them only when visited.
Question 26: What is the purpose of the @HostListener decorator in Angular?
- A. To configure hosting servers
- B. To listen to host element events (like mousemove, scroll, click) directly from within a component or directive β (correct answer)
- C. To handle database connections
- D. To compile template attributes
Explanation: @HostListener lets a directive or component declare event handlers bound to the DOM node hosting the directive, capturing global window or element clicks.
Question 27: What is the difference between a Component and a Directive in Angular?
- A. Directives cannot have templates; Components are specialized directives that always declare a template β (correct answer)
- B. Directives can only be used on buttons
- C. Directives are deprecated
- D. They are identical
Explanation: Components are directives with HTML template layers. Attribute directives modify the appearance or behavior of existing DOM nodes; structural directives modify DOM structures.
Question 28: What is a Route Guard in Angular?
- A. A styling framework
- B. An interface method that controls route activation or access validation (e.g. auth checks) β (correct answer)
- C. A hardware firewall
- D. A template sanitizer
Explanation: Route Guards implement interfaces like CanActivate or CanDeactivate, returning booleans or Observables to control page navigation permissions.
Question 29: What is the main benefit of "AOT" compilation in Angular?
- A. It compiles code inside the browser during runtime
- B. Ahead-Of-Time compilation translates templates and TypeScript into JS during compilation, catching errors earlier and speeding up rendering β (correct answer)
- C. It enables database pooling
- D. It prevents server downtime
Explanation: AOT compilation compiles template HTML and CSS into executable JS instructions during production builds, eliminating compiler runtime overhead in the browser.
Question 30: What is the purpose of ViewChild decorator in Angular?
- A. To link child components inside modules
- B. To query and reference a child component, directive, or DOM element inside a parent class body β (correct answer)
- C. To create lazy routes
- D. To style header menus
Explanation: @ViewChild allows components to directly access methods or public APIs of nested child components or DOM element handles inside TypeScript files.