app.component.ts

import {Component} from '@angular/core';
import {Observable} from 'rxjs';
import {AppService} from './app.service';
import {ICurrency} from './models/Currency';

/**
 * Main application component
 *  selector: 'app-root', same in index.html element that start to run this component
 */
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'stocksimulator';

  /**
   * @param $pairs - create an Observable for getting currency pairs, resolves with async pipe on html
   */
  public $pairs: Observable<Array<ICurrency>> = this.appService.getCurrencyPairs();

  /**
   * dependency injection for use service
   * Properties marked with readonly can only be assigned to during initialization or from within a constructor of the same class.
   * TypeScript also has it’s own way to declare a member as being marked private, it cannot be accessed from outside of its containing class.
   */
  constructor(private readonly appService: AppService) {
  }
}