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.

Practice

1. What is the main purpose of the @Component decorator in Angular?

easy

A. To create a routing configuration

B. To define a service for dependency injection

C. To mark a class as an Angular component and provide metadata

D. To import external modules

Solution

1. Step 1: Understand the role of decorators in Angular

   Decorators add metadata to classes, telling Angular how to use them.

2. Step 2: Identify what @Component specifically does

   @Component marks a class as a component and provides metadata like selector and template.

3. Final Answer:

   To mark a class as an Angular component and provide metadata -> Option C

4. Quick Check:

   @Component marks component class = C [OK]

Hint: Remember: @Component decorates component classes only [OK]

Common Mistakes:

• Confusing @Component with @Injectable
• Thinking @Component defines routing
• Assuming @Component imports modules

2. Which of the following is the correct way to specify the HTML template inline in a component decorator?

easy

A. @Component({ template: 'Hello' })

B. @Component({ templateUrl: './app.component.html' })

C. @Component({ templateFile: 'app.component.html' })

D. @Component({ htmlTemplate: 'Hello' })

Solution

1. Step 1: Recall the difference between template and templateUrl

   template is for inline HTML, templateUrl is for external file path.

2. Step 2: Identify the correct syntax for inline template

   Only template: '

   Hello

   ' is valid for inline HTML.

3. Final Answer:

   @Component({ template: '<h1>Hello</h1>' }) -> Option A

4. Quick Check:

   Inline HTML uses template property = A [OK]

Hint: Use 'template' for inline HTML, 'templateUrl' for files [OK]

Common Mistakes:

• Using templateUrl with inline HTML
• Using wrong property names like templateFile
• Confusing template and htmlTemplate

3. Given this component decorator:

@Component({ selector: 'app-hello', template: '
{{ message }}
' })
export class HelloComponent { message = 'Hi!'; }

What will be rendered in the browser when <app-hello></app-hello> is used?

medium

A. {{ message }}

B. Hi!

C. An empty paragraph

D. Error: message is undefined

Solution

1. Step 1: Understand Angular interpolation

   The double curly braces {{ message }} bind to the component's property 'message'.

2. Step 2: Check the value of 'message' in the component

   It is set to 'Hi!', so Angular replaces {{ message }} with 'Hi!'.

3. Final Answer:

   <p>Hi!</p> -> Option B

4. Quick Check:

   Interpolation shows property value = A [OK]

Hint: {{ }} shows property value, not raw text [OK]

Common Mistakes:

• Thinking interpolation shows raw {{ message }}
• Assuming message is undefined without constructor
• Expecting empty output without initialization

4. Identify the error in this component decorator:

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styles: ['./test.component.css']
})
export class TestComponent {}

medium

A. The selector name is invalid

B. Missing @Injectable decorator

C. templateUrl should be template for inline HTML

D. The styles property should be styleUrls for external CSS files

Solution

1. Step 1: Check the use of styles vs styleUrls

   styles is for inline CSS strings; styleUrls is for external CSS files.

2. Step 2: Identify the mistake in the code

   The code uses styles with a file path array, which is incorrect; it should be styleUrls.

3. Final Answer:

   The styles property should be styleUrls for external CSS files -> Option D

4. Quick Check:

   External CSS uses styleUrls, not styles = D [OK]

Hint: Use styleUrls for files, styles for inline CSS [OK]

Common Mistakes:

• Confusing styles and styleUrls
• Thinking styles accepts file paths
• Adding @Injectable to components

5. You want to create a reusable button component with the selector app-button that uses an external HTML template and multiple CSS files. Which is the correct component decorator configuration?

hard

A. @Component({ selector: 'app-button', templateUrl: './button.html', styleUrls: ['./btn.css', './colors.css'] })

B. @Component({ selector: 'app-button', template: 'Click', styles: ['./btn.css', './colors.css'] })

C. @Component({ selector: 'app-button', templateUrl: './button.html', styles: ['./btn.css', './colors.css'] })

D. @Component({ selector: 'app-button', template: './button.html', styleUrls: ['./btn.css', './colors.css'] })

Solution

1. Step 1: Identify how to specify external HTML template

   Use templateUrl with the path to the HTML file.

2. Step 2: Identify how to specify multiple external CSS files

   Use styleUrls with an array of CSS file paths.

3. Step 3: Check each option for correct usage

   The configuration using templateUrl: './button.html' and styleUrls: ['./btn.css', './colors.css'] is correct. Others incorrectly use template for a file path or styles for external CSS files.

4. Final Answer:

   @Component({ selector: 'app-button', templateUrl: './button.html', styleUrls: ['./btn.css', './colors.css'] }) -> Option A

5. Quick Check:

   External HTML + multiple CSS files = templateUrl + styleUrls = B [OK]

Hint: External HTML needs templateUrl; multiple CSS files need styleUrls [OK]

Common Mistakes:

• Using styles for external CSS files
• Using template instead of templateUrl for files
• Mixing inline and external template properties