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.

Angular Reactive Forms vs Template-Driven Forms: A Complete Guide with Examples

 When building forms in Angular applications, developers often face a common question: Should I use Reactive Forms or Template-Driven Forms?

Both approaches are powerful, but they serve different purposes depending on your project’s complexity. In this article, we’ll break down the differences, provide detailed examples, and guide you on when to use each approach.

---

What Are Angular Forms?

Forms are an essential part of any web application — from login screens to registration forms and complex data entry modules.

Angular provides two main techniques to build forms:

• Template-Driven Forms (simpler, template-based, suitable for basic use cases)

• Reactive Forms (model-driven, highly scalable, ideal for complex forms)

---

1. Template-Driven Forms in Angular

Definition

Template-driven forms rely on Angular directives inside the HTML template. They are best suited for simple forms with fewer fields.

Key Features

• Uses ngModel for two-way data binding

• Most logic is written in the template

• Less boilerplate code

• Requires importing FormsModule

Setup

Add FormsModule in app.module.ts:

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ],
})
export class AppModule {}

Example: Template-Driven Form

<h2>Template Driven Form Example</h2>
<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)">
  <label>Name:</label>
  <input type="text" name="name" ngModel required>
  
  <label>Email:</label>
  <input type="email" name="email" ngModel required email>
  
  <button type="submit" [disabled]="!userForm.valid">Submit</button>
</form>

export class AppComponent {
  user = { name: '', email: '' };

  onSubmit(form: any) {
    this.user = form.value;
    console.log(this.user);
  }
}

✅ Pros: Easy, less boilerplate, quick for simple forms
❌ Cons: Hard to scale, difficult for dynamic/complex forms

---

2. Reactive Forms in Angular

Definition

Reactive Forms (also called model-driven forms) are defined in the component class. This gives you more flexibility and control over validation, form state, and complex structures.

Key Features

• Uses FormControl, FormGroup, FormBuilder

• Validation handled inside the component

• Full control over form data and state

• Requires importing ReactiveFormsModule

Setup

Add ReactiveFormsModule in app.module.ts:

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    BrowserModule,
    ReactiveFormsModule
  ],
})
export class AppModule {}

Example: Reactive Form

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  userForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.userForm = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]]
    });
  }

  onSubmit() {
    if (this.userForm.valid) {
      console.log('Form Data:', this.userForm.value);
    }
  }
}

<h2>Reactive Form Example</h2>
<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
  <label>Name:</label>
  <input formControlName="name">
  <div *ngIf="userForm.get('name')?.invalid && userForm.get('name')?.touched">
    Name is required
  </div>

  <label>Email:</label>
  <input formControlName="email">
  <div *ngIf="userForm.get('email')?.invalid && userForm.get('email')?.touched">
    Enter a valid email
  </div>

  <button type="submit" [disabled]="userForm.invalid">Submit</button>
</form>

✅ Pros: Scalable, easy to manage dynamic forms, more control
❌ Cons: More boilerplate, slightly harder to learn

---

3. Reactive vs Template-Driven Forms: Key Differences

Feature	Template-Driven Forms	Reactive Forms
Binding	ngModel (two-way binding)	FormControl & FormGroup
Validation	Template-based	Component-based
Complexity	Simple forms	Complex & dynamic forms
Form State	Implicit	Explicit, full control
Module Required	FormsModule	ReactiveFormsModule
Use Case	Login, signup forms	Large, dynamic data-entry forms

---

4. When to Use Which?

• ✅ Use Template-Driven Forms for simple forms like login, contact forms, and basic user input.

• ✅ Use Reactive Forms when building complex forms such as registration workflows, dynamic surveys, or forms with conditional logic.

---

Conclusion

Both Template-Driven and Reactive Forms are powerful in Angular. If you want quick, simple, and declarative forms, go with Template-Driven Forms. But if your application requires scalability, complex validation, and dynamic behavior, then Reactive Forms are the better choice.