angular4 example

by declanmcd

HTML

<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.8.5/dist/zone.min.js"></script>
<script src="https://unpkg.com/rxjs@5.2.0/bundles/Rx.min.js"></script>
<script src="https://unpkg.com/@angular/core@4.0.1/bundles/core.umd.js"></script>
<script src="https://unpkg.com/@angular/common@4.0.1/bundles/common.umd.js"></script>
<script src="https://unpkg.com/@angular/compiler@4.0.1/bundles/compiler.umd.js"></script>
<script src="https://unpkg.com/@angular/platform-browser@4.0.1/bundles/platform-browser.umd.js"></script>
<script src="https://unpkg.com/@angular/platform-browser-dynamic@4.0.1/bundles/platform-browser-dynamic.umd.js"></script>
<my-app></my-app>

CSS

pre{
  font-size:8pt;
}

.container{
  border:1px solid silver;
  background-color:wheat;
}

TypeScript

let { Component, NgModule } = ng.core;

@Component({
  selector: 'my-app',
  
  template: `
  	<h1>{{ name }}</h1>
    <button (click)="increment()">Run {{ runCounter }}</button>
		
    <hr>
    Fields: {{fields.length}}

    <div class="container">
        <div *ngFor="let field of this.fields1" >
          <div class="block">{{ field.title }} : {{getValue(field)}}</div>
        </div>
    </div>
    
  `,
})

class HomeComponent {
		runCounter = 0;
    name = 'Angular: Testing loop';
    
    increment() {
    	this.runCounter++;
    }
    
    _counter = 1;
    getValue(field) {
        console.log("getValue: "+ this._counter++, field.title);
        return field.name;
    }
    
    fields1= [
   	{
        "title": "Id",
    }]
    
    
   fields= [
   	{
        "title": "Id",
        "type": {
            "code": "readOnly",
        },
        "field": "Id",
        "value": 123,
        "name": "Id",
    },
    {
        "title": "The First Field",
        "type": {
            "code": "hidden",
        },
        "field": "Field1",
        "name": "Field1"
    },
    {
        "title": "The Second Field",
        "type": {
            "code": "hidden",
        },
        "field": "Field2",
        "value": "The value is 2",
        "name": "Field2"
    },
    {
        "title": "The Third Field",
        "type": {
            "code": "text",
        },
        "field": "Field3",
        "value": "The value is 3",
        "name": "Field3"
    },
    {
        "title": "The Fourth Field",
        "type": {
            "code": "readOnly",
        },
        "field": "Field4",
        "value": 4,
        "name": "Field4"
    }
    
]
    
    
}

const { BrowserModule } = ng.platformBrowser;

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ HomeComponent ],
  bootstrap:    [ HomeComponent ]
})
class AppModule { }

const { platformBrowserDynamic } = ng.platformBrowserDynamic;
platformBrowserDynamic().bootstrapModule(AppModule);