<section class="product">
  <ov-thumbnail></ov-thumbnail>
  <div class="info">
    <ov-sub-title></ov-sub-title>
    <ov-title></ov-title>
    <div class="details">
      <div>
        <ov-rating></ov-rating>
        <ov-price></ov-price>
      </div>
    </div>
  </div>
</section>

<section class="product">
  <ov-thumbnail></ov-thumbnail>
  <div class="info">
    <ov-sub-title></ov-sub-title>
    <ov-title></ov-title>
    <div class="details">
      <div>
        <ov-rating></ov-rating>
        <ov-price></ov-price>
      </div>
      <div>
        <ov-quantity-picker>
        </ov-quantity-picker>
      </div>
    </div>
    <div class="footer">
      <ov-message type="ok"></ov-message>
    </div>
  </div>
</section>

<section class="product">
  <ov-thumbnail></ov-thumbnail>
  <div class="info">
    <ov-sub-title></ov-sub-title>
    <ov-title></ov-title>
    <div class="details">
      <div>
        <ov-rating></ov-rating>
        <ov-price></ov-price>
      </div>
      <div>
        <ov-quantity-picker>
        </ov-quantity-picker>
      </div>
    </div>
    <div class="footer">
      <ov-message type="ok" 
        *ngIf="!isLimited; else limited">
      </ov-message>
      <ng-template #limited>
        <ov-message type="warn"></ov-message>
      </ng-template>
    </div>
  </div>
</section>

<section class="product">
  <ov-thumbnail></ov-thumbnail>
  <div class="info">
    <ov-sub-title></ov-sub-title>
    <ov-title></ov-title>
    <div class="details">
      <div>
        <ov-rating></ov-rating>
        <ov-price></ov-price>
      </div>
      <div>
        <ov-quantity-picker 
          *ngIf="!isOutOfStock; else outOfStock">
        </ov-quantity-picker>
        <ng-template #outOfStock>
          <ov-button>
            <ov-icon></ov-icon>
          </ov-button>
      	</ng-template>
      </div>
    </div>
    <div class="footer">
      <ov-message type="ok" 
        *ngIf="!isLimited">
      </ov-message>
      <ov-message type="warn" 
        *ngIf="isLimited">
      </ov-message>
      <ov-message type="error" 
        *ngIf="isOutOfStock">
      </ov-message>
    </div>
  </div>
</section>

<section class="product" *ngIf="!isReplaced">
  <ov-thumbnail></ov-thumbnail>
  <div class="info">
    <ov-sub-title></ov-sub-title>
    <ov-title></ov-title>
    <div class="details">
      <div>
        <ov-rating></ov-rating>
        <ov-price></ov-price>
      </div>
      <div>
        <ov-quantity-picker 
          *ngIf="!isOutOfStock; else outOfStock">
        </ov-quantity-picker>
        <ng-template #outOfStock>
          <ov-button></ov-button>
      	</ng-template>
      </div>
    </div>
    <div class="footer">
      <ov-message type="ok" 
        *ngIf="!isLimited">
      </ov-message>
      <ov-message type="warn" 
        *ngIf="isLimited">
      </ov-message>
      <ov-message type="error" 
        *ngIf="isOutOfStock">
      </ov-message>
    </div>
  </div>
</section>
<section *ngIf="isReplaced">
  ...
</section>

@Component({ ... })
export class ProductComponent {
  @Input() product!: Product;
}

@Component({ ... })
export class ProductComponent {
  @Input() product!: Product;   
  
  @Input() isLimited = false;
}

@Component({ ... })
export class ProductComponent {
  @Input() product!: Product;   
  
  @Input() isLimited = false;

  @Input() isOutOfStock = false;
}

@Component({ ... })
export class ProductComponent {
  @Input() product!: Product;   
  
  @Input() isLimited = false;

  @Input() isOutOfStock = false;

  @Input() isReplaced? = false;
  @Input() replacement?: Product;
}

@Component({ ... })
export class ProductComponent {
  @Input() product!: Product;   
  
  @Input() isLimited = false;

  @Input() isOutOfStock = false;

  @Input() isReplaced? = false;
  @Input() replacement?: Product;
  
  @Output() addToCart = new EventEmitter<number>();
  @Output() contactUs = new EventEmitter<Product>();
}

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

@Component({
  selector: 'ov-sub-title',
  template: `
    <span>
      <ng-content></ng-content>
    </span>
  `,
  styleUrls: ['./sub-title.component.scss'],
})
export class SubTitleComponent implements OnInit {
  constructor() {}

  ngOnInit(): void {}
}

<section class="product">
  ...
  <div class="info">
    ...
    <div class="details">
      ...
      <div>
        <ng-content select="[actions]"></ng-content>
      </div>
    </div>
    <div class="footer">
      <ng-content select="[footer]"></ng-content>
    </div>
  </div>
</section>

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

@Pipe({
  name: 'test',
})
export class TestPipe implements PipeTransform {
  transform(value: unknown, ...args: unknown[]): unknown {
    return null;
  }
}

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

@Pipe({
  name: 'test',
  pure: true, // default
})
export class TestPipe implements PipeTransform {
  transform(value: unknown, ...args: unknown[]): unknown {
    return null;
  }
}

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

@Pipe({
  name: 'test',
  pure: true, // default
})
export class TestPipe implements PipeTransform {
  transform(value: unknown, ...args: unknown[]): unknown {
    return null;
  }
}

<div *ngFor="let hero of heroes; let i=index; let odd=odd; trackBy: trackById" 
     [class.odd]="odd">
  ({{i}}) {{hero.name}}
</div>

<div *ngFor="let hero of heroes; let i=index; let odd=odd; trackBy: trackById" 
     [class.odd]="odd">
  ({{i}}) {{hero.name}}
</div>

<ng-template ngFor let-hero [ngForOf]="heroes" let-i="index" 
             let-odd="odd" [ngForTrackBy]="trackById">
  <div [class.odd]="odd">({{i}}) {{hero.name}}</div>
</ng-template>

<div *ovIfBreakpoint="'xs'; to: 'md'">
  Show me on xs, sm and md!
</div>

@Component({
  ...
  changeDetection: ChangeDetectionStrategy.OnPush,
})

class ExampleComponent {
  constructor(private ref: ChangeDetectorRef) {
    setTimeout(() => {
      // require this component's view to be updated
      this.ref.markForCheck();
      // require this component's view and children views to be updated
      this.ref.detectChanges();
      // throws an error if this component or its children has changes
      this.ref.checkNoChanges();
      // detach this component completely from change detection
      this.ref.detach();
      // reattach this component to change detaction
      this.ref.reattach();
    }, 1000);
  }
}

@Injectable({
  providedIn: 'root',
})
export class ProductService {
  products$: Observable<ApiProduct[]>;

  private productsSubject = new Subject<ApiProduct[]>();

  constructor(private httpClient: HttpClient) {
    this.products$ = this.productsSubject.asObservable();
  }

  get() {
    this.httpClient.get('/products')
      .subscribe(
        products => this.productsSubject.next(products),
        error => console.error(error)
      );
  }
}

export interface ProductDefault extends Product {
  type: 'product';
  quantity: Quantity;
  isLimited: boolean;
  cartInfo?: CartInfo;
}

interface CartInfo {
  quantity: number;
  total: number;
}

const combineProductsAndCart = (
  products: ProductUnion[],
  cart: Cart
): ProductUnion[] =>
  products.map((product: ProductUnion) => {
    if (product.type === 'product') {
      product.cartInfo = cart.products.find(
        ({ id }) => product.id === id
      );
    }
    return product;
  });

const combineProductsAndCart = (
  products: ProductUnion[],
  cart: Cart
): ProductUnion[] =>
  // O(n)
  products.map((product: ProductUnion) => {
    if (product.type === 'product') {
      product.cartInfo = cart.products.find(
        ({ id }) => product.id === id
      );
    }
    return product;
  });

const combineProductsAndCart = (
  products: ProductUnion[],
  cart: Cart
): ProductUnion[] =>
  // O(n)
  products.map((product: ProductUnion) => {
    if (product.type === 'product') {
      // O(m)
      product.cartInfo = cart.products.find(
        ({ id }) => product.id === id
      );
    }
    return product;
  });

// O(n * m)
const combineProductsAndCart = (
  products: ProductUnion[],
  cart: Cart
): ProductUnion[] =>
  // O(n)
  products.map((product: ProductUnion) => {
    if (product.type === 'product') {
      // O(m)
      product.cartInfo = cart.products.find(
        ({ id }) => product.id === id
      );
    }
    return product;
  });

interface Normalized<T extends { id: string }> {
  byId: { [id: string]: T };
  allIds: string[];
}

interface Normalized<T extends { id: string }> {
  byId: { [id: string]: T };
  allIds: string[];
}

interface Product {
  id: string;
  // ...
}

interface Normalized<T extends { id: string }> {
  byId: { [id: string]: T };
  allIds: string[];
}

interface Product {
  id: string;
  // ...
}

const products: Normalized<Product> = {
  byId: {
    '2443': { 
      name: 'T-shirt',
      // ...
    },
    '5444': { 
      name: 'Pants' ,
      // ...
    },
    // ...
  },
  allIds: ['2443', '5444', '...']
};

interface Normalized<T extends { id: string }> {
  byId: { [id: string]: T };
  allIds: string[];
}

interface Product {
  id: string;
  // ...
}

const products: Normalized<Product> = {
  byId: {
    '2443': { 
      name: 'T-shirt',
      // ...
    },
    // ...
  },
  allIds: ['2443', '...']
};

// O(1)
const product = products.byId['2443'];

interface Normalized<T extends { id: string }> {
  byId: { [id: string]: T };
  allIds: string[];
}

// ...

const productsNormalized: Normalized<Product> = {
  byId: {
    '2443': { 
      name: 'T-shirt',
      // ...
    },
    // ...
  },
  allIds: ['2443', '...']
};

// O(1)
const product = productsNormalized.byId['2443'];

// O(n)
const allProducts = products.allIds
  .map(id => products.byId[id]);

// ...

interface Normalized<T extends Identifier> {
  byId: { [id: string]: T };
  allIds: string[];
}

const normalize = <T extends Identifier>(collection: T[]): Normalized<T> =>
  collection.reduce(
    ({ allIds, byId }, t) => ({
      allIds: [...allIds, t.id],
      byId: {
        ...byId,
        [t.id]: t,
      },
    }),
    {
      byId: {},
      allIds: [],
    } as Normalized<T>
  );

const products = normalize([
 // ...
]);

// O(1)
const product = products.byId['2443'];

// ...

interface Normalized<T extends Identifier> {
  byId: { [id: string]: T };
  allIds: string[];
}

const toArray = <T extends Identifier>({ byId, allIds }: Normalized<T>): T[] =>
  allIds.map((id) => byId[id]);

// ...

const products = normalize([
  // ...
]);

// O(n)
const allProducts = toArray(products);

interface AppState {
  products: Normalized<Product>;
  cart: {
    products: Normalized<CartItem>;
    total: number;
  };
}

const state: AppState = {
  products: {
    byId: {
      '1224': { 
        id: '1224',
        // ...
      },
      // ...     
    },
    allIds: ['1224', '...']
  },
  cart: {
    products: {
      byId: {
        '1224': {
          id: '1224',
          quantity: 8,
          total: 80,
          // ...
        }
      }
    },
    total: 80
  }
}

// O(n)
const combineProductsAndCart = (
  { products, cart }: AppState
): ProductUnion[] => 
  // O(n)
  toArray(products)
    .map(product => {
      return {
        ...product,
        // O(1)
        cartInfo: cart.products.byId[product.id]
      };
    });

// O(n)
const combineProductsAndCart = (
  { products, cart, deliveries }: AppState
): ProductUnion[] => 
  // O(n)
  toArray(products)
    .map(product => {
      return {
        ...product,
        // O(1)
        cartInfo: cart.products.byId[product.id],
        // O(1)
        delivery: deliveries.byId[product.id],
      };
    });

const collection = [];

collection.push('1');

const index = collection
  .find(v => v === '1');

collection.splice(index, 1);

const getC = () => collection;

collection.map(
  item => {
    item.foo = '123';
    return item;
  }
);

const obj = {};

obj.name = 'Foo';


delete obj.name;

let collection = [];

collection = [...collection, '1'];



collection = collection
  .filter(v => v !== '1');

const getC = () => collection.slice(0);

collection = collection.map(
  item => ({
    ...item,
    foo: '123'
  })
);

let obj = {};

obj = { ...obj, name: 'foo' };

const { name, ...updateObj } = obj;
obj = updateObj;

/**
 * Sync approach (not optimized)
 */ 
// app-routing.module.ts
RouterModule.forRoot([]),

// page-products.module.ts 
RouterModule.forChild([
  {
    path: 'products',
    component PageProductsComponent
  },
]),

/**
 * Lazy load approach
 */ 
// app.module.ts
RouterModule.forRoot([
  {
    path: 'products',
    loadChildren: () =>
      import('./pages/page-products/page-products.module')
        .then(
          (m) => m.PageProductsModule
        ),
  },
]),

// page-products.module.ts 
RouterModule.forChild([
  {
    path: '',
    component PageProductsComponent
  },
]),

<ov-template-default>
  <ng-template ovSide>
    <h2>Side content</h2>
    <router-outlet name="side"></router-outlet>
  </ng-template>
  <section main>
    <h2>Main content</h2>
    <router-outlet name="main"></router-outlet>
  </section>
</ov-template-default>

<ov-template-default>
  <ng-template ovSide>
    <h2>Side content</h2>
    <router-outlet name="side"></router-outlet>
  </ng-template>
  <section main>
    <h2>Main content</h2>
    <router-outlet name="main"></router-outlet>
  </section>
</ov-template-default>

RouterModule.forChild([
  {
    path: 'child-routes',
    component: PageChildRoutesComponent,
    children: [
      // ...
      {
        path: 'flipped',
        component: SideComponent,
        outlet: 'main',
      },
      {
        path: 'flipped',
        component: SmartProductsListComponent,
        outlet: 'side',
      },
    ],
  },
]),

interface CanActivate {
  canActivate(
    route: ActivatedRouteSnapshot, 
    state: RouterStateSnapshot
  ): Observable<boolean | UrlTree> 
     | Promise<boolean | UrlTree> 
     | boolean | UrlTree
}

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(
    private authService: AuthService,
    private router: Router
  ) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ) {
    if (!this.authService.isLoggedIn) {
      return this.router
        .createUrlTree(['/login']);
    } else {
      return true;
    }
  }
}

// Angular
interface Resolve<T> {
  resolve(
    route: ActivatedRouteSnapshot, 
    state: RouterStateSnapshot
  ): Observable<T> | Promise<T> | T
}

// product.resolver.ts
@Injectable({ providedIn: 'root' })
export class ProductResolver 
  implements Resolve<ProductState> {
    
  constructor(private store: Store) {}

  resolve(
    _route: ActivatedRouteSnapshot,
    _state: RouterStateSnapshot
  ): Observable<ProductState> {
    return this.store.select(selectProductsState)
      .pipe(
        filter(({ loading }) => !loading),
        take(1)
      );
  }
}

// page-products.module.ts
RouterModule.forChild([
  {
    path: 'resolved',
    component: PageProductsComponent,
    resolve: {
      product: ProductResolver,
    },
  },
])

// page-products.component.ts
constructor(
  private store: Store, 
  private route: ActivatedRoute
) {}

ngOnInit(): void {
  const { product } = this.route.snapshot.data;
  if (!product) {
    this.store.dispatch(getProducts({ limit: 6 }));
  }
}

<ov-spinner 
  *ngIf="loading; else outlet" 
  [text]="loadingText">
</ov-spinner>

<ng-template #outlet>
  <router-outlet></router-outlet>
</ng-template>

/**
 *  Thread blocking 
 */ 
from(Array.from({ length: 10000000 }))
  .subscribe(() => console.log('Compute'))

/**
 * "it will do its best to minimize
 * time between end of currently 
 * executing code and start of scheduled 
 * task"
 */ 
scheduled(
  Array.from({ length: 10000000 }), 
  asapScheduler
).subscribe(() =>
  console.log('Processing stuff')
);

/**
 * "it schedules tasks asynchronously, 
 * by putting them on the JavaScript 
 * event loop queue."
 */ 
scheduled(
  Array.from({ length: 10000000 }), 
  asyncScheduler
).subscribe(() =>
  console.log('Processing stuff')
);

/**
 * It makes sure scheduled task will 
 * happen just before next browser 
 * content repaint, thus performing
 *  animations as efficiently as possible.
 */ 
scheduled(
  Array.from({ length: 10000000 }), 
  animationFrameScheduler
).subscribe(() =>
  console.log('Processing stuff')
);

@Component({
  selector: 'app-banner',
  template: '<h1>{{title}}</h1>'
})
export class BannerComponent {
  title = 'Test Tour of Heroes';
}

describe('BannerComponent', () => {
  let component: BannerComponent;
  let fixture: ComponentFixture<BannerComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [ BannerComponent ],
    });
    fixture = TestBed.createComponent(BannerComponent);
    component = fixture.componentInstance; // BannerComponent test instance
  });
  
  it('should display original title', () => {
    const h1 = fixture.nativeElement.querySelector('h1');
    expect(h1.textContent).toContain(component.title);
  });
});

export declare class ComponentFixture<T> {
  /**
   * The instance of the root component class.
   */
  componentInstance: T;
  /**
   * The native element at the root of the component.
   */
  nativeElement: any;
  /**
   * The DebugElement associated with the root element of this component.
   */
  debugElement: DebugElement;
  // ...
}

@Component({
  selector: 'app-banner',
  template: '<h1>{{title}}</h1>'
})
export class BannerComponent {
  title = 'Test Tour of Heroes';
}

describe('BannerComponent', () => {
  let component: BannerComponent;
  let fixture: ComponentFixture<BannerComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [ BannerComponent ],
    });
    fixture = TestBed.createComponent(BannerComponent);
    component = fixture.componentInstance; // BannerComponent test instance
  });
  
  it('should display original title', () => {
    const h1 = fixture.nativeElement.querySelector('h1');
    expect(h1.textContent).toContain(component.title);
  });
});

  let component: ProductsComponent;
  let fixture: ComponentFixture<ProductsComponent>;

  const PRODUCTS_MOCK: Product[] = [...];

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ProductsComponent, MockComponent(ProductComponent)],
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(ProductsComponent);
    component = fixture.componentInstance;
    component.products = PRODUCTS_MOCK;
    
    fixture.detectChanges();
  });

  it('should render 3 products', () => {
    const productComponents = fixture.debugElement.queryAll(
      By.directive(ProductComponent)
    );

    expect(productComponents.length).toBe(3);

    productComponents.forEach(({ componentInstance }, index) => {
      expect(componentInstance.product).toEqual(PRODUCTS_MOCK[index]);
    });
  });