Angular Mastery Challenge

Test

Parties jouées 1

Créer une copie

À propos de cette activité

Advanced Angular quiz

Créé par

Padmaja Rokade

India

Téléchargez la version pour jouer sur papier

Top 10 résultats

#	Jeux	Précision	temps
1	Sayanjit Dey 24 Avril 2026	% 70	04:16

Voulez-vous apparaître dans le Top 10 de ce jeu? Connectez-vous pour vous identifier.

Créez votre propre jeu gratuite à partir de notre créateur de jeu

Affrontez vos amis pour voir qui obtient le meilleur score dans ce jeu

Créer un défi

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'.
Practice Quiz - Punnett Square, Variation, and Mutations

Benjamin D Morgan

United States

(14)

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

Benjamin D Morgan

United States

(39)

Photosynthesis vs Cellular Respiration - Practice Quiz
Tissues - Practice Quiz

Benjamin D Morgan

United States

(16)

Tissues - Practice Quiz

		%
	Anonyme	%
		%
		%

Imprimez votre jeu

Angular Mastery Challenge


Angular Mastery ChallengeVersion en ligne Advanced Angular quiz par 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.

Vous pouvez intégrer le jeu dans un LMS compatible avec LTI 1.1 ou LTI 1.3 comme Canvas, Moodle ou Blackboard. Les scores seront ainsi automatiquement enregistrés dans le carnet de notes de la plateforme.

Angular Mastery Challenge

Test

À propos de cette activité

Créé par

Téléchargez la version pour jouer sur papier

Top Jeux

Test

Spanish Alphabet Listening

Test

UPS 5 Seeing Habits Quiz

Test

Practice Quiz - Punnett Square, Variation, and Mutations

Test

Photosynthesis vs Cellular Respiration - Practice Quiz

Test

Tissues - Practice Quiz

Angular Mastery ChallengeVersion en ligne

par 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