Angular Web Framework Angular Advanced Practice 3 — Questions and Answers
Question 1: In Angular's Router, what is the role of a `CanDeactivate` guard?
- Prevents navigation to a route if the user is not authenticated
- Prevents leaving a route, useful for unsaved-changes warnings (Correct answer)
- Lazy-loads a child module before activating the route
- Resolves data before the component is displayed
Correct answer: Prevents leaving a route, useful for unsaved-changes warnings
CanDeactivate lets you intercept an attempt to leave a route and prompt the user (e.g., 'You have unsaved changes, are you sure?') before allowing navigation away.
Question 2: Which lifecycle hook should you use to perform cleanup such as unsubscribing from Observables to prevent memory leaks?
- ngOnDestroy (Correct answer)
- ngAfterViewInit
- ngOnChanges
- ngDoCheck
Correct answer: ngOnDestroy
ngOnDestroy is called just before Angular destroys the component, making it the correct place to unsubscribe, clear timers, and release other resources.
Question 3: What does the `async` pipe do when it receives a new Observable or Promise?
- Merges emissions from both old and new streams
- Unsubscribes from the old Observable and subscribes to the new one automatically (Correct answer)
- Buffers all emissions until the view is destroyed
- Throws an error if two streams are bound to the same pipe
Correct answer: Unsubscribes from the old Observable and subscribes to the new one automatically
When the bound reference changes, the async pipe unsubscribes from the previous stream and subscribes to the new one, always displaying the latest emitted value.
Question 4: Which Angular testing utility creates a synchronous test environment where you can interact with a compiled component?
- TestBed (Correct answer)
- ComponentFixture
- DebugElement
- HttpClientTestingModule
Correct answer: TestBed
TestBed configures and compiles a test module that mimics an Angular module, allowing you to create component instances in an isolated test environment.
Question 5: In a reactive form, what class represents a group of form controls that can be validated as a unit?
- FormControl
- FormArray
- FormGroup (Correct answer)
- AbstractControl
Correct answer: FormGroup
FormGroup aggregates multiple FormControl instances into a single object, exposing the combined valid/invalid state and value as a plain JS object.
Question 6: What Angular schematic command generates a new lazy-loaded feature module with a routing file?
- ng generate module feature --lazy
- ng generate module feature --routing --route feature (Correct answer)
- ng generate component feature --lazy
- ng generate module feature --flat --routing
Correct answer: ng generate module feature --routing --route feature
The `--routing` flag adds a routing module, and `--route feature` registers the lazy-loaded route automatically in the parent router config.
Question 7: Which decorator is used to inject a dependency using a specific token rather than a class type?
- @Optional
- @Self
- @Inject (Correct answer)
- @Host
Correct answer: @Inject
@Inject(TOKEN) explicitly tells Angular's DI system which injection token to resolve, necessary when the token is not a class (e.g., InjectionToken<T>).
Angular Web Framework Angular Advanced Practice 3
In Angular's Router, what is the role of a `CanDeactivate` guard?