Untitled

// command.ts

import {ActionBase} from "./action";
import {Component} from "@angular/core";
import {SpecZero, SpecText, ISpec} from "./spec"

@Component({
  selector: "df-command",
  templateUrl: "command.html"
})
export class Command {
  test: string;
  spec_parts: ISpec[] = [];
  action: ActionBase[] = [];

  constructor() {
    this.test = "" + Math.random();
    /*
    I think
     <df-spec *ngFor="let spec_part of spec_parts">
     is not actually accessing this list, but just making a new <df-spec>
     for each item in the list...
     */

    let s = new SpecZero();
    s.type = 0;
    s.value = "MY_TEST_0";
    this.spec_parts.push(s);

    let a = new SpecText();
    a.value = "MY_TEST_1";
    a.type = 1;
    this.spec_parts.push(a);

    let x = new ActionBase();
    this.action.push(x);
  }

}
//   spec.ts      ----------------------------------------
import {Component, Injectable} from "@angular/core";

export interface ISpec {
  type: number;
  value: string;
}

@Component({
  selector: 'df-spec',
  templateUrl: "spec.html"
})
export class SpecWrapper {
  @Injectable()
  public spec: ISpec;
}


export class SpecZero implements ISpec {
  public type: number = 0;
  public value: string = "SB";
}

export class SpecText implements ISpec {
  public type: number = 1;
  public value: string = "ST";
}
// command.html -----------------------------------------
<span>COMMAND:</span>
<ul>
  <div *ngFor="let spec_part of spec_parts">
    {{spec_part}}
  </div>
  <df-action *ngFor="let action_part of action"></df-action>
</ul>
//  spec.html            ------------------
<span>value: {{value}}| </span>
<span>type: {{type}}| </span>
<span *ngIf="type===1">is one</span>
<span *ngIf="type!==1">not one</span>