Angular Quiz

Which CLI command should we run to compile and serve our project locally in development mode?

ng serve

ng build

ng development

ng deploy

What does Angular refer to?

The latest version of the framework (Angular 2+)

Version 3 of the framework

Version 16 of the framework

Version 1 of the framework

Which of the following file names does not follow the Angular style-guide conventions?

uppercase-pipe.ts

highlight-all.directive.ts

name.service.ts

app.component.ts

Which one of the following is not a valid Angular CLI command?

ng fix

ng build

ng add

ng test

Which one of these concepts does not exist in the Angular framework?

Standalone components

Structural directives

Redux reducers

NgModules

Which of the following statements is true?

Services link components to server-side HTML templates

Pipes are used to format data such as dates and numbers

Component libraries cannot be customized to our needs

Directives are a way to interact with server-side APIs

What's the main language of the Angular framework?

JSP

AppScript

JavaScript

TypeScript

When do we need to create or use Angular services?

To implement business logic

To filter data displayed in a component

To generate, serve, compile, test, and build Angular code

To interact with the browser

What is the difference between an interface and a class in TypeScript?

There is no difference between an interface and a class in TypeScript.

An interface is a contract that defines the properties and methods that an object must have. A class is a blueprint for creating objects.

A class is a contract that defines the properties and methods that an object must have. An interface is a blueprint for creating objects

None of these answers are correct.

According to the following declaration:

let users = ["a", "b", "c"];

What is the type of users?

Array

None of the above

string[]

char[]

What is the type of the variable `myVar` if it is declared as follows:

let myVar: string | number;

number

string

This syntax doesn't work

string or number

Which of the following code examples does not compile?

let a: number = 42;

const c: number = "21";

var a = 42;

let c = 'number';

ngIf shorthand syntax

ngIf expanded syntax:

ngIf with an "else" block:

ngIf form with "then" and "else" blocks:

ngIf with storing the value locally:

ngFor shorthand syntax

ngFor expanded syntax

ng-template

switch case default

@for with @empty

Contextual variable
$count

Contextual variable
$index

Contextual variable
$first

Contextual variable
$last

Contextual variable
$even

Contextual variable
$odd

All context variables usage example

Structural directives

Structural directive
select

Structural directive
select
shorthand

Binding key in
<p class="data-view" *select="let data from source">The data is: {{data}}</p>

One structural directive per element

creating the SelectDirective

ng generate directive select

Which @for block option is required?

count

track

trackBy

$index

Which of the following options is not a valid Angular selector?

app-header

ng-header

[header]:not(div)

.header

What is the decorator used to pass data to a component?

@Data()

@Input()

@Model()

@Prop()

Which of these HTML template examples would automatically render the latest value of data when data changes?

(click)="data"

([ngModel])=”data”

[value]="data"

{data}

Which of the following correctly sets a new value for a Signal called mySig?

mySig = 21

mySig() = 21

mySig.set(21)

mySig.setValue(21)

Which component decorator option turns a component into a standalone feature?

module: false

changeDetectionStrategy: Standalone

ngModule: false

standalone: true

What is the decorator used to pass data to a component?

@Prop()

@Property()

@Input()

@Data()

Is there anything wrong with the following template?

<button (click)="extendDateFor(selection)" disabled="selection.isEmpty()">
Extend date for selection
</button>

No, the code looks correct.

Yes, curly braces {{ }} are missing for the expression bindings.

Yes, the click listener syntax should be (onClick).

Yes, square brackets are missing around disabled. It should be [disabled] instead.

What is the difference between an interface and a class in TypeScript?

A class is a contract that defines the properties and methods that an object must have. An interface is a blueprint for creating objects

There is no difference between an interface and a class in TypeScript.

None of these answers are correct.

An interface is a contract that defines the properties and methods that an object must have. A class is a blueprint for creating objects.

According to the following declaration:

let users = ["a", "b", "c"];

What is the type of users?

string[]

None of the above

char[]

Array

What is the type of the variable myVar if it is declared as follows:

let myVar: string | number;

string

number

This syntax doesn't work

string or number

Which of the following code examples does not compile?

const c: number = "21";

var a = 42;

let c = 'number';

let a: number = 42;

Which of the following is not an Angular directive from @angular/common?

ngBind

ngIf

ngSwitch

ngClass

Which of these options is the correct syntax for pipe parameters?

{{ amount | currency : ‘USD’ }}

{{ amount | currency :: ‘$’ }}

{{ amount | currency | ‘USD’ }}

None of the above - all are incorrect

What is a directive?

A way to inject services and business logic

A component with no HTML template

A pipe with an HTML template

A component with no selector

Which one of these pipes does not exist in the Angular framework?

json

format

titlecase

currency

In Angular, which of the following decorators is used to register a class as a service?

@Inject

@Service

@Injectable

@NgService

Can the following class be injected into a component as-is?

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";

@Injectable()
export class CartService {
constructor(private http: HttpClient) {}

getCartContents() {
// Some code
}
}

No, it does not have the @Service decorator

Yes

No, that code does not compile

No, it has to be added to an array of providers first

According to the following code, how many instances of TokenService can we have in an Angular application?

(assuming there's no other dependency injection configuration anywhere else for that service)

@Injectable({
providedIn: "root",
})
export class TokenService {
// ... (rest of the class implementation)
}

It could be any number of instances

Zero or one

One

One per module

What is the name of the service used to make HTTP requests with Angular?

$resource

HttpClient

HttpService

Fetch

Which of the following properties is NOT a valid property of an Angular FormControl:

dirty

valid

async

untouched

What is the name of the Angular service used to create reactive forms?

FormFactory

FormBuilder

FormControl

FormService

Which of these statements is correct regarding template-driven forms?

They are configured only in HTML templates

They are configured with TypeScript code

They enable RxJs subscriptions to any value and state change in the form

They require simple functions for form validation

Which of the following CSS classes is NOT automatically managed by Angular forms?

ng-invalid

ng-dirty

ng-select

ng-touched

In Angular, what is the purpose of the tag?

It defines the root component of the application

It's a way to embed an iframe in an Angular application

It specifies navigation links for the user

It indicates where routed components will be rendered

Considering the following router config, which component will be rendered when a user navigates to /products/21?

RouterModule.forRoot([
{ path: "", component: ProductListComponent },
{ path: "products/:productId", component: ProductDetailsComponent },
]);

ProductDetailsComponent

None; there is no mapping for that route

ProductListComponent

A 404 page would show up

Which of the following is an existing guard function that can be used with the Angular router?

CanActivate

CanInit

CannotActivate

CanNavigate

What is the name of the Angular service used to manage routing?

RouterOutlet

ActivatedRoute

Router

RouterService

What is the recommended approach when using multiple Signals in a single component?
- A) Use global variables for signals
- B) Combine similar Signals into one
- C) Utilize composed signals for better readability
- D) Manage Signals in a service to share state

What type of value can a Signal hold in Angular?
- A) Only primitive values
- B) Only objects
- C) Any type of value (primitive, objects, arrays, etc.)
- D) String values only

What is a common pattern observed when using Signals in Angular?
- A) Mixing signals with reactive forms
- B) Using signals only for component state management
- C) Combining signals with observables
- D) Having signals for only simple values

What is the default behavior of a Signal in Angular with respect to change detection?
- A) Signals do not trigger change detection in Angular.
- B) Signals trigger change detection only on subscription.
- C) Signals automatically trigger change detection when their value is updated.
- D) Signals require manual triggers for change detection.

Which of the following correctly resets a writable signal to a new value?
- A) `signal.reset(newValue);`
- B) `signal.set(newValue);`
- C) `signal.update(newValue);`
- D) `signal.value = newValue;`

How can you react to changes in a Signal in Angular?
- A) By subscribing using `.subscribe()`
- B) By using `ngFor`
- C) By using `*ngIf`
- D) Automatically in the template with interpolation

Which lifecycle hook is most common for reading Signals?
- A) ngOnInit
- B) ngAfterViewInit
- C) ngOnDestroy
- D) ngOnChanges

How do you create a writable signal in Angular?
- A) `let signal = signal(writableValue);`
- B) `let signal = new Signal(writableValue);`
- C) `let signal = writableSignal(writableValue);`
- D) `let signal = createSignal(writableValue);`

Which of the following is a key advantage of using Signals in Angular?
- A) It allows hiding components.
- B) It provides built-in form validation.
- C) It simplifies managing state changes.
- D) It automatically generates HTTP service endpoints.

What are Angular Signals primarily used for?
- A) To manage Angular services
- B) To handle state and reactivity
- C) To perform HTTP requests
- D) To define routes

What is the primary function of an Angular Signal?
A: To directly manipulate the DOM outside of Angular's change detection.
B: To provide a wrapper around a value that notifies consumers when it changes, enabling fine-grained reactivity.
C: To replace RxJS Observables for all asynchronous operations.
D: To define the visual structure of a component using template syntax.

Which of the following CORRECTLY shows how to create and update a writable signal in an Angular component?
A: this.counter = signal(0); this.counter.setValue(1);
B: this.counter = new Signal(0); this.counter.update(1);
C: this.counter = signal(0); this.counter.set(1);
D: this.counter = createSignal(0); this.counter(1);

How does a `computed()` signal primarily differ from a writable `signal()`?
A: Computed signals can only hold primitive values, while writable signals can hold objects.
B: Computed signals update their value immediately when dependencies change, whereas writable signals update asynchronously.
C: Computed signals derive their value from other signals and are lazily evaluated and memoized, while writable signals are directly updated via `.set()` or `.update()`.
D: Writable signals automatically track dependencies, while computed signals require manual dependency registration.

In a real-world application, when would you use a computed signal INSTEAD OF directly calculating a value in the template?
A: When you need to display the current time that updates every second.
B: When you have a complex calculation based on signals that's used in multiple places in your template.
C: When you need to trigger an HTTP request whenever a signal changes.
D: When you need to update multiple signals simultaneously.

In an Angular component using `ChangeDetectionStrategy.OnPush`, what occurs when a signal read within its template is updated?
A: The component and all its ancestors are automatically marked for check.
B: Only the specific DOM element bound to the signal is updated, bypassing component change detection.
C: The component is automatically marked for check, ensuring it re-renders to reflect the signal's new value.
D: An error is thrown because signals cannot be used directly in OnPush component templates.

Which scenario is the MOST appropriate use case for an `effect()` in Angular Signals?
A: Calculating a derived value based on one or more signals to display in the template.
B: Creating a new signal whose value depends on another signal.
C: Logging signal value changes to the console or synchronizing signal state with `localStorage`.
D: Binding a signal's value to an input property of a child component.

How do Signals compare to RxJS Observables in Angular applications?
A: Signals completely replace RxJS and should be used for all reactive programming needs.
B: Signals are for synchronous state management while RxJS excels at handling asynchronous streams, transformations, and complex event patterns.
C: Signals are exclusively for components, while RxJS is only for services.
D: Signals work with templates but RxJS doesn't work with Angular's binding system.

What happens when you modify a deeply nested property within an object held by a signal without using `.set()` or `.update()`?
A: The signal automatically detects the change and notifies all consumers.
B: The signal won't notify consumers because it uses reference equality for objects by default.
C: Angular throws a runtime error prompting you to use an immutable update pattern.
D: The signal will warn you in the console but still update dependents.

Why is using `computed()` generally preferred over `effect()` for deriving state that will be used elsewhere in the application or template?
A: Effects run asynchronously, which is unsuitable for state used in templates.
B: Computed signals are lazily evaluated and memoized, making them more efficient for state derivation than effects which run eagerly.
C: Effects cannot read other signals, only writable signals can.
D: Computed signals automatically clean up their dependencies, whereas effects can cause memory leaks.

What is the main purpose of the `linkedSignal` function (currently in Developer Preview)?
A: To create a signal that mirrors an RxJS Observable.
B: To establish a two-way data binding between a signal and a form control.
C: To create a signal whose state is intrinsically derived from another signal or computation, ensuring it always reflects the source.
D: To link multiple components together using a shared signal state.

What primary problem does the experimental `resource()` function aim to solve within Angular's signal ecosystem?
A: Managing complex component hierarchies.
B: Improving the performance of computed signals with many dependencies.
C: Integrating and managing state derived from asynchronous operations (like API calls) directly into the signal graph.
D: Providing a way to create signals that are automatically persisted to browser storage.

How would you properly test a component that uses signals in Angular?
A: You can't test components with signals using Angular's TestBed.
B: Use spyOn to mock signals and manually trigger change detection between signal updates.
C: Directly modify component properties and use detectChanges() to update the view, ignoring signals completely.
D: Interact with signals normally through component methods and use TestBed's change detection to see reflected updates in the DOM.

What is the effect of reading a signal's value inside the `untracked()` function?
A: It forces the signal to update its value immediately.
B: It prevents the current reactive context (like a `computed` or `effect`) from establishing a dependency on that signal.
C: It converts the signal into a non-reactive static value.
D: It throws an error if used outside of an `effect`.

Which of the following is a valid performance optimization when working with signals that hold large arrays or objects?
A: Always use JSON.stringify to compare objects for equality before updating signals.
B: Use structural sharing techniques when updating, modifying only the parts that changed while reusing unchanged portions.
C: Convert all signals to RxJS Observables for better performance with complex objects.
D: Split large objects into individual signals for each property to improve change detection.

Reactive vs. Template Driven Forms:
Setup of Form model?

Reactive vs. Template Driven Forms:
Data model?

Reactive vs. Template Driven Forms:
Data flow?

Reactive vs. Template Driven Forms:
Form validation?

what does ng build do?