Anatomy of an Angular Component

Welcome back to the Dojo training hall! Today you will learn the anatomy of an Angular component - the basic combat unit of every project.

Component Structure

Every Angular component consists of three main parts:

1. The @Component Decorator

1@Component({
2  selector: 'app-samurai',      // HTML tag name
3  standalone: true,             // Independent warrior
4  imports: [CommonModule],      // Dependencies
5  templateUrl: './samurai.component.html',  // or template: \`...\`
6  styleUrls: ['./samurai.component.scss']   // or styles: [\`...\`]
7})

2. The Component Class

1export class SamuraiComponent {
2  // Properties - warrior data
3  name = 'Musashi';
4  level = 1;
5
6  // Methods - combat techniques
7  attack(): void {
8    console.log('Attack!');
9  }
10}

3. The Template

1<div class="samurai-card">
2  <h2>{{ name }}</h2>
3  <p>Level: {{ level }}</p>
4  <button (click)="attack()">Attack!</button>
5</div>

The @Component Decorator - The Warrior's Crest

A decorator is a special function that adds metadata to a class. In Angular, we use them to define components, services, and other elements.

| Property | Description | |----------|-------------| | selector | CSS selector name for the component | | standalone | Whether the component is independent | | imports | Dependencies (other components, modules) | | template/templateUrl | HTML template | | styles/styleUrls | CSS styles | | changeDetection | Change detection strategy |