<!doctype html>
<html>
<head>
<script src="./lib/main.ts"></script>
</head>
<body>
<my-app>
loading...
</my-app>
</body>
</html>
//our root app component
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { FormsModule } from '@angular/forms';
@Component({
selector: 'my-app',
template:`<div>
Interpolation -> <span>Hello {{name}}</span>
<br />
<br />
One way binding -> <span [innerText]='name'></span>
<br />
<br />
Two Way binding -> <input type='text' [(ngModel)]='name' >
<br />
<br />
Event Binding -> <button type='button' (click)='resetName()'>Reset Name</button>
<br />
<br />
</div>`,
})
export class App {
name:string;
constructor() {
this.name = 'Angular'
}
resetName(): void {
this.name = 'ng'
}
}
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
// Shim the environment
import 'core-js/client/shim';
// Angular requires Zones to be pre-configured in the environment
import 'zone.js/dist/zone';
//main entry point
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app';
import './style.css';
platformBrowserDynamic().bootstrapModule(AppModule);
h1,
p {
font-family: sans-serif;
}
{
"name": "@plnkr/starter-angular",
"version": "1.0.3",
"description": "Angular starter template",
"dependencies": {
"@angular/common": "^7.0.0-rc.0",
"@angular/compiler": "^7.0.0-rc.0",
"@angular/core": "^7.0.0-rc.0",
"@angular/platform-browser": "^7.0.0-rc.0",
"@angular/platform-browser-dynamic": "^7.0.0-rc.0",
"@angular/forms": "^7.0.0-rc.0",
"core-js": "^2.5.5",
"rxjs": "^6.1.0",
"zone.js": "^0.8.26"
},
"main": "./lib/main.ts",
"plnkr": {
"runtime": "system",
"useHotReload": true
}
}
{
"compilerOptions": {
"experimentalDecorators": true
}
}