import { Component } from '@angular/core';
import { MyService } from './my-service';

@Component({
  selector: 'my-component',
  template: ...
})
export class MyComponent {
  constructor(myService: MyService) {}
  ...
}

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

@Injectable({
  providedIn: 'root',
})
export class MyService {
  ...
}

class CoffeeMaker {
 
    constructor(container) {
        this.beanFactory = container.get(BeanFactory);
        this.sugarFactory = container.get(SugarFactory);
        this.waterFactory = container.get(WaterFactory);
    }
 
    make() {
        this.beanFactory.create();
        this.sugarFactory.create();
        this.waterFactory.create();
    }
 
}
 
var Container = require("typedi").Container;
var coffeeMaker = Container.get(CoffeeMaker);
coffeeMaker.make();
class CoffeeMaker {
 
    constructor(container) {
        this.beanFactory = container.get(BeanFactory);
        this.sugarFactory = container.get(SugarFactory);
        this.waterFactory = container.get(WaterFactory);
    }
 
    make() {
        this.beanFactory.create();
        this.sugarFactory.create();
        this.waterFactory.create();
    }
 
}
 
var Container = require("typedi").Container;
var coffeeMaker = Container.get(CoffeeMaker);
coffeeMaker.make();

const Employee = ({ employee }) => (<div>
  <span>{ employee.firstName }</span>
  <span>{ employee.lastName }</span>
  <span>{ employee.age}</span>
</div>)

class SomeService extends React.Component {
  performSomeLogic(){
    // including state mgmt, webservices, session 
  }
 
  render(){ // should have NO view
    return this.props.render(this.state)
  }
}
 
 
 
const Page = () => <div>
  <SomeService render={svcState =>
    <>
      <h1>{ svcState.header }</h1>
      <p>{ svcState.content }</p>
    </>
  }></SomeService>
</div>
class SomeService extends React.Component {
  performSomeLogic(){
    // including state mgmt, webservices, session 
  }
 
  render(){ // should have NO view
    return this.props.render(this.state)
  }
}
 
 
 
const Page = () => <div>
  <SomeService render={svcState =>
    <>
      <h1>{ svcState.header }</h1>
      <p>{ svcState.content }</p>
    </>
  }></SomeService>
</div>
class SomeService extends React.Component {
  performSomeLogic(){
    // including state mgmt, webservices, session 
  }
 
  render(){ // should have NO view
    return this.props.render(this.state)
  }
}
 
 
 
const Page = () => <div>
  <SomeService render={svcState =>
    <>
      <h1>{ svcState.header }</h1>
      <p>{ svcState.content }</p>
    </>
  }></SomeService>
</div>
class SomeService extends React.Component {
  performSomeLogic(){
    // including state mgmt, webservices, session 
  }
 
  render(){ // should have NO view
    return this.props.render(this.state)
  }
}
 
 
 
const Page = () => <div>
  <SomeService render={svcState =>
    <>
      <h1>{ svcState.header }</h1>
      <p>{ svcState.content }</p>
    </>
  }></SomeService>
</div>
class SomeService extends React.Component {
  performSomeLogic(){
    // including state mgmt, webservices, session 
  }
 
  render(){ // should have NO view
    return this.props.render(this.state)
  }
}
 
 
 
const Page = () => <div>
  <SomeService render={svcState =>
    <>
      <h1>{ svcState.header }</h1>
      <p>{ svcState.content }</p>
    </>
  }></SomeService>
</div>
class SomeService extends React.Component {
  performSomeLogic(){
    // including state mgmt, webservices, session 
  }
 
  render(){ // should have NO view
    return this.props.render(this.state)
  }
}
 
 
 
const Page = () => <div>
  <SomeService render={svcState =>
    <>
      <h1>{ svcState.header }</h1>
      <p>{ svcState.content }</p>
    </>
  }></SomeService>
</div>

let rate = 3.94;
let amount = 1000;
let exchange = amount / rate; // 253.80
 
rate = 3.97;
exchange // DESYNC, sync manually!
let rate = 3.94;
let amount = 1000;
let exchange = amount / rate; // 253.80
 
rate = 3.97;
exchange // DESYNC, sync manually!
let rate = 3.94;
let amount = 1000;
let exchange = amount / rate; // 253.80
 
rate = 3.97;
exchange // DESYNC, sync manually!
let rate = 3.94;
let amount = 1000;
let exchange = amount / rate; // 253.80
 
rate = 3.97;
exchange // DESYNC, sync manually!
let rate = 3.94;
let amount = 1000;
let exchange = amount / rate; // 253.80
 
rate = 3.97;
exchange // DESYNC, sync manually!

let rate$ = 3.94;
let amount$ = 1000;
let exchange$ = amount$ / rate$; // 253.80
 
rate$ = 3.97;
exchange$ // 251.89
let rate$ = 3.94;
let amount$ = 1000;
let exchange$ = amount$ / rate$; // 253.80
 
rate$ = 3.97;
exchange$ // 251.89
let rate$ = 3.94;
let amount$ = 1000;
let exchange$ = amount$ / rate$; // 253.80
 
rate$ = 3.97;
exchange$ // 251.89

let rate$ = fromEvent(...) // WebSocket, 3.94 
let amount$ = fromEvent(...) // input, 1000
let exchange$ = combineLatest(amount$, rate$,
    (amount, rate) => amount / rate)
// AUTO -> 253.80

rate$ // external -> 3.97
exchange$ // AUTO -> 251.89