angular directives example (component code)

app.component.ts

import { Component } from '@angular/core';
import { Model } from './repository.model';
import { Product } from './product.model';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  model: Model = new Model();
  targetName = 'Kayak';

  getClasses(): string {
    return this.model.getProducts().length === 5 ? 'bg-success' : 'bg-warning';
  }

  getClassMap(key: number): object {

    const product = this.model.getProduct(key);

    return {
      'text-center bg-danger': product.name === 'Kayak',
      'bg-info': product.price < 50
      };

  }

  getProductByPosition(position: number): Product {
    return this.model.getProducts()[position];
  }

  getProduct(key: number): Product {
    return this.model.getProduct(key);
  }

  getKey(index: number, product: Product) {
    return product.id;
  }

  getProducts(): Product[] {
    return this.model.getProducts();
  }

  getProductCount(): number {
    return this.getProducts().length;
  }

  getProductPrice(index: number): number {
    return Math.floor(this.getProduct(index).price);
  }

}