<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<script src="https://npmcdn.com/core-js/client/shim.min.js"></script>
<script src="https://npmcdn.com/zone.js@0.6.12?main=browser"></script>
<script src="https://npmcdn.com/reflect-metadata@0.1.3"></script>
<script src="https://npmcdn.com/systemjs@0.19.27/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('script.ts').catch(function(err) {
console.error(err);
});
</script>
</head>
<body>
<app></app>
</body>
</html>
//Basha Code
import {
NgModule,
Component,
Input,
Output,
EventEmitter,
ViewChildren,
ContentChildren,
AfterViewInit,
AfterContentInit,
QueryList
} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
class Joke{
setup: string;
punchline: string;
hide: boolean;
constructor(setup: string, punchline: string){
this.setup = setup;
this.punchline = punchline;
this.hide = true;
}
toggle() {
this.hide = !this.hide;
}
}
@Component({
selector: 'joke-form',
template:`
<div class="card card-block">
<h4 class="card-title">Create Joke</h4>
<div class="form-group">
<input type="text"
class="form-control"
placeholder="Enter the setup" #setup>
</div>
<div class="form-group">
<input type="text"
class="form-control"
placeholder="Enter the punchline" #punchline>
</div>
<button type="button"
class="btn btn-primary"
(click)="createJoke(setup.value, punchline.value)">Create
</button>
</div>
`
})
class JokeFormComponent{
@Output() jokeCreated = new EventEmitter<Joke>();
createJoke(setup: string, punchline: string){
this.jokeCreated.emit(new Joke(setup, punchline));
}
}
@Component({
selector: 'joke',
template: `
<div class="card card-block">
<h4 class="card-title">
<ng-content select=".setup"></ng-content>
</h4>
<p class="card-text" [hidden]="data.hide">
<ng-content select=".punchline"></ng-content>
</p>
<button class="btn btn-primary"
(click)="data.toggle()">Tell Me
</button>
</div>`
})
class JokeComponent{
@Input('joke') data: Joke
}
@Component({
selector: 'joke-list',
template: `
<joke *ngFor="let j of jokes" [joke]="j">
<span class="setup">{{j.setup}}</span>
<h1 class="punchline">{{j.punchline}}</h1>
</joke>
<ng-content></ng-content>`
})
class JokeListComponent implements AfterViewInit, AfterContentInit{
jokes: Joke[];
@ViewChildren(JokeComponent) jokeViewChildren : QueryList<JokeComponent>;
@ContentChildren(JokeComponent) jokeContentChildren : QueryList<JokeComponent>;
constructor(){
this.jokes = [
new Joke("What did the cheese say when it looked in the mirror?", "Hello-Me (Halloumi)"),
new Joke("What kind of cheese do you use to disguise a small horse?", "Mask-a-pony (Mascarpone)")
];
}
addJoke(joke){
this.jokes.unshift(joke);
}
ngAfterViewInit(){
console.log('on after view init');
let jokes : JokeComponent[] = this.jokeViewChildren.toArray();
console.log(jokes);
}
ngAfterContentInit(){
console.log('on after content init');
let jokes : JokeComponent[] = this.jokeContentChildren.toArray();
console.log(jokes);
}
}
@Component({
selector: 'app',
template: `
<joke-list>
<joke [joke]="joke">
<span class="setup">{{joke.setup}}</span>
<h1 class="punchline">{{joke.punchline}}</h1>
</joke>
</joke-list>`
})
class AppComponent{
joke: Joke = new Joke("A kid threw a lump of cheddar at me", "I thought ‘That’s not very mature’");
}
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent, JokeComponent, JokeListComponent, JokeFormComponent],
bootstrap: [AppComponent]
})
export class AppModule{
}
platformBrowserDynamic().bootstrapModule(AppModule);
/**
* PLUNKER VERSION (based on systemjs.config.js in angular.io)
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function(global) {
var ngVer = '@2.0.0-rc.5'; // lock in the angular package version; do not let it float to current!
var routerVer = '@3.0.0-rc.1'; // lock router version
var formsVer = '@0.3.0'; // lock forms version
var routerDeprecatedVer = '@2.0.0-rc.2'; // temporarily until we update all the guides
//map tells the System loader where to look for things
var map = {
'app': 'app',
'@angular': 'https://npmcdn.com/@angular', // sufficient if we didn't pin the version
'@angular/router': 'https://npmcdn.com/@angular/router' + routerVer,
'@angular/forms': 'https://npmcdn.com/@angular/forms' + formsVer,
'@angular/router-deprecated': 'https://npmcdn.com/@angular/router-deprecated' + routerDeprecatedVer,
'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api', // get latest
'rxjs': 'https://npmcdn.com/rxjs@5.0.0-beta.6',
'ts': 'https://npmcdn.com/plugin-typescript@4.0.10/lib/plugin.js',
'typescript': 'https://npmcdn.com/typescript@1.9.0-dev.20160409/lib/typescript.js',
};
//packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.ts', defaultExtension: 'ts' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
};
var ngPackageNames = [
'common',
'compiler',
'core',
'http',
'platform-browser',
'platform-browser-dynamic',
'upgrade',
];
// Add map entries for each angular package
// only because we're pinning the version with `ngVer`.
ngPackageNames.forEach(function(pkgName) {
map['@angular/'+pkgName] = 'https://npmcdn.com/@angular/' + pkgName + ngVer;
});
// Add package entries for angular packages
ngPackageNames.concat(['forms', 'router', 'router-deprecated']).forEach(function(pkgName) {
// Bundled (~40 requests):
packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
// Individual files (~300 requests):
//packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
var config = {
// DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
transpiler: 'ts',
typescriptOptions: {
tsconfig: true
},
meta: {
'typescript': {
"exports": "ts"
}
},
map: map,
packages: packages
};
System.config(config);
})(this);
/*
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
*/
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
}
}