nirkaufman

enum Status {Received, Pending, InProcess, Sent, Delivered }
enum Priority { Low, Medium, High, Urgent }

interface Order {
  id: number;
  itemCount: number;
  ordered: string;
  expectedDelivery: string;
  status: Status,
  priority: Priority;

nirkaufman

import {
  ChangeDetectorRef,
  Component,
  ComponentFactory,
  ComponentFactoryResolver,
  ElementRef,
  Injector,
  OnInit,
  Renderer2,
  ViewChild,

nirkaufman

import {Component} from '@angular/core';
import {Card, CardTypes} from "./cards/cards.types";

@Component({
  selector: 'app-root',
  template: `
      <div class="container m-5">
          
          <ng-container *cardDeck="let card for cards; primary customPrimary"></ng-container>
          

nirkaufman

function renderElement(element) {
  const {type, props, children} = element;

  // component support
  if(typeof type === 'function') {
    return renderElement(type(props));
  }

  const domElement = document.createElement(type);

nirkaufman

// Holds a state (currentUser), end expose
// methods to alter it
class Auth {
  constructor() {
    this.currentUser = null;
  }

  signIn() {
    this.currentUser = {name: "Nir"};
  }

nirkaufman

// *******************************
// Just a wrapper around callbacks,
// So we can use the same API - and state of mind
// *******************************

// helper to create observable
function createObservable(subscribe) {
  return {
    subscribe,

nirkaufman

// Concept

@Directive({
    selector: 'introTip'
})
class IntroTipDirective implements Oninit{
    @Input('introTip') key: string;

    constructor(private hostElement: ElementRef,
                private interService;

nirkaufman

import VideoPlayer from "./VideoPlayer";

const App = () => (
  <div>
    <h1>Declarative Usage</h1>

    {/* create context for a VideoPlayer */}
    <VideoPlayer>

      <VideoPlayer.Player src={"sample.mp4"}/>

nirkaufman

async function bootstrap() {
  const config = await fetch('http://localhost:3000/config').then( res => res.json() );

  // You can provide static providers to the created platform
  const browserPlatform = platformBrowserDynamic([
    { provide: ConsoleLogger }
  ]);

  // After bootstrapping your module you can use thק appModuleRef to configure
  // The module injector, and get access to this module components

nirkaufman

/*******************
 warm up
 *******************/

function* generateAlphaBet() {
  let i = "a".charCodeAt(0);
  let end = "z".charCodeAt(0) + 1;

  while(i < end) {
    yield String.fromCharCode(i);