Angular Core Concepts Explained: Components, Modules, Templates, Directives, and Pipes (with Examples)

 If you’re learning Angular or preparing for an Angular interview, understanding the building blocks of Angular applications is crucial. In this article, we’ll explore Components, Modules, Templates, Directives, and Pipes with clear explanations, practical examples, and SEO-friendly insights that will help you in both real-world development and blogging.

✅ Keywords to target: Angular Components, Angular Modules, Angular Templates, Angular Directives, Angular Pipes, Angular basics, Angular interview questions, Angular tutorial.

---

1. Angular Components

Definition:
A Component in Angular is the smallest UI building block. Each component controls a part of the view (HTML + CSS + logic).

Key Features of Components:

• Built with a TypeScript class

• Connected to an HTML template

• Scoped styles and encapsulation

• Communicate using @Input() and @Output()

Example: Todo Item Component

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-todo-item',
  template: `
    <div (click)="toggle()" [class.done]="todo.done">
      {{ todo.title }}
      <button (click)="remove($event)">Remove</button>
    </div>
  `,
  styles: [`.done { text-decoration: line-through; }`]
})
export class TodoItemComponent {
  @Input() todo!: { id: number; title: string; done: boolean };
  @Output() removed = new EventEmitter<number>();
  @Output() toggled = new EventEmitter<number>();

  toggle() { this.toggled.emit(this.todo.id); }
  remove(e: Event) { e.stopPropagation(); this.removed.emit(this.todo.id); }
}

👉 SEO Tip: Use headings like “What is Angular Component?” and “Angular Component Example” — they match common search queries.

---

2. Angular Modules

Definition:
An NgModule groups related Components, Directives, and Pipes together. Every Angular app starts with a root module (AppModule), and you can create feature modules for large applications.

Example: AppModule

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { TodoItemComponent } from './todo-item.component';

@NgModule({
  declarations: [AppComponent, TodoItemComponent],
  imports: [BrowserModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

👉 SEO Keyword Phrase: Angular Modules example, feature module in Angular, AppModule in Angular

---

3. Angular Templates

Definition:
A Template in Angular is HTML with Angular syntax (bindings, directives, and pipes). Templates define how data is displayed in the UI.

Example Template Features

<h1>{{ title }}</h1>                     <!-- Interpolation -->
<img [src]="avatarUrl" />                <!-- Property binding -->
<button (click)="onSave()">Save</button> <!-- Event binding -->
<input [(ngModel)]="name" />             <!-- Two-way binding -->
<ul>
  <li *ngFor="let item of items">{{ item | uppercase }}</li>
</ul>

👉 SEO Keywords: Angular template syntax, Angular interpolation, Angular ngFor, Angular ngIf.

---

4. Angular Directives

Definition:
A Directive is used to extend HTML behavior.

• Structural Directives: Change DOM structure (*ngIf, *ngFor).

• Attribute Directives: Change appearance/behavior of an element (ngStyle, ngClass, or custom directives).

Custom Attribute Directive Example: Highlight

import { Directive, HostBinding, HostListener, Input } from '@angular/core';

@Directive({ selector: '[appHighlight]' })
export class HighlightDirective {
  @Input('appHighlight') color = 'yellow';
  @HostBinding('style.backgroundColor') bg?: string;

  @HostListener('mouseenter') onEnter() { this.bg = this.color; }
  @HostListener('mouseleave') onLeave() { this.bg = ''; }
}

Usage:

<p appHighlight="lightblue">Hover to Highlight</p>

👉 SEO Keywords: Angular directives, Angular structural directives, Angular attribute directives, custom directive in Angular.

---

5. Angular Pipes

Definition:
A Pipe transforms data in templates without changing the actual object. Angular provides built-in pipes (date, currency, async) and you can create custom pipes.

Custom Pipe Example: Truncate

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'truncate' })
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit = 20): string {
    return value.length > limit ? value.slice(0, limit) + '…' : value;
  }
}

Usage:

<p>{{ longText | truncate:30 }}</p>

👉 SEO Keywords: Angular pipes, Angular custom pipe, Angular date pipe, Angular async pipe.

---

✅ Conclusion

• Components → UI building blocks

• Modules → Grouping and organization

• Templates → Define structure and binding

• Directives → Add behavior or structure to DOM

• Pipes → Transform data in views

By mastering these five concepts, you’ll have a solid foundation in Angular development. Whether you’re preparing for Angular interview questions or building enterprise-grade applications, understanding these basics is essential.