Why components are the building blocks in Angular - See It in Action

Why components are the building blocks

📖 Scenario: You are creating a simple Angular app to understand how components work as building blocks. Components help you organize your app into small, reusable pieces, just like building blocks in a toy set.

🎯 Goal: Build a basic Angular standalone component that displays a greeting message. This will show how components hold their own data and template, making them the building blocks of Angular apps.

📋 What You'll Learn

Create a standalone Angular component named GreetingComponent

Add a string variable message with the value 'Hello from Angular component!'

Use the @Component decorator with standalone: true

Display the message variable inside the component's template using interpolation

💡 Why This Matters

🌍 Real World

Angular components help developers build web apps by breaking the UI into small, manageable pieces that can be reused and maintained easily.

💼 Career

Understanding components is essential for Angular developers to create scalable and maintainable applications in professional environments.

1

Create the GreetingComponent with a message variable

Create a standalone Angular component named GreetingComponent. Inside the component class, create a string variable called message and set it to 'Hello from Angular component!'.

Angular

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

@Component({
  standalone: true,
  selector: 'app-greeting',
  template: ''
})
export class GreetingComponent {
  // Your code here
}

Need a hint?

Use message: string = 'Hello from Angular component!'; inside the class.

2

Add the component template to display the message

In the @Component decorator, set the template property to display the message variable using Angular interpolation syntax {{ message }}.

Angular

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

@Component({
  standalone: true,
  selector: 'app-greeting',
  template: '' // Add interpolation here
})
export class GreetingComponent {
  message: string = 'Hello from Angular component!';
}

Need a hint?

Use template: '{{ message }}' to show the message in the HTML.

3

Add the selector to use the component in HTML

Make sure the @Component decorator has the selector property set to 'app-greeting'. This lets you use the component as an HTML tag <app-greeting></app-greeting>.

Angular

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

@Component({
  standalone: true,
  selector: 'app-greeting', // Confirm selector here
  template: '{{ message }}'
})
export class GreetingComponent {
  message: string = 'Hello from Angular component!';
}

Need a hint?

The selector should be 'app-greeting' to use the component as <app-greeting></app-greeting>.

4

Use the GreetingComponent in an Angular app template

In your main app component or HTML file, add the <app-greeting></app-greeting> tag to display the greeting message from the GreetingComponent.

Angular

Need a hint?

Use the component selector as an HTML tag: <app-greeting></app-greeting>.