Angular 4 Custom Directive

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AulosStructuralDirective</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <app-root></app-root>
</body>
</html>

<h1>{{title}}</h1>
<aulos-array-component>
</aulos-array-component>

import { Component, Input } from "@angular/core";

@Component({
  selector: "aulos-param-component",
  templateUrl: "./aulos.param.component.html",
  styleUrls: ["./aulos.param.component.css"]
})

export class AulosParamComponent {

  @Input() labelTitle: string;
  @Input() inputBoxValue: string;

}

import { Component, Directive, OnInit, ContentChild } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],

})

export class AppComponent implements OnInit {
  title = "AulosStructuralDirective";

  ngOnInit() {
    console.log("AppComponent initialized");
  }

}

import { BrowserModule } from "@angular/platform-browser";
import { NgModule }      from "@angular/core";

import { AppComponent }  from "./app.component";
import { AulosParamComponent }    from "./aulos.param.component";
import { AulosArrayComponent }    from "./aulos.array.component";

import { DataService }   from "./data.service";

@NgModule({
  declarations: [
    AppComponent,
    AulosParamComponent,
    AulosArrayComponent,
  ],

  imports: [
    BrowserModule,
  ],

  exports: [
  ],

  providers: [
    DataService
  ],

  bootstrap: [AppComponent]
})

export class AppModule { }

<p>title: {{labelTitle}} </p> 
<p>value: {{inputBoxValue}} </p>

import { Component, OnInit } from "@angular/core";

import { DataService } from "./data.service";
import { InputData } from "./input.data";

@Component({
  selector: "aulos-array-component",
  templateUrl: "./aulos.array.component.html",
  styleUrls: ["./aulos.array.component.css"],

  providers: [DataService]
})

export class AulosArrayComponent implements OnInit {
    inputDataArray: InputData[];

    constructor(
        private DataService: DataService) { }

    getData(): void {
        this.DataService.getArrayOfInputData()
            .then(inputDataArray => this.inputDataArray = inputDataArray);
        console.log("getData done"); 
    }

    ngOnInit(): void {
        this.getData();
        console.log("ngOnInit done");
    }
}

<ul class="array-component-list" *ngFor="let single of inputDataArray">
    <aulos-param-component [labelTitle]="single.title" [inputBoxValue]="single.value" ></aulos-param-component>
</ul>

import { TestBed, async } from '@angular/core/testing';

import { AppComponent } from './app.component';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));

  it('should create the app', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));

  it(`should have as title 'app'`, async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app.title).toEqual('app');
  }));

  it('should render title in a h1 tag', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!!');
  }));
});

export class InputData {
    title: string;
    value: string;
}

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

import { InputData }       from "./input.data";
import { INPUTDATALIST }   from "./mock-inputdata";

@Injectable()
export class DataService {
    getArrayOfInputData(): Promise<InputData[]> {
        return Promise.resolve(INPUTDATALIST);
        
    }
}

import { InputData } from "./input.data";

export const  INPUTDATALIST: InputData[] = [
    { title: "parameter 1", value: "x" },
    { title: "parameter 2", value: "y" },
    { title: "parameter 3", value: "z" }

];

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);