cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(example): adds zippy example

Browse Source
This commit is contained in:
Pascal Precht
2015-06-22 10:52:00 +02:00
committed by Victor Berchet
parent dee0e008f5
commit 783654e6a3
7 changed files with 107 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
modules/examples/src/zippy_component/index.html Normal file
View File

@ -0,0 +1,11 @@
<!doctype html>
<html>
<title>Zippy Angular 2.0</title>
<body>
<zippy-app>
Loading...
</zippy-app>
$SCRIPTS$
</body>
</html>

27
modules/examples/src/zippy_component/index.ts Normal file
View File

@ -0,0 +1,27 @@
import {bootstrap, Component, View, NgFor} from 'angular2/angular2';
import {reflector} from 'angular2/src/reflection/reflection';
import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
import {Zippy} from './zippy';
@Component({selector: 'zippy-app'})
@View({
template: `
<zippy (open)="pushLog('open')" (close)="pushLog('close')" title="Details">
This is some content.
</zippy>
<ul>
<li *ng-for="var log of logs">{{log}}</li>
</ul>
`,
directives: [Zippy, NgFor]
})
class ZippyApp {
logs: Array<string> = [];
pushLog(log: string) { this.logs.push(log); }
}
export function main() {
reflector.reflectionCapabilities = new ReflectionCapabilities();
bootstrap(ZippyApp);
}

8
modules/examples/src/zippy_component/zippy.html Normal file
View File

@ -0,0 +1,8 @@
<div class="zippy">
<div (click)="toggle()" class="zippy__title">
{{ visible ? '&blacktriangledown;' : '&blacktriangleright;' }} {{title}}
</div>
<div [hidden]="!visible" class="zippy__content">
<content></content>
</div>
</div>

24
modules/examples/src/zippy_component/zippy.ts Normal file
View File

@ -0,0 +1,24 @@
import {Component, View, EventEmitter} from 'angular2/angular2';
import {ObservableWrapper} from 'angular2/src/facade/async';
@Component({
selector: 'zippy',
properties: ['title'],
events: ['openHandler: open', 'closeHandler: close']
})
@View({templateUrl: 'zippy.html'})
export class Zippy {
visible: boolean = true;
title: string = '';
openHandler: EventEmitter = new EventEmitter();
closeHandler: EventEmitter = new EventEmitter();
toggle() {
this.visible = !this.visible;
if (this.visible) {
ObservableWrapper.callNext(this.openHandler, null);
} else {
ObservableWrapper.callNext(this.closeHandler, null);
}
}
}