🌐 Angular Pipes: Data Transformation

🎯 Introduction

Welcome to the exciting world of Angular Pipes! 🎉 In this guide, we’ll explore how to transform data elegantly in your Angular applications using TypeScript.

You’ll discover how Angular pipes can transform your development experience. Whether you’re building web applications 🌐, dashboards 📊, or user interfaces 🎨, understanding pipes is essential for clean, maintainable data presentation.

By the end of this tutorial, you’ll feel confident creating and using pipes in your own Angular projects! Let’s dive in! 🏊‍♂️

📚 Understanding Angular Pipes

🤔 What are Angular Pipes?

Angular pipes are like magical data transformers 🎨! Think of them as filters in a coffee machine ☕ - they take raw data (coffee beans) and transform it into something beautiful and usable (perfect coffee).

In TypeScript terms, pipes are functions that take input data and transform it for display 🔄. This means you can:

• ✨ Format dates and currencies without cluttering components
• 🚀 Transform text case and structure instantly
• 🛡️ Keep your templates clean and readable

💡 Why Use Angular Pipes?

Here’s why developers love Angular pipes:

1. Separation of Concerns 🔒: Keep data transformation separate from business logic
2. Reusability 💻: Use the same pipe across multiple components
3. Performance 📖: Built-in memoization for efficiency
4. Clean Templates 🔧: Readable and maintainable template code

Real-world example: Imagine building a shopping cart 🛒. With pipes, you can format prices, dates, and product names consistently across your entire application without repeating code!

🔧 Basic Syntax and Usage

📝 Simple Pipe Example

Let’s start with Angular’s built-in pipes:

// 👋 Component with pipe examples
import { Component } from '@angular/core';

@Component({
  selector: 'app-product-display',
  template: `
    <div class="product-card">
      <!-- 💰 Currency formatting -->
      <p>Price: {{ price | currency:'USD':'symbol':'1.2-2' }}</p>
      
      <!-- 📅 Date formatting -->
      <p>Added: {{ dateAdded | date:'short' }}</p>
      
      <!-- 🔤 Text transformation -->
      <h3>{{ productName | titlecase }}</h3>
      
      <!-- 🔢 Number formatting -->
      <p>Rating: {{ rating | number:'1.1-1' }}/5.0</p>
    </div>
  `
})
export class ProductDisplayComponent {
  price: number = 29.99;           // 💵 Raw price
  dateAdded: Date = new Date();    // 📆 Current date
  productName: string = "AWESOME WIDGET"; // 📝 Product name
  rating: number = 4.567;          // ⭐ Rating value
}

💡 Explanation: Notice how pipes use the | symbol! Each pipe transforms the data before displaying it, making your templates super clean.

🎯 Common Built-in Pipes

Here are the pipes you’ll use most often:

// 🏗️ Template with multiple pipe examples
@Component({
  template: `
    <!-- 💰 Currency pipes -->
    <p>USD: {{ 1234.56 | currency:'USD' }}</p>
    <p>EUR: {{ 1234.56 | currency:'EUR':'symbol':'1.0-0' }}</p>
    
    <!-- 📅 Date pipes -->
    <p>Short: {{ today | date:'short' }}</p>
    <p>Custom: {{ today | date:'EEEE, MMMM d, y' }}</p>
    
    <!-- 🔤 Text pipes -->
    <p>Upper: {{ 'hello world' | uppercase }}</p>
    <p>Lower: {{ 'HELLO WORLD' | lowercase }}</p>
    <p>Title: {{ 'hello world' | titlecase }}</p>
    
    <!-- 🔢 Number pipes -->
    <p>Decimal: {{ 1234.5678 | number:'1.2-3' }}</p>
    <p>Percent: {{ 0.1234 | percent:'1.2-2' }}</p>
    
    <!-- 📋 Array pipes -->
    <p>JSON: {{ user | json }}</p>
    <p>Slice: {{ fruits | slice:1:3 | json }}</p>
  `
})
export class PipeExamplesComponent {
  today: Date = new Date();
  user = { name: 'Alice 👩‍💻', role: 'Developer' };
  fruits = ['🍎', '🍌', '🍊', '🍇', '🥝'];
}

💡 Practical Examples

🛒 Example 1: E-commerce Product Display

Let’s build a real product listing with type-safe pipes:

// 🛍️ Product interface
interface Product {
  id: string;
  name: string;
  price: number;
  rating: number;
  dateAdded: Date;
  category: string;
  description: string;
  emoji: string;
}

// 🏪 Product component
@Component({
  selector: 'app-product-card',
  template: `
    <div class="product-card">
      <!-- 🎨 Product header -->
      <h3>{{ product.emoji }} {{ product.name | titlecase }}</h3>
      
      <!-- 💰 Price display -->
      <div class="price-section">
        <span class="price">{{ product.price | currency:'USD':'symbol':'1.2-2' }}</span>
        <span class="category">({{ product.category | uppercase }})</span>
      </div>
      
      <!-- ⭐ Rating display -->
      <div class="rating">
        <span>{{ product.rating | number:'1.1-1' }}</span>
        <span class="stars">{{ getStars(product.rating) }}</span>
      </div>
      
      <!-- 📝 Description -->
      <p class="description">
        {{ product.description | slice:0:100 }}{{ product.description.length > 100 ? '...' : '' }}
      </p>
      
      <!-- 📅 Date added -->
      <small class="date-added">
        Added {{ product.dateAdded | date:'MMM d, y' }}
      </small>
    </div>
  `,
  styles: [`
    .product-card {
      border: 2px solid #e0e0e0;
      border-radius: 8px;
      padding: 16px;
      margin: 8px;
      transition: transform 0.2s;
    }
    .product-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    .price { 
      font-size: 1.2em; 
      font-weight: bold; 
      color: #2e7d32; 
    }
    .category { 
      font-size: 0.8em; 
      color: #666; 
    }
    .rating { 
      margin: 8px 0; 
    }
    .stars { 
      margin-left: 8px; 
    }
  `]
})
export class ProductCardComponent {
  @Input() product!: Product;
  
  // ⭐ Generate star display
  getStars(rating: number): string {
    const fullStars = Math.floor(rating);
    const halfStar = rating % 1 >= 0.5 ? 1 : 0;
    const emptyStars = 5 - fullStars - halfStar;
    
    return '⭐'.repeat(fullStars) + 
           '🌟'.repeat(halfStar) + 
           '☆'.repeat(emptyStars);
  }
}

// 🎮 Usage example
@Component({
  template: `
    <div class="product-grid">
      <app-product-card 
        *ngFor="let product of products" 
        [product]="product">
      </app-product-card>
    </div>
  `
})
export class ProductListComponent {
  products: Product[] = [
    {
      id: '1',
      name: 'TypeScript Course',
      price: 99.99,
      rating: 4.8,
      dateAdded: new Date('2024-01-15'),
      category: 'education',
      description: 'Learn TypeScript from beginner to expert with hands-on projects and real-world examples.',
      emoji: '📘'
    },
    {
      id: '2', 
      name: 'Wireless Headphones',
      price: 199.99,
      rating: 4.2,
      dateAdded: new Date('2024-02-10'),
      category: 'electronics',
      description: 'Premium wireless headphones with noise cancellation and 30-hour battery life.',
      emoji: '🎧'
    }
  ];
}

🎯 Try it yourself: Add a discount pipe that shows original and sale prices!

🎮 Example 2: User Dashboard with Pipes

Let’s create a dashboard with multiple data transformations:

// 👤 User data interface
interface UserStats {
  username: string;
  email: string;
  joinDate: Date;
  lastLogin: Date;
  totalPosts: number;
  reputation: number;
  badges: string[];
  profileCompletion: number;
}

// 📊 Dashboard component
@Component({
  selector: 'app-user-dashboard',
  template: `
    <div class="dashboard">
      <!-- 👋 Welcome section -->
      <div class="welcome-section">
        <h2>Welcome back, {{ userStats.username | titlecase }}! 👋</h2>
        <p>{{ userStats.email | lowercase }}</p>
      </div>
      
      <!-- 📈 Stats grid -->
      <div class="stats-grid">
        <div class="stat-card">
          <h3>📅 Member Since</h3>
          <p>{{ userStats.joinDate | date:'MMMM yyyy' }}</p>
          <small>{{ getDaysSince(userStats.joinDate) }} days ago</small>
        </div>
        
        <div class="stat-card">
          <h3>🕐 Last Active</h3>
          <p>{{ userStats.lastLogin | date:'short' }}</p>
          <small>{{ getTimeAgo(userStats.lastLogin) }}</small>
        </div>
        
        <div class="stat-card">
          <h3>📝 Total Posts</h3>
          <p>{{ userStats.totalPosts | number:'1.0-0' }}</p>
          <small>Awesome contribution! 🎉</small>
        </div>
        
        <div class="stat-card">
          <h3>⭐ Reputation</h3>
          <p>{{ userStats.reputation | number:'1.0-0' }}</p>
          <small>{{ getReputationLevel(userStats.reputation) }}</small>
        </div>
      </div>
      
      <!-- 🏆 Badges section -->
      <div class="badges-section">
        <h3>🏆 Your Badges</h3>
        <div class="badges">
          <span 
            *ngFor="let badge of userStats.badges | slice:0:5" 
            class="badge">
            {{ badge }}
          </span>
          <span 
            *ngIf="userStats.badges.length > 5" 
            class="badge-more">
            +{{ userStats.badges.length - 5 }} more
          </span>
        </div>
      </div>
      
      <!-- 📊 Profile completion -->
      <div class="progress-section">
        <h3>📊 Profile Completion</h3>
        <div class="progress-bar">
          <div 
            class="progress-fill" 
            [style.width.%]="userStats.profileCompletion * 100">
          </div>
        </div>
        <p>{{ userStats.profileCompletion | percent:'1.0-0' }} complete</p>
      </div>
    </div>
  `,
  styles: [`
    .dashboard {
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
    }
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 16px;
      margin: 20px 0;
    }
    .stat-card {
      background: #f5f5f5;
      padding: 16px;
      border-radius: 8px;
      text-align: center;
    }
    .badges {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }
    .badge {
      background: #e3f2fd;
      padding: 4px 8px;
      border-radius: 16px;
      font-size: 0.9em;
    }
    .progress-bar {
      width: 100%;
      height: 20px;
      background: #e0e0e0;
      border-radius: 10px;
      overflow: hidden;
    }
    .progress-fill {
      height: 100%;
      background: linear-gradient(90deg, #4caf50, #8bc34a);
      transition: width 0.3s ease;
    }
  `]
})
export class UserDashboardComponent {
  userStats: UserStats = {
    username: 'ALEX_DEVELOPER',
    email: '[email protected]',
    joinDate: new Date('2023-03-15'),
    lastLogin: new Date(Date.now() - 2 * 60 * 60 * 1000), // 2 hours ago
    totalPosts: 1247,
    reputation: 8934,
    badges: ['🌟 Expert', '🚀 Fast Learner', '💎 Premium', '🎯 Accurate', '🏆 Champion', '⚡ Quick', '🔥 Hot Contributor'],
    profileCompletion: 0.85
  };
  
  // 📅 Calculate days since joining
  getDaysSince(date: Date): number {
    const diffTime = Date.now() - date.getTime();
    return Math.floor(diffTime / (1000 * 60 * 60 * 24));
  }
  
  // 🕐 Get human-readable time ago
  getTimeAgo(date: Date): string {
    const diffHours = Math.floor((Date.now() - date.getTime()) / (1000 * 60 * 60));
    if (diffHours < 1) return 'Just now';
    if (diffHours === 1) return '1 hour ago';
    if (diffHours < 24) return `${diffHours} hours ago`;
    return `${Math.floor(diffHours / 24)} days ago`;
  }
  
  // 🏆 Get reputation level
  getReputationLevel(rep: number): string {
    if (rep >= 10000) return '🚀 Expert Level';
    if (rep >= 5000) return '🌟 Advanced';
    if (rep >= 1000) return '💪 Intermediate';
    return '🌱 Beginner';
  }
}

🚀 Advanced Concepts

🧙‍♂️ Creating Custom Pipes

When built-in pipes aren’t enough, create your own magical transformers:

// 🎯 Custom pipe for file size formatting
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'fileSize',
  pure: true // 🚀 Performance optimization
})
export class FileSizePipe implements PipeTransform {
  
  transform(bytes: number, decimals: number = 2): string {
    if (bytes === 0) return '0 Bytes 📁';
    
    const k = 1024;
    const dm = decimals < 0 ? 0 : decimals;
    const sizes = ['Bytes 📄', 'KB 📋', 'MB 💾', 'GB 💿', 'TB 🗄️'];
    
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    
    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
  }
}

// 🎨 Custom pipe for text highlighting
@Pipe({
  name: 'highlight',
  pure: false // 🔄 Allows dynamic updates
})
export class HighlightPipe implements PipeTransform {
  
  transform(text: string, searchTerm: string): string {
    if (!searchTerm) return text;
    
    const regex = new RegExp(`(${searchTerm})`, 'gi');
    return text.replace(regex, '<mark class="highlight">$1</mark>');
  }
}

// 🌟 Advanced pipe with multiple parameters
@Pipe({
  name: 'truncateWords',
  pure: true
})
export class TruncateWordsPipe implements PipeTransform {
  
  transform(
    text: string, 
    wordLimit: number = 10, 
    suffix: string = '...'
  ): string {
    if (!text) return '';
    
    const words = text.split(' ');
    if (words.length <= wordLimit) return text;
    
    return words.slice(0, wordLimit).join(' ') + suffix;
  }
}

// 💎 Using custom pipes in a component
@Component({
  selector: 'app-file-manager',
  template: `
    <div class="file-list">
      <h2>📁 File Manager</h2>
      
      <!-- 🔍 Search input -->
      <input 
        [(ngModel)]="searchTerm" 
        placeholder="Search files... 🔍"
        class="search-input">
      
      <div class="files">
        <div 
          *ngFor="let file of files" 
          class="file-item">
          
          <!-- 📄 File name with highlighting -->
          <h3 [innerHTML]="file.name | highlight:searchTerm"></h3>
          
          <!-- 💾 File size -->
          <p>Size: {{ file.size | fileSize:1 }}</p>
          
          <!-- 📝 Description with word limit -->
          <p>{{ file.description | truncateWords:15:'... 📖' }}</p>
          
          <!-- 📅 Last modified -->
          <small>Modified: {{ file.lastModified | date:'medium' }}</small>
        </div>
      </div>
    </div>
  `,
  styles: [`
    .file-list {
      max-width: 600px;
      margin: 0 auto;
      padding: 20px;
    }
    .search-input {
      width: 100%;
      padding: 10px;
      margin-bottom: 20px;
      border: 2px solid #ddd;
      border-radius: 8px;
      font-size: 16px;
    }
    .file-item {
      background: #f9f9f9;
      padding: 16px;
      margin: 8px 0;
      border-radius: 8px;
      border-left: 4px solid #2196f3;
    }
    ::ng-deep .highlight {
      background-color: yellow;
      font-weight: bold;
    }
  `]
})
export class FileManagerComponent {
  searchTerm: string = '';
  
  files = [
    {
      name: 'TypeScript Advanced Guide.pdf',
      size: 2048576, // 2MB
      description: 'Comprehensive guide to advanced TypeScript features including generics, decorators, and advanced type manipulation techniques.',
      lastModified: new Date('2024-01-20')
    },
    {
      name: 'Angular Project Setup.md',
      size: 8192, // 8KB
      description: 'Step-by-step instructions for setting up a new Angular project with TypeScript configuration.',
      lastModified: new Date('2024-02-15')
    }
  ];
}

🏗️ Async Pipes and Observables

For the reactive programming enthusiasts:

// 🔄 Working with async data
import { Observable, interval, map, take } from 'rxjs';

@Component({
  selector: 'app-live-data',
  template: `
    <div class="live-dashboard">
      <h2>📊 Live Data Dashboard</h2>
      
      <!-- ⏰ Live timer -->
      <div class="timer-section">
        <h3>🕐 Current Time</h3>
        <p>{{ currentTime$ | async | date:'medium' }}</p>
      </div>
      
      <!-- 📈 Live counter -->
      <div class="counter-section">
        <h3>🔢 Live Counter</h3>
        <p>{{ counter$ | async | number:'1.0-0' }}</p>
      </div>
      
      <!-- 🌡️ Temperature simulation -->
      <div class="temp-section">
        <h3>🌡️ Temperature</h3>
        <p>{{ temperature$ | async | number:'1.1-1' }}°C</p>
      </div>
      
      <!-- 💰 Stock price simulation -->
      <div class="stock-section">
        <h3>📈 Stock Price</h3>
        <p>{{ stockPrice$ | async | currency:'USD':'symbol':'1.2-2' }}</p>
      </div>
    </div>
  `,
  styles: [`
    .live-dashboard {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 16px;
      padding: 20px;
    }
    .timer-section, .counter-section, .temp-section, .stock-section {
      background: #f0f8ff;
      padding: 16px;
      border-radius: 8px;
      text-align: center;
      border: 2px solid #e3f2fd;
    }
    h3 {
      margin: 0 0 10px 0;
      color: #1976d2;
    }
    p {
      font-size: 1.2em;
      font-weight: bold;
      margin: 0;
    }
  `]
})
export class LiveDataComponent {
  
  // ⏰ Current time observable
  currentTime$: Observable<Date> = interval(1000).pipe(
    map(() => new Date())
  );
  
  // 🔢 Counter observable
  counter$: Observable<number> = interval(500).pipe(
    map(count => count + 1)
  );
  
  // 🌡️ Temperature simulation
  temperature$: Observable<number> = interval(2000).pipe(
    map(() => 18 + Math.random() * 15) // 18-33°C range
  );
  
  // 📈 Stock price simulation
  stockPrice$: Observable<number> = interval(1000).pipe(
    map(() => 100 + (Math.random() - 0.5) * 20) // $90-$110 range
  );
}

⚠️ Common Pitfalls and Solutions

😱 Pitfall 1: Performance Issues with Impure Pipes

// ❌ Wrong way - impure pipe called on every change detection!
@Pipe({
  name: 'expensiveFilter',
  pure: false // 💥 This will hurt performance!
})
export class ExpensiveFilterPipe implements PipeTransform {
  transform(items: any[], filterValue: string): any[] {
    console.log('🐌 Pipe called again!'); // This logs constantly!
    return items.filter(item => 
      item.name.toLowerCase().includes(filterValue.toLowerCase())
    );
  }
}

// ✅ Correct way - keep pipes pure when possible!
@Pipe({
  name: 'efficientFilter',
  pure: true // 🚀 Only runs when inputs change
})
export class EfficientFilterPipe implements PipeTransform {
  transform(items: any[], filterValue: string): any[] {
    if (!filterValue) return items;
    return items.filter(item => 
      item.name.toLowerCase().includes(filterValue.toLowerCase())
    );
  }
}

// 🎯 Or better yet - handle filtering in component
@Component({
  template: `
    <input [(ngModel)]="filterText" placeholder="Filter...">
    <div *ngFor="let item of filteredItems">
      {{ item.name }}
    </div>
  `
})
export class SmartFilterComponent {
  items = [{ name: 'Apple 🍎' }, { name: 'Banana 🍌' }];
  filterText = '';
  
  get filteredItems() {
    if (!this.filterText) return this.items;
    return this.items.filter(item => 
      item.name.toLowerCase().includes(this.filterText.toLowerCase())
    );
  }
}

🤯 Pitfall 2: Incorrect Pipe Parameters

// ❌ Dangerous - wrong parameter types!
@Component({
  template: `
    <!-- 💥 This will cause errors! -->
    <p>{{ "not-a-number" | currency }}</p>
    <p>{{ "invalid-date" | date }}</p>
    <p>{{ null | slice:0:5 }}</p>
  `
})
export class BadPipeUsageComponent {}

// ✅ Safe - validate data first!
@Component({
  template: `
    <!-- 🛡️ Safe with validation -->
    <p>{{ isValidPrice(price) ? (price | currency:'USD') : 'Invalid price' }}</p>
    <p>{{ isValidDate(date) ? (date | date:'short') : 'Invalid date' }}</p>
    <p>{{ items?.length ? (items | slice:0:5) : 'No items' }}</p>
  `
})
export class SafePipeUsageComponent {
  price: any = "not-a-number";
  date: any = "invalid-date";
  items: string[] | null = null;
  
  isValidPrice(value: any): boolean {
    return typeof value === 'number' && !isNaN(value);
  }
  
  isValidDate(value: any): boolean {
    return value instanceof Date && !isNaN(value.getTime());
  }
}

🛠️ Best Practices

1. 🎯 Keep Pipes Pure: Use pure: true whenever possible for better performance
2. 📝 Type Your Pipes: Always define proper TypeScript types for inputs and outputs
3. 🛡️ Validate Inputs: Check for null/undefined values before transformation
4. 🎨 Name Clearly: Use descriptive pipe names that explain their purpose
5. ✨ Single Responsibility: Each pipe should do one thing well

// 🌟 Example of a well-designed pipe
@Pipe({
  name: 'safeUrl',
  pure: true
})
export class SafeUrlPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  
  transform(url: string | null | undefined): SafeUrl | string {
    if (!url || typeof url !== 'string') {
      return 'javascript:void(0)'; // 🛡️ Safe fallback
    }
    
    try {
      return this.sanitizer.bypassSecurityTrustUrl(url);
    } catch (error) {
      console.warn('⚠️ Invalid URL provided to SafeUrlPipe:', url);
      return 'javascript:void(0)';
    }
  }
}

🧪 Hands-On Exercise

🎯 Challenge: Build a Social Media Post Formatter

Create a pipe system for formatting social media posts:

📋 Requirements:

• ✅ Format mentions (@username) with highlighting
• 🏷️ Format hashtags (#hashtag) with different styling
• 📅 Format timestamps (relative time like “2 hours ago”)
• 🔗 Format URLs as clickable links
• ✂️ Truncate long posts with “read more” functionality
• 📊 Format engagement numbers (likes, shares, comments)

🚀 Bonus Points:

• Add emoji support
• Implement post filtering by hashtags
• Create a search highlight pipe
• Add accessibility features

💡 Solution

// 🎯 Social media post pipes!

// 📝 Mention highlighting pipe
@Pipe({ name: 'mentions', pure: true })
export class MentionsPipe implements PipeTransform {
  transform(text: string): string {
    return text.replace(
      /@(\w+)/g, 
      '<span class="mention">@$1</span>'
    );
  }
}

// 🏷️ Hashtag formatting pipe
@Pipe({ name: 'hashtags', pure: true })
export class HashtagsPipe implements PipeTransform {
  transform(text: string): string {
    return text.replace(
      /#(\w+)/g, 
      '<span class="hashtag">#$1</span>'
    );
  }
}

// 🕐 Relative time pipe
@Pipe({ name: 'timeAgo', pure: true })
export class TimeAgoPipe implements PipeTransform {
  transform(date: Date): string {
    const now = new Date().getTime();
    const postTime = date.getTime();
    const diffMs = now - postTime;
    
    const diffMins = Math.floor(diffMs / (1000 * 60));
    const diffHours = Math.floor(diffMins / 60);
    const diffDays = Math.floor(diffHours / 24);
    
    if (diffMins < 1) return 'just now ⚡';
    if (diffMins < 60) return `${diffMins}m ago 🕐`;
    if (diffHours < 24) return `${diffHours}h ago 🕐`;
    return `${diffDays}d ago 📅`;
  }
}

// 📊 Engagement numbers pipe
@Pipe({ name: 'engagementCount', pure: true })
export class EngagementCountPipe implements PipeTransform {
  transform(count: number): string {
    if (count < 1000) return count.toString();
    if (count < 1000000) return (count / 1000).toFixed(1) + 'K';
    return (count / 1000000).toFixed(1) + 'M';
  }
}

// 📱 Social media post component
interface SocialPost {
  id: string;
  author: string;
  content: string;
  timestamp: Date;
  likes: number;
  shares: number;
  comments: number;
  emoji: string;
}

@Component({
  selector: 'app-social-post',
  template: `
    <div class="post-card">
      <!-- 👤 Author info -->
      <div class="author-info">
        <span class="author">{{ post.emoji }} {{ post.author }}</span>
        <span class="timestamp">{{ post.timestamp | timeAgo }}</span>
      </div>
      
      <!-- 📝 Post content with formatting -->
      <div 
        class="post-content"
        [innerHTML]="post.content | mentions | hashtags">
      </div>
      
      <!-- 📊 Engagement stats -->
      <div class="engagement">
        <button class="engage-btn">
          ❤️ {{ post.likes | engagementCount }}
        </button>
        <button class="engage-btn">
          🔄 {{ post.shares | engagementCount }}
        </button>
        <button class="engage-btn">
          💬 {{ post.comments | engagementCount }}
        </button>
      </div>
    </div>
  `,
  styles: [`
    .post-card {
      border: 1px solid #e1e8ed;
      border-radius: 12px;
      padding: 16px;
      margin: 8px 0;
      background: white;
    }
    .author-info {
      display: flex;
      justify-content: space-between;
      margin-bottom: 12px;
    }
    .author {
      font-weight: bold;
      color: #1da1f2;
    }
    .timestamp {
      color: #657786;
      font-size: 0.9em;
    }
    .post-content {
      margin: 12px 0;
      line-height: 1.4;
    }
    .engagement {
      display: flex;
      gap: 16px;
      margin-top: 12px;
    }
    .engage-btn {
      background: none;
      border: none;
      color: #657786;
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 16px;
      transition: background-color 0.2s;
    }
    .engage-btn:hover {
      background-color: #f7f9fa;
    }
    ::ng-deep .mention {
      color: #1da1f2;
      font-weight: bold;
    }
    ::ng-deep .hashtag {
      color: #1da1f2;
      font-weight: bold;
    }
  `]
})
export class SocialPostComponent {
  @Input() post!: SocialPost;
}

// 🎮 Demo component
@Component({
  template: `
    <div class="social-feed">
      <h2>📱 Social Feed Demo</h2>
      <app-social-post 
        *ngFor="let post of posts" 
        [post]="post">
      </app-social-post>
    </div>
  `
})
export class SocialFeedComponent {
  posts: SocialPost[] = [
    {
      id: '1',
      author: 'TechGuru_Sarah',
      content: 'Just finished an amazing #TypeScript tutorial! 🚀 Big thanks to @angular team for the great framework. Learning pipes has never been this fun! #webdev #coding',
      timestamp: new Date(Date.now() - 30 * 60 * 1000), // 30 mins ago
      likes: 1247,
      shares: 89,
      comments: 156,
      emoji: '👩‍💻'
    },
    {
      id: '2',
      author: 'DevLife_Alex',
      content: 'Hot take: Angular pipes are underrated! 🔥 They make data transformation so elegant. Shoutout to @everyone who helped me understand async pipes! #angular #javascript',
      timestamp: new Date(Date.now() - 2 * 60 * 60 * 1000), // 2 hours ago
      likes: 892,
      shares: 234,
      comments: 67,
      emoji: '🧑‍💻'
    }
  ];
}

🎓 Key Takeaways

You’ve learned so much! Here’s what you can now do:

• ✅ Use built-in Angular pipes with confidence 💪
• ✅ Create custom pipes for specific needs 🛡️
• ✅ Apply performance best practices in real projects 🎯
• ✅ Debug pipe issues like a pro 🐛
• ✅ Build type-safe data transformations with TypeScript! 🚀

Remember: Angular pipes are your friends for clean, readable templates! They help separate concerns and make your code more maintainable. 🤝

🤝 Next Steps

Congratulations! 🎉 You’ve mastered Angular Pipes and data transformation!

Here’s what to do next:

1. 💻 Practice with the social media exercise above
2. 🏗️ Build a project using custom pipes for data formatting
3. 📚 Move on to our next tutorial: Angular Directives - Custom Directives
4. 🌟 Share your pipe creations with the community!

Remember: Every Angular expert was once a beginner. Keep coding, keep learning, and most importantly, have fun transforming data! 🚀

Happy coding! 🎉🚀✨