Angular project structure walkthrough - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define the root component selector in Angular.

Angular

@Component({
  selector: '[1]',
  templateUrl: './app.component.html'
})
export class AppComponent {}

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

Amain-app

Broot-app

Capp-root

Dapp-main

Attempts:

3 left

💡 Hint

Common Mistakes

Using a selector name that does not match the one in index.html.

Confusing the selector with the component class name.

The root component selector is usually 'app-root' in Angular projects.

2fill in blank

medium

Complete the code to import the CommonModule in a standalone Angular component.

Angular

@Component({
  standalone: true,
  imports: [[1]],
  template: `<p>Hello World</p>`
})
export class HelloComponent {}

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

ACommonModule

BFormsModule

CHttpClientModule

DRouterModule

Attempts:

3 left

💡 Hint

Common Mistakes

Importing FormsModule when no forms are used.

Forgetting to import CommonModule causing template errors.

CommonModule provides common directives like *ngIf and *ngFor needed in templates.

3fill in blank

hard

Fix the error in the Angular module declaration by completing the missing metadata property.

Angular

@NgModule({
  declarations: [AppComponent],
  [1]: [BrowserModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

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

Aschemas

Bimports

Cproviders

Dexports

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'exports' instead of 'imports' for module dependencies.

Omitting the imports property causing runtime errors.

The 'imports' property is used to bring other modules into this module.

4fill in blank

hard

Fill both blanks to complete the Angular routing module setup.

Angular

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

@NgModule({
  imports: [RouterModule.[2](routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

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

AHomeComponent

BforRoot

CforChild

DAppComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using forChild in the root routing module.

Referencing the wrong component in the route.

The root route uses HomeComponent and RouterModule.forRoot sets up the main routes.

5fill in blank

hard

Fill all three blanks to create a reactive form control in Angular.

Angular

import { Component, [1] } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-input',
  template: `<input [formControl]="nameControl">` 
})
export class InputComponent implements OnInit {
  nameControl = new FormControl([2]);

  ngOnInit() {
    this.nameControl.[3](value => console.log(value));
  }
}

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

AOnInit

B''

CvalueChanges.subscribe

DngOnInit

Attempts:

3 left

💡 Hint

Common Mistakes

Not subscribing to valueChanges causing no reaction to input.

Using ngOnInit without importing OnInit.

OnInit is imported for lifecycle hooks, the FormControl starts with an empty string, and valueChanges.subscribe listens for changes.