Component selector usage in Angular - Mini Project: Build & Apply

Component selector usage

📖 Scenario: You are building a simple Angular app that shows a greeting message using a custom component.

🎯 Goal: Create a custom Angular component with a selector and use it inside the main application template to display a greeting.

📋 What You'll Learn

Create a standalone Angular component named GreetingComponent with selector app-greeting.

Use the app-greeting selector inside the main AppComponent template.

Display the text Hello, Angular! inside the GreetingComponent template.

Use Angular 17+ standalone components and the new control flow syntax.

💡 Why This Matters

🌍 Real World

Using component selectors is how Angular apps build complex user interfaces by combining small reusable pieces.

💼 Career

Understanding component selectors and standalone components is essential for Angular developers to build maintainable and modular applications.

1

Create the GreetingComponent with selector

Create a standalone Angular component named GreetingComponent with the selector app-greeting. The component should have a template that displays the text Hello, Angular!.

Angular

// Create GreetingComponent with selector 'app-greeting' and template 'Hello, Angular!'
// Your code here

Need a hint?

Use @Component decorator with selector, standalone, and template properties.

2

Create the AppComponent with template

Create a standalone Angular component named AppComponent with the selector app-root. The component should have an empty template for now.

Angular

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

// Create AppComponent with selector 'app-root' and empty template
// Your code here

Need a hint?

Define AppComponent similarly to GreetingComponent but with an empty template.

3

Use the GreetingComponent selector inside AppComponent template

Modify the AppComponent template to include the app-greeting selector so that the greeting message appears inside the main app component.

Angular

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

@Component({
  selector: 'app-greeting',
  standalone: true,
  template: `Hello, Angular!`
})
export class GreetingComponent {}

@Component({
  selector: 'app-root',
  standalone: true,
  template: `` // Add the selector here
})
export class AppComponent {}

Need a hint?

Use the selector app-greeting as a tag inside the AppComponent template.

4

Import GreetingComponent in AppComponent

Modify the AppComponent to import the GreetingComponent in its imports array so Angular knows about the child component.

Angular

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

@Component({
  selector: 'app-greeting',
  standalone: true,
  template: `Hello, Angular!`
})
export class GreetingComponent {}

@Component({
  selector: 'app-root',
  standalone: true,
  template: ``,
  imports: [GreetingComponent] // Add GreetingComponent to imports
})
export class AppComponent {}

Need a hint?

Use the imports property in @Component decorator to include GreetingComponent.