Inline vs external styles in Angular - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add an inline style that sets the background color to blue.

Angular

<div [[1]]="{'background-color': 'blue'}">Hello</div>

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

AngStyle

Bclass

Cstyle

DstyleUrl

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'style' attribute directly without Angular binding.

Using 'class' instead of style binding.

Using 'styleUrl' which is not valid.

The ngStyle directive is used in Angular to apply inline styles dynamically.

2fill in blank

medium

Complete the component decorator to use an external CSS file named 'app.component.css'.

Angular

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

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

AstyleUrls

Bstyles

CstyleUrl

DcssFiles

Attempts:

3 left

💡 Hint

Common Mistakes

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

Using 'styleUrl' which is incorrect.

Using 'cssFiles' which is not a valid property.

The styleUrls property in Angular component decorator links external CSS files.

3fill in blank

hard

Fix the error in the component decorator to properly apply inline styles.

Angular

@Component({
  selector: 'app-header',
  template: '<h1>Welcome</h1>',
  styles: [[1]]
})

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

Ah1 { color: red; }

B'h1 { color: red; }'

C[ 'h1 { color: red; }' ]

D{ 'h1': { color: 'red' } }

Attempts:

3 left

💡 Hint

Common Mistakes

Not quoting the CSS string.

Using an object instead of a string.

Wrapping the string in an extra array inside the array.

The styles property expects an array of strings with CSS rules as strings.

4fill in blank

hard

Fill both blanks to apply a class 'highlight' using inline styles and external styles.

Angular

<div [[1]]="{'background-color': 'yellow'}" class="[2]">Text</div>

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

AngStyle

Bstyle

Chighlight

Dhighlighted

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'style' instead of 'ngStyle' for binding.

Using a wrong class name that does not exist.

Mixing inline style syntax with class binding.

Use ngStyle for inline style binding and the class name 'highlight' for external CSS.

5fill in blank

hard

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

Angular

@Component({
  selector: 'app-footer',
  template: [1],
  styles: [[2]],
  [3]: ['./footer.component.css']
})

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

A'<footer>Footer content</footer>'

B'footer { font-size: 1.2rem; }'

CstyleUrls

DstylesUrls

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong property names like 'stylesUrls'.

Not quoting the template or styles strings.

Confusing inline styles with external style URLs.

The template is a string with HTML, styles is an array of CSS strings, and styleUrls links external CSS files.