AhsanAyaz

/* You can add global styles to this file, and also import other style files */

.cdk-overlay-container {
  display: block;
  &.z-index-top {
    z-index: 2050;
  }
}

.duplicate-modal-overlay {

AhsanAyaz

<!-- USAGE -->

<!-- Transoforming strings -->
<div class="users">
  <div class="users__user" *ngFor="let user of users">
    {{user.name | appTitleCase}}
  </div>
</div>

<!-- Transforming Arrays -->

AhsanAyaz

function evaluatePrice(vehicle: Vehicle) {
  switch(vehicle.vType) {
    case "car":
      return vehicle.transmission * evaluationFactor;
    case "truck":
      return vehicle.capacity * evaluationFactor;
    case "motorcycle":
      return vehicle.make * evaluationFactor;
    case "bicycle":
      return vehicle.make * evaluationFactor;

AhsanAyaz

function evaluatePrice(vehicle: Vehicle) {
  switch(vehicle.vType) {
    case "car":
      return vehicle.transmission * evaluationFactor;
    case "truck":
      return vehicle.capacity * evaluationFactor;
    case "motorcycle":
      return vehicle.make * evaluationFactor;
    default:
      const invalidVehicle: never = vehicle;

AhsanAyaz

interface IBicycle {
  vType: "bicycle";
  make: number;
}
type Vehicle = IMotorcycle | ICar | ITruck | IBicycle;

AhsanAyaz

function evaluatePrice(vehicle: Vehicle) {
  switch(vehicle.vType) {
    case "car":
      return vehicle.transmission * evaluationFactor;
    case "truck":
      return vehicle.capacity * evaluationFactor;
    case "motorcycle":
      return vehicle.make * evaluationFactor;
  }
}

AhsanAyaz

const evaluationFactor = Math.PI; // some global factor
function evaluatePrice(vehicle: Vehicle) {
  return vehicle.capacity * evaluationFactor;
}
const myTruck: ITruck = {vType: "truck", capacity: 9.5};
evaluatePrice(myTruck);

AhsanAyaz

type Vehicle = IMotorcycle | ICar | ITruck;

AhsanAyaz

enum CarTransmission {
  Automatic = 200,
  Manual = 300
}

interface IMotorcycle {
  vType: "motorcycle"; // discriminant
  make: number; // year
}

AhsanAyaz

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

export interface LoggerConfig {
  prefix?: string;
  color?: string;
  enabled: boolean;
}

@Injectable({