Inline vs external templates in Angular - Practice Questions

Challenge - 5 Problems

❓ component_behavior

intermediate

Difference in template rendering between inline and external templates

Consider two Angular standalone components. One uses an inline template, the other uses an external template file. What is the main difference in how Angular processes these templates during build and runtime?

Angular

Component A:
@Component({
  selector: 'app-inline',
  template: `<p>Inline template works!</p>`,
  standalone: true
})
export class InlineComponent {}

Component B:
@Component({
  selector: 'app-external',
  templateUrl: './external.component.html',
  standalone: true
})
export class ExternalComponent {}

A Both inline and external templates are compiled and bundled identically with no difference in loading behavior.

B Inline templates are compiled directly into the component code, while external templates are loaded asynchronously at runtime.

C External templates are compiled into the component code, but inline templates are fetched over HTTP at runtime.

D Inline templates require a separate HTTP request during runtime, external templates are embedded in the component code.

💡 Hint

Think about how Angular bundles templates during build.

Both inline and external templates are compiled into JavaScript template functions during the build process and bundled identically. There is no difference in processing or loading behavior at runtime.

📝 Syntax

intermediate

Correct syntax for inline template in Angular standalone component

Which of the following is the correct way to define an inline template in an Angular standalone component?

A @Component({ selector: 'app-test', template: `<h1>Hello</h1>`, standalone: true }) export class TestComponent {}

B @Component({ selector: 'app-test', templateUrl: `<h1>Hello</h1>`, standalone: true }) export class TestComponent {}

C @Component({ selector: 'app-test', template: './test.component.html', standalone: true }) export class TestComponent {}

D @Component({ selector: 'app-test', templateUrl: './test.component.html', standalone: true }) export class TestComponent {}

💡 Hint

Inline templates use the 'template' property with backticks for multi-line HTML.

The 'template' property is used for inline HTML content. 'templateUrl' expects a string path to an external HTML file.

🔧 Debug

advanced

Why does this external template fail to load?

An Angular standalone component uses an external template file, but the app shows a 404 error for the template URL. What is the most likely cause?

Angular

@Component({
  selector: 'app-error',
  templateUrl: './missing-template.html',
  standalone: true
})
export class ErrorComponent {}

A The selector name is invalid and causes the template not to load.

B Angular does not support external templates in standalone components.

C The component must use 'template' instead of 'templateUrl' for standalone components.

D The template file path is incorrect or the file is missing from the build output.

💡 Hint

Check the file path and build configuration.

Angular standalone components support external templates. A 404 error usually means the file path is wrong or the file was not included in the build output.

❓ state_output

advanced

Rendered output difference between inline and external templates

Given these two Angular components, what will be the rendered output in the browser for each?

Angular

Inline component:
@Component({
  selector: 'app-inline',
  template: `<p>{{ message }}</p>`,
  standalone: true
})
export class InlineComponent {
  message = 'Hello from inline!';
}

External component:
@Component({
  selector: 'app-external',
  templateUrl: './external.component.html',
  standalone: true
})
export class ExternalComponent {
  message = 'Hello from external!';
}

// external.component.html content:
// <p>{{ message }}</p>

A Both components show 'Hello from inline!'

B Inline component shows 'Hello from inline!'; External component shows 'Hello from external!'

C Inline component shows 'Hello from external!'; External component shows 'Hello from inline!'

D Both components show empty paragraphs because templates are not compiled.

💡 Hint

Each component uses its own message property bound in the template.

Each component binds its own 'message' property in its template. Inline or external template does not affect the binding output.

🧠 Conceptual

expert

Performance implications of inline vs external templates in Angular

Which statement best describes the performance impact of using inline templates compared to external templates in Angular standalone components?

A External templates always perform better because they are cached separately by the browser, unlike inline templates.

B Inline templates reduce HTTP requests and can improve initial load time, but increase bundle size; external templates keep bundle size smaller but add HTTP requests.

C There is no performance difference between inline and external templates because Angular treats them identically.

D Inline templates cause Angular to recompile templates at runtime, slowing down the app compared to external templates.

💡 Hint

Consider network requests and bundle size trade-offs.

There is no significant performance difference between inline and external templates because Angular compiles both into JavaScript during the build process and bundles them identically.