<!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 {Profile} from './profile'
import {ProfileService} from './profile.service';
@Component({
selector: 'my-app',
template: `
<div>
<profile></profile>
</div>
`,
})
export class App {
constructor() {
}
}
@NgModule({
imports: [ BrowserModule ],
declarations: [ App, Profile ],
providers:[ProfileService],
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;
}
export interface IProfile{
Name: string;
Age: number;
}
import {Injectable} from '@angular/core';
import {IProfile} from './iprofile';
@Injectable({
providedIn: 'root'
})
export class ProfileService{
getProfiles(): IProfile[]{
return [{
Name:'Bob',
Age: 25
},
{
Name:'Alice',
Age: 23
}];
}
}
import {Component, OnInit} from '@angular/core'
import { ProfileService } from './profile.service';
import { IProfile } from './iprofile'
@Component({
selector: 'profile',
template: `
<div>
<h2>Name : {{MyProfile.Name}}</h2>
<h4>Age : {{MyProfile.Age}}</h4>
</div>
`
})
export class Profile implements OnInit{
ProfileList : IProfile[];
MyProfile : IProfile;
constructor(private _profileService: ProfileService){
}
ngOnInit(){
this.ProfileList = this._profileService.getProfiles();
this.MyProfile = this.ProfileList[0];
}
}
{
"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",
"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,
"emitDecoratorMetadata": true
}
}