The Decorator Design Pattern

class Coffee {
    cost() {
        return 5; // Basic cost of a coffee is 5 units
    }
}

class WithMilk {
    constructor(beverage) {
        this.beverage = beverage;
    }

    cost() {
        return this.beverage.cost() + 2; // Adding cost of milk: 2 units
    }
}

class WithSugar {
    constructor(beverage) {
        this.beverage = beverage;
    }

    cost() {
        return this.beverage.cost() + 1; // Adding cost of sugar: 1 unit
    }
}

let myCoffee = new Coffee();

// Decorating with milk
myCoffee = new WithMilk(myCoffee);

// Decorating with sugar
myCoffee = new WithSugar(myCoffee);

console.log(`Total cost: ${myCoffee.cost()}`); // Output: Total cost: 8

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  getUser() {
    // Logic to get basic user data...
    return { name: 'John Doe', role: 'Editor' };
  }
}

function AdminUserDecorator(userService: UserService) {
  const oldGetUser = userService.getUser;

  userService.getUser = function(): any {
    const user = oldGetUser.call(userService);
    user.canEdit = true;
    user.canDelete = true;
    user.canAdd = true;
    return user;
  };

  return userService;
}

function EditorUserDecorator(userService: UserService) {
  const oldGetUser = userService.getUser;

  userService.getUser = function(): any {
    const user = oldGetUser.call(userService);
    user.canEdit = true;
    user.canDelete = false;
    user.canAdd = true;
    return user;
  };

  return userService;
}

import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-root',
  template: `
    <h1>Welcome, {{ user.name }}</h1>
    <p *ngIf="user.canEdit">You have edit permissions.</p>
    <p *ngIf="user.canDelete">You have delete permissions.</p>
    <p *ngIf="user.canAdd">You have add permissions.</p>
  `
})
export class AppComponent implements OnInit {
  user: any;

  constructor(private userService: UserService) {}

  ngOnInit(): void {
    this.user = this.userService.getUser();
    if (this.user.role === 'Admin') {
      AdminUserDecorator(this.userService);
    } else if (this.user.role === 'Editor') {
      EditorUserDecorator(this.userService);
    }
    // Re-fetch user to get the decorated abilities.
    this.user = this.userService.getUser();
  }
}

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class SellerService {
  getSeller() {
    return { name: 'TechStore', subscription: 'Elite' };
  }
}

function PremiumSellerDecorator(sellerService: SellerService) {
  const oldGetSeller = sellerService.getSeller;

  sellerService.getSeller = function(): any {
    const seller = oldGetSeller.call(sellerService);
    seller.featuredListing = true;
    seller.adCredits = 50;
    return seller;
  };

  return sellerService;
}

function EliteSellerDecorator(sellerService: SellerService) {
  const oldGetSeller = sellerService.getSeller;

  sellerService.getSeller = function(): any {
    const seller = oldGetSeller.call(sellerService);
    seller.advancedAnalytics = true;
    seller.prioritySupport = true;
    return seller;
  };

  return sellerService;
}

<h1>Welcome to {{ seller.name }}'s Store</h1>
<p *ngIf="seller.featuredListing">- Featured Product Listings Enabled</p>
<p *ngIf="seller.adCredits">- Advertisement Credits: {{ seller.adCredits }}</p>
<p *ngIf="seller.advancedAnalytics">- Advanced Analytics Enabled</p>
<p *ngIf="seller.prioritySupport">- Priority Support Enabled</p>

import { Component, OnInit } from '@angular/core';
import { SellerService } from './seller.service';

@Component({
  selector: 'app-store',
  template: ` `
})
export class StoreComponent implements OnInit {
  seller: any;

  constructor(private sellerService: SellerService) {}

  ngOnInit(): void {
    this.seller = this.sellerService.getSeller();
    if (this.seller.subscription === 'Premium') {
      PremiumSellerDecorator(this.sellerService);
    } else if (this.seller.subscription === 'Elite') {
      PremiumSellerDecorator(this.sellerService);
      EliteSellerDecorator(this.sellerService);
    }
    this.seller = this.sellerService.getSeller();
  }
}

class TextComponent {
    constructor(text) {
        this.text = text;
    }

    getStyledText() {
        return this.text;
    }
}

class BoldDecorator {
    constructor(textComponent) {
        this.textComponent = textComponent;
    }

    getStyledText() {
        return `<b>${this.textComponent.getStyledText()}</b>`;
    }
}

class ItalicDecorator {
    constructor(textComponent) {
        this.textComponent = textComponent;
    }

    getStyledText() {
        return `<i>${this.textComponent.getStyledText()}</i>`;
    }
}

class UnderlineDecorator {
    constructor(textComponent) {
        this.textComponent = textComponent;
    }

    getStyledText() {
        return `<u>${this.textComponent.getStyledText()}</u>`;
    }
}

class StrikeThroughDecorator {
    constructor(textComponent) {
        this.textComponent = textComponent;
    }

    getStyledText() {
        return `<strike>${this.textComponent.getStyledText()}</strike>`;
    }
}

let myText = new TextComponent('Hello, World!');

// Adding bold and italic formatting to the text
myText = new BoldDecorator(myText);
myText = new ItalicDecorator(myText);

console.log(myText.getStyledText()); // Output: <i><b>Hello, World!</b></i>

class Product {
    constructor(public description: string, public price: number) {}

    getDescription(): string {
        return this.description;
    }

    getPrice(): number {
        return this.price;
    }
}

abstract class ProductDecorator extends Product {
    constructor(protected product: Product) {
        super(product.description, product.price);
    }
}

class GiftWrapDecorator extends ProductDecorator {
    getDescription(): string {
        return `${this.product.getDescription()} + Gift Wrap`;
    }

    getPrice(): number {
        return this.product.getPrice() + 5;
    }
}

class ExpressShippingDecorator extends ProductDecorator {
    getDescription(): string {
        return `${this.product.getDescription()} + Express Shipping`;
    }

    getPrice(): number {
        return this.product.getPrice() + 20;
    }
}

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    template: `
        <h1>{{ productDescription }}</h1>
        <p>{{ productPrice }}</p>
    `
})
export class AppComponent {
    product: Product;
    productDescription: string;
    productPrice: number;

    constructor() {
        this.product = new Product('Watch', 100);

        // Applying decorators dynamically
        this.product = new GiftWrapDecorator(this.product);
        this.product = new ExpressShippingDecorator(this.product);

        this.productDescription = this.product.getDescription();
        this.productPrice = this.product.getPrice();
    }
}