Angular Components

Angular Components

In the Angular Universe, components are like actors on a grand stage. Each one has:

• A script (TypeScript)
• A costume and set (HTML/CSS)
• And a role to play in the overall performance (app module)

Let’s roll out the red curtain...

What is a Component?

At its heart, a component is:

A self-contained UI unit that knows:

• “What to display (template)”
• “How to look (styles)”
• “What to do (class logic)”
• “And what cues to respond to (inputs/outputs)”

Anatomy of a Component

Here’s the metaphorical body of a component:

  <component>{
    selector: 'app-hero-card',          // Stage name
    templateUrl: './hero-card.component.html', // Dialogue
    styleUrls: ['./hero-card.component.scss'], // Costume
  }</component>
  export class HeroCardComponent {
    @Input() heroName: string;  // Given from the director (parent)
    @Output() liked = new EventEmitter(); // Sends signal back to director

    onLike() {
      this.liked.emit(); // "Audience applauds!"
    }
  }

Component Tree: The Cast

Angular apps are structured like a tree of actors:

• AppComponent is the lead actor (root)
• Child components are supporting roles
• Communication is done via props (@Input) and callbacks (@Output)

There’s no backstage drama — just clean communication through inputs/outputs.

Lifecycle Hooks

Angular gives every component a chance to:

• Prepare before the show: ngOnInit()
• React to prop changes: ngOnChanges()
• Wrap up after the act ends: ngOnDestroy()

It’s like:

• Actor enters dressing room → ngOnInit
• Gets new script notes → ngOnChanges
• Leaves the stage gracefully → ngOnDestroy

Smart vs Dumb Components

• Smart components handle logic and state (like directors)
• Dumb (presentational) components just act out based on script

This separation makes testing, reusability, and scaling 10x easier.

Standalone Components (Angular 14+)

Forget NgModule declarations. With standalone components:

  <Component>{
    standalone: true,
    imports: [CommonModule, OtherComponent], 
    // Other Angular code here
  }</Component>

Your component becomes a solo performer — doesn’t need a playbill to get on stage.

Ideal for micro frontends, dynamic module loading, and cleaner architecture.

Testing Components

Angular gives you:

• TestBed → the rehearsal stage
• Fixtures → snapshots of performance
• DebugElement → the camera view

it('should display hero name', () => {   
   component.heroName = 'AngularMan';   
   fixture.detectChanges();   
   expect(el.nativeElement.textContent).toContain('AngularMan'); 
}); 

A test is like checking if the actor delivered the right line at the right time.

Angular components aren’t just code blocks. They're storytellers in the app’s performance. And just like great actors, when you train them well, keep their scripts tight, and make them reusable, they light up the whole stage.