Query parameters and fragments in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to navigate with query parameters in Angular.

Angular

this.router.navigate(['/search'], { queryParams: [1] });

Drag options to blanks, or click blank then click option'

A'term=angular'

B{ term: 'angular' }

C[ term: 'angular' ]

Dterm=angular

Attempts:

3 left

💡 Hint

Common Mistakes

Passing query parameters as a string instead of an object.

Using array syntax instead of object syntax.

Query parameters must be passed as an object inside queryParams.

2fill in blank

medium

Complete the code to read query parameters using Angular's ActivatedRoute.

Angular

this.route.queryParams.subscribe(params => { this.searchTerm = params[1]; });

Drag options to blanks, or click blank then click option'

A.term

B['term']

C[term]

D('term')

Attempts:

3 left

💡 Hint

Common Mistakes

Using bracket notation with strings instead of dot notation.

Using parentheses which is invalid syntax.

You access query parameters as properties of the params object using dot notation.

3fill in blank

hard

Fix the error in the code to navigate with a fragment in Angular.

Angular

this.router.navigate(['/details'], { [1]: 'section2' });

Drag options to blanks, or click blank then click option'

Afragment

Bhash

Cfragments

DqueryParams

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'fragments' or 'hash' which are not valid properties.

Confusing fragment with queryParams.

The correct property to set a URL fragment is fragment.

4fill in blank

hard

Fill both blanks to read query parameters and fragment from ActivatedRoute.

Angular

this.route.queryParams.subscribe(params => { this.id = params[1]; });
this.route.[2].subscribe(fragment => { this.section = fragment; });

Drag options to blanks, or click blank then click option'

A.id

Bfragment

Cfragments

DqueryFragment

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect property names like 'fragments' or 'queryFragment'.

Using bracket notation for params instead of dot notation.

Query parameters are accessed with params.id and fragments with route.fragment.

5fill in blank

hard

Fill all three blanks to navigate with query parameters and a fragment.

Angular

this.router.navigate([[1]], { queryParams: [2], [3]: 'top' });

Drag options to blanks, or click blank then click option'

A'profile'

B{ user: '123' }

Cfragment

D'dashboard'

Attempts:

3 left

💡 Hint

Common Mistakes

Passing route as a string instead of an array.

Using wrong property name for fragment.

Passing queryParams as a string.

The first argument is the route array, queryParams is an object, and fragment is set with the 'fragment' property.