/** Add Transpiler for Typescript */
System.config({
  transpiler: 'typescript',
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  packages: {
    '.': {
      defaultExtension: 'ts'
    },
    'vendor': {
      defaultExtension: 'js'
    }
  }
});

System.config({
  map: {
    'main': 'main.js',
    
    // Angular specific mappings.
    '@angular/core': 'https://unpkg.com/@angular/core/bundles/core.umd.js',
    '@angular/common': 'https://unpkg.com/@angular/common/bundles/common.umd.js',
    '@angular/compiler': 'https://unpkg.com/@angular/compiler/bundles/compiler.umd.js',
    '@angular/animations': "https://unpkg.com/@angular/animations/bundles/animations.umd.js",
    '@angular/animations/browser': 'https://unpkg.com/@angular/animations/bundles/animations-browser.umd.js',
    '@angular/http': 'https://unpkg.com/@angular/http/bundles/http.umd.js',
    '@angular/forms': 'https://unpkg.com/@angular/forms/bundles/forms.umd.js',
    '@angular/router': 'https://unpkg.com/@angular/router/bundles/router.umd.js',
    '@angular/platform-browser': 'https://unpkg.com/@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser/animations': 'https://unpkg.com/@angular/platform-browser/bundles/platform-browser-animations.umd.js',
    '@angular/platform-browser-dynamic': 'https://unpkg.com/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
    '@angular/material': 'https://rawgit.com/angular/material2-builds/master/bundles/material.umd.js',
    '@angular/cdk': 'https://rawgit.com/angular/cdk-builds/master/bundles/cdk.umd.js',

    
    // Third party libraries
    'tslib': 'https://unpkg.com/tslib@1.7.1',
    'rxjs': 'https://unpkg.com/rxjs',
  },
  packages: {
    // Thirdparty barrels.
    'rxjs': { main: 'index' },
  }
});

/*
 Copyright 2016 Google Inc. All Rights Reserved.
 Use of this source code is governed by an MIT-style license that
 can be found in the LICENSE file at http://angular.io/license
 */

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {HttpModule} from '@angular/http';
import {AppComponent} from './app.component';
import {CdkTableModule} from '@angular/cdk'
import { FormGroup, FormArray, FormBuilder, Validators, FormControl, AbstractControl, FormsModule, ReactiveFormsModule } from "@angular/forms";


import {
  MdAutocompleteModule,
  MdButtonModule,
  MdButtonToggleModule,
  MdCardModule,
  MdCheckboxModule,
  MdChipsModule,
  MdCoreModule,
  MdDatepickerModule,
  MdDialogModule,
  MdExpansionModule,
  MdGridListModule,
  MdIconModule,
  MdInputModule,
  MdListModule,
  MdMenuModule,
  MdNativeDateModule,
  MdProgressBarModule,
  MdProgressSpinnerModule,
  MdRadioModule,
  MdRippleModule,
  MdSelectModule,
  MdSidenavModule,
  MdSliderModule,
  MdSlideToggleModule,
  MdSnackBarModule,
  MdTabsModule,
  MdToolbarModule,
  MdTooltipModule,
  OverlayModule 
} from '@angular/material';

/**
 * NgModule that includes all Material modules that are required to serve 
 * the Plunker.
 */
@NgModule({
  exports: [
    // CDk
    CdkTableModule,
    
    // Material
    MdAutocompleteModule,
    MdButtonModule,
    MdButtonToggleModule,
    MdCardModule,
    MdCheckboxModule,
    MdChipsModule,
    MdDatepickerModule,
    MdDialogModule,
    MdExpansionModule,
    MdGridListModule,
    MdIconModule,
    MdInputModule,
    MdListModule,
    MdMenuModule,
    MdCoreModule,
    MdProgressBarModule,
    MdProgressSpinnerModule,
    MdRadioModule,
    MdRippleModule,
    MdSelectModule,
    MdSidenavModule,
    MdSlideToggleModule,
    MdSliderModule,
    MdSnackBarModule,
    MdTabsModule,
    MdToolbarModule,
    MdTooltipModule,
    MdNativeDateModule,
    FormsModule,
    ReactiveFormsModule,
    
    // Material (future CDK)
    OverlayModule,
  ]
})
export class PlunkerMaterialModule {}

@NgModule({

  imports: [
    BrowserModule,
    CommonModule,
    HttpModule,
    PlunkerMaterialModule,
    BrowserAnimationsModule
  ],

  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: []
})
export class PlunkerAppModule {}

platformBrowserDynamic().bootstrapModule(PlunkerAppModule);

/*
 Copyright 2016 Google Inc. All Rights Reserved.
 Use of this source code is governed by an MIT-style license that
 can be found in the LICENSE file at http://angular.io/license
 */

<!DOCTYPE html>
<html>

<head>
  <title>Angular Material Plunker</title>

  <!-- Load common libraries -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/2.1.6/typescript.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.7.2/zone.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.47/system.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.2/web-animations.min.js"></script>

  <!-- Configure SystemJS -->
  <script src="systemjs.config.js"></script>

  <script>
    System
      .import('main.ts')
      .catch(console.error.bind(console));
  </script>

  <!-- Load the Angular Material stylesheet -->
  <link href="https://rawgit.com/angular/material2-builds/master/prebuilt-themes/indigo-pink.css" rel="stylesheet">
  <style>
    body {
      font-family: Roboto, Arial, sans-serif;
      margin: 0
    }
  </style>

</head>

<body class="mat-app-background">
  <material-app>Loading the Angular Material App...</material-app>
</body>

</html>

<!--
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

import { NgModule, Output, EventEmitter, ChangeDetectorRef} from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { FormGroup, FormArray, FormBuilder, Validators, FormControl, AbstractControl, FormsModule, ReactiveFormsModule } from "@angular/forms";

import { MdButtonModule, MdInputModule, MdInputContainer, MdDatepickerModule, MdNativeDateModule, MdSelectModule} from '@angular/material';
import { Component, OnInit } from "@angular/core";

@Component({
  selector: 'material-app',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  
 
    searchform: FormGroup;

    constructor(private fb: FormBuilder,
        private cd: ChangeDetectorRef) {
    }

    ngOnInit(): void {

        this.searchform = this.fb.group({
            'city': new FormControl("", Validators.required),
            'rooms': this.fb.array([
                this.initRoom(),
            ])
        }
        );

    }

    initRoom() {
        let form = this.fb.group({
            'adults': new FormControl(""),
            'children': this.fb.array([])
        },
        );

        return form;
    }

    initAge() {
        return this.fb.group({
            'age': ['', Validators.required]
        });
    }

    addRoom() {
        const control = <FormArray>this.searchform.controls['rooms'];
        control.push(this.initRoom());
    }

 
    addChild(i: number) {

        const control = (<any>(<FormArray>this.searchform.controls.rooms).controls[i]).controls["children"].controls;
        control.push(this.initAge());

    }


  
  
}

<form  *ngIf="searchform" [formGroup]="searchform">
    <div class="row">
        <div class="col-md-12 form-group">
            <md-input-container style="width: 100%;">
                <input mdInput placeholder="City" formControlName="city">
               
            </md-input-container>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <button md-raised-button color="primary" (click)="addRoom()">Add room</button>
        </div>
    </div>
   
    <div formArrayName="rooms">
        <div class="row" [formGroupName]="i" *ngFor="let room of searchform.controls.rooms.controls; let i=index">

            <div class="col-md-2">
                <span>Room {{i + 1}}</span>
                
            </div>
            <div class="form-group col-md-4">
                <md-input-container>
                    <input mdInput placeholder="Adults" formControlName="adults">
                </md-input-container>

            </div>
           
            <div class="row">
                <div class="col-md-12">
                    <button md-raised-button color="primary" (click)="addChild(i)">Add child</button>
                </div>
            </div>
         
            <div formArrayName="children">
                
                <div class="row" [formGroupName]="j" *ngFor="let ageItem of searchform.controls.rooms.controls[i].controls.children.controls; let j=index">
                    <div class="form-group">
                        <md-input-container>
                            <input mdInput placeholder="Age" formControlName="age">
                        </md-input-container>
                    </div>

                </div>

            </div>

        </div>

    </div>

    <div >
        {{searchform.value | json}}
    </div>

</form>