Inline vs external templates in Angular - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define an inline template in an Angular component.

Angular

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

@Component({
  selector: 'app-inline',
  template: '[1]'
})
export class InlineComponent {}

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

A`<p>Hello inline!</p>`

B'<p>Hello inline!</p>'

C'<p>Hello external!</p>'

D`<p>Hello external!</p>`

Attempts:

3 left

💡 Hint

Common Mistakes

Using backticks for inline templates is allowed but here single quotes are expected.

Confusing 'templateUrl' with 'template' property.

The template property for inline templates uses a string with single or double quotes. Here single quotes are used around the HTML.

2fill in blank

medium

Complete the code to specify an external template file in an Angular component.

Angular

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

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

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

Atemplate

BstyleUrl

CtemplateUrl

DtemplateFile

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'template' instead of 'templateUrl' for external templates.

Misspelling 'templateUrl' as 'templateFile' or 'styleUrl'.

The 'templateUrl' property points to an external HTML file for the component's template.

3fill in blank

hard

Fix the error in the component decorator to correctly use an inline template.

Angular

@Component({
  selector: 'app-fix',
  templateUrl: '[1]'
})
export class FixComponent {}

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

A'./fix.component.html'

B`<p>Fixed inline template</p>`

C`./fix.component.html`

D'<p>Fixed inline template</p>'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'templateUrl' with inline HTML string causes errors.

Using backticks instead of quotes is allowed but here quotes are expected.

For inline templates, use the 'template' property with a string containing HTML, not 'templateUrl'.

4fill in blank

hard

Fill both blanks to define an Angular component with an external template and inline styles.

Angular

@Component({
  selector: 'app-mixed',
  [1]: './mixed.component.html',
  [2]: ['p { color: blue; }']
})
export class MixedComponent {}

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

AtemplateUrl

Btemplate

Cstyles

DstyleUrls

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'template' instead of 'templateUrl' for external templates.

Using 'styleUrls' instead of 'styles' for inline styles.

Use 'templateUrl' for external HTML templates and 'styles' for inline CSS styles as an array of strings.

5fill in blank

hard

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

Angular

@Component({
  selector: '[1]',
  template: '[2]',
  styles: [ '[3]' ]
})
export class InlineFullComponent {}

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

Aapp-inline-full

B<h1>Welcome!</h1>

Ch1 { font-weight: normal; }

Dapp-full-inline

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing selector with template or styles.

Forgetting to wrap styles in an array.

Using external template or styles properties instead of inline.

The selector is a string naming the component tag, template is inline HTML string, and styles is an array with CSS strings.