Component styles and encapsulation in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a component with inline styles.

Angular

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

@Component({
  selector: 'app-box',
  template: `<div class=\"box\">Hello</div>`,
  styles: [[1]]
})
export class BoxComponent {}

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

A'div.box { color: red; }'

B`div.box { color: red; }`

Cdiv.box { color: red; }

D[div.box { color: red; }]

Attempts:

3 left

💡 Hint

Common Mistakes

Using single quotes instead of backticks for multi-line CSS.

Not wrapping CSS in a string.

Passing CSS code without quotes.

The styles property expects an array of strings with CSS code. Using backticks allows multi-line CSS.

2fill in blank

medium

Complete the code to set the component's encapsulation to None.

Angular

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

@Component({
  selector: 'app-no-encap',
  template: `<p>No encapsulation</p>`,
  encapsulation: [1].None
})
export class NoEncapComponent {}

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

AViewEncapsulation

BEncapsulation

CComponentEncapsulation

DStyleEncapsulation

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect enum names like Encapsulation or StyleEncapsulation.

Forgetting to import the enum.

The ViewEncapsulation enum controls style encapsulation modes in Angular components.

3fill in blank

hard

Fix the error in the component decorator to properly apply styles with encapsulation.

Angular

@Component({
  selector: 'app-style-fix',
  template: `<h1>Title</h1>`,
  styles: [1],
  encapsulation: ViewEncapsulation.Emulated
})
export class StyleFixComponent {}

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

A[`h1 { font-weight: bold; }`]

B`h1 { font-weight: bold; }`

Ch1 { font-weight: bold; }

D'h1 { font-weight: bold; }'

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a string without an array.

Using single quotes instead of backticks for CSS.

The styles property must be an array of strings, so the CSS should be inside an array with backticks for multi-line support.

4fill in blank

hard

Fill both blanks to create a component with external styles and Shadow DOM encapsulation.

Angular

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

@Component({
  selector: 'app-shadow',
  templateUrl: './shadow.component.html',
  styleUrls: ['./shadow.component.css'],
  encapsulation: [2]
})
export class ShadowComponent {}

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

AViewEncapsulation

BNone

CShadowDom

DEmulated

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'None' or 'Emulated' instead of 'ShadowDom'.

Not importing ViewEncapsulation.

To use Shadow DOM encapsulation, import ViewEncapsulation and set encapsulation to ViewEncapsulation.ShadowDom.

5fill in blank

hard

Fill all three blanks to define a component with inline styles, Emulated encapsulation, and a template.

Angular

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

@Component({
  selector: 'app-inline',
  template: [2],
  styles: [[3]],
  encapsulation: [1].Emulated
})
export class InlineComponent {}

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

AViewEncapsulation

B`<p>Inline template</p>`

C`p { color: blue; }`

D'<p>Inline template</p>'

Attempts:

3 left

💡 Hint

Common Mistakes

Using single quotes for template or styles causing syntax issues.

Not wrapping styles in an array.

Forgetting to import ViewEncapsulation.

Use ViewEncapsulation for encapsulation, backticks for the template string, and backticks inside an array for styles.