Inline vs external templates in Angular - Hands-On Comparison

Inline vs External Templates in Angular

📖 Scenario: You are building a simple Angular component to display a welcome message. You want to learn how to use inline templates and external templates in Angular components.

🎯 Goal: Create an Angular component first using an inline template, then switch to using an external template file. Understand how to configure both approaches.

📋 What You'll Learn

Create an Angular standalone component named WelcomeComponent

Use an inline template with a <h1> tag that says 'Welcome to Inline Template!' in Step 1

Add a configuration variable useInlineTemplate set to true in Step 2

Use an *ngIf directive in the template to show the inline message only if useInlineTemplate is true in Step 3

Switch to an external template file named welcome.component.html with the message 'Welcome to External Template!' in Step 4

💡 Why This Matters

🌍 Real World

In real Angular projects, developers choose between inline and external templates based on component complexity and team preferences. Inline templates are quick for small components, while external templates help organize larger HTML code.

💼 Career

Understanding how to configure Angular components with inline and external templates is essential for frontend developers working with Angular frameworks in professional environments.

1

Create a standalone Angular component with an inline template

Create a standalone Angular component named WelcomeComponent with an inline template that contains an <h1> tag displaying the text 'Welcome to Inline Template!'. Use the @Component decorator with the template property for the inline template.

Angular

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

@Component({
  // Add component metadata here
})
export class WelcomeComponent {
  // Your code here
}

Need a hint?

Use @Component with template property for inline HTML. Remember to add standalone: true.

2

Add a configuration variable to control template usage

Inside the WelcomeComponent class, add a public boolean variable named useInlineTemplate and set it to true.

Angular

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

@Component({
  selector: 'app-welcome',
  standalone: true,
  template: `Welcome to Inline Template!`
})
export class WelcomeComponent {
  // Add useInlineTemplate variable here
}

Need a hint?

Declare useInlineTemplate as a class property and assign true.

3

Use *ngIf to conditionally show the inline template message

Modify the inline template in the @Component decorator to use the Angular *ngIf directive. Show the <h1> tag with text 'Welcome to Inline Template!' only if the useInlineTemplate variable is true.

Angular

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

@Component({
  selector: 'app-welcome',
  standalone: true,
  // Update template to use *ngIf
  template: `
    
  `
})
export class WelcomeComponent {
  useInlineTemplate = true;
}

Need a hint?

Use *ngIf="useInlineTemplate" inside the <h1> tag to conditionally display it.

4

Switch to an external template file

Change the WelcomeComponent to use an external template file named welcome.component.html instead of the inline template. The external template should contain an <h1> tag with the text 'Welcome to External Template!'. Update the @Component decorator to use the templateUrl property pointing to './welcome.component.html'.

Angular

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

@Component({
  selector: 'app-welcome',
  standalone: true,
  // Replace inline template with external templateUrl
  // Your code here
})
export class WelcomeComponent {
  useInlineTemplate = true;
}

Need a hint?

Replace template with templateUrl and provide the path to the external HTML file.