Router outlet for view rendering in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a router outlet in the template.

Angular

<router-[1]></router-[1]>

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

Arender

Bview

Coutlet

Ddisplay

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'view' or 'render' instead of 'outlet'.

Forgetting the hyphen in the tag name.

The router-outlet tag is used in Angular templates to mark where routed components will be displayed.

2fill in blank

medium

Complete the code to import RouterModule with routes in an Angular module.

Angular

imports: [RouterModule.[1](routes)]

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

AforRoot

BforChild

Cconfigure

Dsetup

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'forChild' in the root module.

Using non-existent methods like 'configure' or 'setup'.

RouterModule.forRoot(routes) sets up the router at the application's root level.

3fill in blank

hard

Fix the error in the route configuration to display HomeComponent at path ''.

Angular

const routes: Routes = [{ path: '', component: [1] }];

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

AHomeComponent

Bhome

ChomeComponent

DHome

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase or partial names like 'home' or 'Home'.

Using variable names instead of component class names.

The component property must reference the component class name exactly, which is usually PascalCase and ends with 'Component'.

4fill in blank

hard

Fill both blanks to define a route for AboutComponent with path 'about'.

Angular

const routes: Routes = [{ path: '[1]', component: [2] }];

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

Aabout

BAboutComponent

Chome

DHomeComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up component names or paths.

Using incorrect casing for component names.

The path string should match the URL segment, and the component should be the class to render.

5fill in blank

hard

Fill all three blanks to create a router link to 'contact' page with text 'Contact Us'.

Angular

<a routerLink="[1]">[2]</a> <!-- uses [3] directive -->

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

Acontact

BContact Us

CrouterLink

DrouterOutlet

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'routerOutlet' instead of 'routerLink' in the anchor tag.

Incorrect path or link text.

The routerLink directive sets the link path, and the anchor text is what the user sees.