Component decorator and metadata in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define an Angular component with the correct decorator.

Angular

import { Component } from '@angular/core';

@Component({
  selector: '[1]',
  template: `<h1>Hello Angular</h1>`
})
export class HelloComponent {}

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

Aapp-hello

Bhello-app

Cmy-app

Dmain-app

Attempts:

3 left

💡 Hint

Common Mistakes

Using uppercase letters in the selector

Omitting the selector property

The selector defines the custom HTML tag for the component. app-hello is a common prefix pattern.

2fill in blank

medium

Complete the code to add a CSS style file to the component metadata.

Angular

@Component({
  selector: 'app-style',
  template: `<p>Styled text</p>`,
  [1]: ['./style.component.css']
})
export class StyleComponent {}

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

Astyles

BcssFiles

CstyleUrls

DstyleSheets

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'styles' instead of 'styleUrls' for external files

Misspelling the property name

The styleUrls property links external CSS files to the component.

3fill in blank

hard

Fix the error in the component metadata by completing the missing property.

Angular

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

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

AcssFiles

BstyleUrls

Cstyles

DstyleSheets

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'styles' for external CSS files

Misspelling 'styleUrls'

The correct property to link external CSS files is styleUrls. Using any other name causes Angular to ignore the styles.

4fill in blank

hard

Fill both blanks to define a component with inline template and styles.

Angular

@Component({
  selector: 'app-inline',
  [1]: `<p>Inline content</p>`,
  [2]: [`p { color: blue; }`]
})
export class InlineComponent {}

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

Atemplate

BtemplateUrl

Cstyles

DstyleUrls

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'templateUrl' with inline HTML

Using 'styleUrls' with inline CSS

Use template for inline HTML and styles for inline CSS arrays.

5fill in blank

hard

Fill all three blanks to create a component with selector, inline template, and external styles.

Angular

@Component({
  [1]: 'app-full',
  [2]: `<h2>Full component</h2>`,
  [3]: ['./full.component.css']
})
export class FullComponent {}

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

Aselector

Btemplate

CstyleUrls

Dstyles

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing 'styles' with external CSS files

Using 'templateUrl' instead of 'template' for inline HTML

The selector defines the tag, template is for inline HTML, and styleUrls links external CSS files.