Angular Mastery Challenge

Quiz

Played 1

Create copy

About this activity

Advanced Angular quiz

Created by

Padmaja Rokade

India

Download the paper version to play

Top 10 results

#	Player	Accuracy	time
1	Sayanjit Dey April 24, 2026	% 70	04:16

Do you want to stay in the Top 10 of this game? Log in to identify yourself.

Make your own free game from our game creator

Compete against your friends to see who gets the best score in this game

Make challenge

Photosynthesis vs Cellular Respiration - Practice Quiz

Benjamin D Morgan

United States

(39)

Photosynthesis vs Cellular Respiration - Practice Quiz
Practice Quiz - Punnett Square, Variation, and Mutations

Benjamin D Morgan

United States

(14)

Practice Quiz - Punnett Square, Variation, and Mutations
Spanish Alphabet Listening

Falkenberg Falkenberg

United States

(87)

Spanish alphabet, listening-based assessment
UPS 5 Seeing Habits Quiz

Heather Bell

United States

(12)

Test your knowledge about the 5 seeing habits discussed in the text 'UPS 5 seeing habits'.
Tissues - Practice Quiz

Benjamin D Morgan

United States

(16)

Tissues - Practice Quiz

		%
	Anonymous	%
		%
		%

Print your game

Angular Mastery Challenge


Angular Mastery ChallengeOnline version Advanced Angular quiz by Padmaja Rokade 1 In a component hierarchy, a child component uses a service provided in its own @Component({providers: [...]}) while a parent uses the same token provided at the root injector. If both components inject the service, what instance behavior do you observe when the child is destroyed and recreated? a The child and parent each get the same instance if they use @Optional in the constructor. b The child gets a new service instance on recreation, while the parent’s instance remains a singleton for the app. c The child reuses the parent’s instance unless an explicit @Inject is used in the child. d Both child and parent receive the same singleton instance from the root injector. 2 A template uses both [value] and {{ value }}. If value is 0, what will be displayed by each binding, and why is there a difference? a [value] evaluates to 0 (binding to property) whereas {{ value }} renders 0 as text; the latter runs in interpolation, the former binds to the element property. b [value] displays a boolean false, {{ value }} displays 0. c Both display 0 as text because Angular coerces 0 to string in templates. d Both display nothing because 0 is falsy in Angular templates. 3 Which scenario justifies using a structural directive over a simple attribute directive? Consider rendering behavior and DOM shape. a When you need to add/remove elements from the DOM based on a condition, not just change attributes. b When you need to listen to events inside a template. c When you want to create a reusable component with Input/Output bindings. d When you only want to add a CSS class dynamically. 4 Given a component with @Input() count: number; and an @Output() countChange = new EventEmitter();, which pattern enables two-way binding in a parent template without using [(ngModel)]? a Use a setter for count in the child component and emit on every change. b Use a shared service to mirror the value instead of @Output. c Use [(count)]="parentValue" as a syntax sugar for [count] and (countChange) to keep parent and child in sync. d Use [count] and add (count) event listener manually. 5 In a template-driven form, what runtime condition can cause the form to be valid even if a required input is empty, and how can you fix it? a If the form control is disabled, Angular treats it as valid. b If the input has a no-validate attribute or missing ngModel binding, the form might report validity; ensure proper ngModel and required attributes are present. c Because Angular ignores required validators in template-driven forms by default. d If the form uses reactive validators by mistake. 6 Which statement about Inline Templates is true in a production Angular app? a Inline templates cannot use Dependency Injection or directives. b Inline templates are deprecated in Angular 15+. c Inline templates can simplify small components but harm readability and cacheability for large templates. d Inline templates always compile faster than external templates. 7 What is the key difference between property binding [src] and attribute binding[attr.src] when binding to a DOM element? a [src] binds to the DOM property (which may differ from the attribute), while [attr.src] binds to the HTML attribute value. b [src] only works on images, [attr.src] works on all elements. c [src] binds to the attribute, [attr.src] binds to a data binding. d There is no difference; both bind the same underlying value. 8 In Angular Reactive Forms, which scenario requires using FormControl at the root of the form group tree rather than relying solely on FormBuilder? a When you need explicit control over validators, value changes, and unit-tested control instances, use FormControl objects directly. b FormControl at the root creates duplicate controls. c FormControl is only for template-driven forms, not reactive forms. d FormBuilder is always preferred; FormControl is never needed at root. 9 What happens if you bind a click event with $event.preventDefault() inside a button element with type="submit" in an Angular template? a The $event is not available in Angular templates. b The default form submission is prevented, allowing you to handle the action in the component without navigating away. c The form will submit, ignoring the preventDefault call. d Angular automatically prevents default submit on all button clicks. 10 When would you use a template reference variable (#fileInput) with a hidden input[type='file'] in Angular forms, and what binding captures the user-selected file? a Only for template-driven forms with ngModel bound to the file. b Use it to trigger the file picker from a styled button; (change) on the input captures the selected file via the event target.files[0]. c Files cannot be accessed in Angular templates. d You can bind [value] to the file object. Feedback 1 Providing in the child creates an isolated instance per that component subtree, while root provides a single shared instance. 2 Property binding binds to the DOM property; interpolation converts to string for display. 3 Structural directives alter the DOM structure; attribute directives only change element attributes. 4 Two-way binding can be achieved with a custom input/output pair following the NGModel-like convention. 5 Template-driven forms rely on proper ngModel bindings and validators to reflect validity. 6 Inline templates trade readability for simplicity; large templates benefit from external files. 7 Property binding targets the element property; attribute binding targets the HTML attribute. 8 Direct FormControl instances give you explicit control and easier testability in complex forms. 9 $event is the native event; preventDefault stops the browser submit while you manage logic in TS. 10 Reference the input and read selected file from the change event for custom upload UX.

You can integrate the game into an LMS compatible with LTI 1.1 or LTI 1.3 such as Canvas, Moodle, or Blackboard. This way, the scores will be automatically saved into the platform’s gradebook.

Angular Mastery Challenge

Quiz

About this activity

Created by

Download the paper version to play

Top Games

Quiz

Photosynthesis vs Cellular Respiration - Practice Quiz

Quiz

Practice Quiz - Punnett Square, Variation, and Mutations

Quiz

Spanish Alphabet Listening

Quiz

UPS 5 Seeing Habits Quiz

Quiz

Tissues - Practice Quiz

Angular Mastery ChallengeOnline version

by Padmaja Rokade

In a component hierarchy, a child component uses a service provided in its own @Component({providers: [...]}) while a parent uses the same token provided at the root injector. If both components inject the service, what instance behavior do you observe when the child is destroyed and recreated?

A template uses both [value] and {{ value }}. If value is 0, what will be displayed by each binding, and why is there a difference?

Which scenario justifies using a structural directive over a simple attribute directive? Consider rendering behavior and DOM shape.

Given a component with @Input() count: number; and an @Output() countChange = new EventEmitter();, which pattern enables two-way binding in a parent template without using [(ngModel)]?

In a template-driven form, what runtime condition can cause the form to be valid even if a required input is empty, and how can you fix it?

Which statement about Inline Templates is true in a production Angular app?

What is the key difference between property binding [src] and attribute binding[attr.src] when binding to a DOM element?

In Angular Reactive Forms, which scenario requires using FormControl at the root of the form group tree rather than relying solely on FormBuilder?

What happens if you bind a click event with $event.preventDefault() inside a button element with type="submit" in an Angular template?

When would you use a template reference variable (#fileInput) with a hidden input[type='file'] in Angular forms, and what binding captures the user-selected file?

Feedback