"compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitReturns": true,
    "strictPropertyInitialization": false,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2017",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  },

export class DataService<T> {
  private data: T;
  
  constructor() {}
  
  get(): T {
    return this.data;
  }
  
  set(data: T): void {
    this.data = data;
  }
}

const numberService = new DataService<number>();
numberService.set(1);

const textService = new DataService<string>();
textService.set('Text');

<section class="product">
  <a>
    <img
      class="square-image"
      src="https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg"
      alt="Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops"
    />
  </a>
  <div class="info">
    <p class="category">men's clothing</p>
    <a class="title">Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops</a>
    <p class="rating">
      <span class="fa fa-star"></span>
      <span class="fa fa-star"></span>
      <span class="fa fa-star"></span>
      <span class="fa fa-star"></span>
      <span class="fa fa-star-o"></span>
      <span class="count">(120)</span>
    </p>
    <p class="description">
      Your perfect pack for everyday use and walks in the forest. Stash your
      laptop (up to 15 inches) in the padded sleeve, your everyday
    </p>
    <p class="price">109.95</p>
  </div>
</section>

<section class="product">
  <a>
    <ov-square-image
      src="https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg"
      alt="Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops"
    ></ov-square-image>
  </a>
  <div class="info">
    <p class="category">men's clothing</p>
    <a class="title">Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops</a>
    <ov-rating rating="4" count="120"></ov-rating>
    <p class="description">
      Your perfect pack for everyday use and walks in the forest. Stash your
      laptop (up to 15 inches) in the padded sleeve, your everyday
    </p>
    <p class="price">109.95</p>
  </div>
</section>

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

@Component({
  selector: 'ov-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
}

# Install deps
npm i

# Start app
npm start

# Run docs (assignments)
npm run docs

# Run tests
npm test

// ng generate component product
import { Component, Input, OnInit } from '@angular/core';
import { Product } from '../shared/product';

@Component({
  selector: 'ov-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.scss'],
})
export class ProductComponent implements OnInit {
  @Input() product: Product;
  
  constructor() {}

  ngOnInit(): void {}
}

<!-- Binds property value to the result of expression firstName. -->
<input [value]="firstName">	

<!-- Binds attribute role to the result of expression myAriaRole. -->
<div [attr.role]="myAriaRole">	

<!-- Binds the presence of the CSS class extra-sparkle on the element
 to the truthiness of the expression isDelightful. -->
<div [class.extra-sparkle]="isDelightful">
  
<!-- Bind product to ProductComponent -->
<ov-product [product]="product">

<section class="product">
  <a>
    <ov-square-image
      [src]="product.image"
      [alt]="product.title"
    ></ov-square-image>
  </a>
  <div class="info">
    <p class="category">{{ product.category }}</p>
    <a class="title">{{ product.title }}</a>
    <p class="rating">
      <ov-rating 
        [rate]="product.rating.rate"
        [count]="product.rating.count"
      ></ov-rating>
    </p>
    <p class="description">{{ product.description }}</p>
    <p class="price">{{ product.price }}</p>
  </div>
</section>

// ng generate component search
import { Component, Input, OnInit
        EventEmitter } from '@angular/core';

@Component({
  selector: 'ov-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.scss'],
})
export class SearchComponent implements OnInit {
  @Input() query: string;
  @Output() search = new EventEmitter<string>();
  
  constructor() {}

  ngOnInit(): void {}
  
  onChange(input: HTMLInputElement) {
    this.search.emit(input.value);
  }
}

<!-- 
  Calls method readRainbow when a click event is triggered 
  on this button element (or its children) and passes in the 
  event object. 
-->
<button (click)="readRainbow($event)">

<!--
  Sets up two-way data binding. Equivalent to:
  <my-cmp [title]="name" (titleChange)="name=$event">
-->
<my-cmp [(title)]="name">

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

@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]);
    });
  });

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'products', component: ProductsComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

<nav>
  <a routerLink="/" 
     routerLinkActive="active" 
     [routerLinkActiveOptions]="{exact:true}">
    Home
  </a>
  <a routerLink="/products" 
     routerLinkActive="active" 
     [routerLinkActiveOptions]="{exact:true}">
    Products
  </a>
</nav>

<router-outlet></router-outlet>

const routes: Routes = [
  { path: '', component: HomeComponent },
  {
    path: 'products',
    loadChildren: () =>
      import('./products-overview/products-overview.module')
        .then(m => m.ProductsOverviewModule)
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

@Injectable()
export class ProductService {
  get(): Product[] {
    // ...
  }
}

function Controller($scope) {
  // ...
 
  $scope.watch(productService.products,  () => { ... });
                                              
  // ...
}