diff --git a/public/docs/_examples/homepage-tabs/ts/src/bs_tabs.ts b/public/docs/_examples/homepage-tabs/ts/src/bs_tabs.ts deleted file mode 100644 index b755799eb3..0000000000 --- a/public/docs/_examples/homepage-tabs/ts/src/bs_tabs.ts +++ /dev/null @@ -1,23 +0,0 @@ -// #docregion -import {Component, Directive, Input, QueryList} from 'angular2/core'; - -@Directive({ - selector: '[bsPane]' -}) -export class BsPane { - @Input() title: string; -} - -@Component({ - selector: 'tabs', - template: ` - ` -}) -export class BsTabs { - //@ContentChildren(BsPane) panes: QueryList; -} diff --git a/public/docs/_examples/homepage-tabs/ts/src/di_demo.ts b/public/docs/_examples/homepage-tabs/ts/src/di_demo.ts index f1149c6b90..5488c02bba 100644 --- a/public/docs/_examples/homepage-tabs/ts/src/di_demo.ts +++ b/public/docs/_examples/homepage-tabs/ts/src/di_demo.ts @@ -1,17 +1,42 @@ // #docregion import {Component} from 'angular2/core'; -import {BsTabs, BsPane} from './bs_tabs'; +import {UiTabs, UiPane} from './ui_tabs'; @Component({ selector: 'di-demo', template: ` - Demo: - -
- summary text ... -
- `, - directives: [BsTabs, BsPane] +

Tabs Demo

+ + + + + +
+ + `, + directives: [UiTabs, UiPane] }) export class DiDemo { + details: Detail[] = []; + id: number = 0; + + addDetail() { + this.id++; + this.details.push({ + title: `Detail ${this.id}`, + text: `Some detail text for ${this.id}...` + }); + } + + removeDetail(detail) { + this.details = this.details.filter((d) => d !== detail); + } } + diff --git a/public/docs/_examples/homepage-tabs/ts/src/index.html b/public/docs/_examples/homepage-tabs/ts/src/index.html index 9875293b30..edb53094d0 100644 --- a/public/docs/_examples/homepage-tabs/ts/src/index.html +++ b/public/docs/_examples/homepage-tabs/ts/src/index.html @@ -4,6 +4,7 @@ Angular 2 QuickStart + @@ -32,7 +33,7 @@ - Loading... + Loading... \ No newline at end of file diff --git a/public/docs/_examples/homepage-tabs/ts/src/ui_tabs.ts b/public/docs/_examples/homepage-tabs/ts/src/ui_tabs.ts new file mode 100644 index 0000000000..53b08dab18 --- /dev/null +++ b/public/docs/_examples/homepage-tabs/ts/src/ui_tabs.ts @@ -0,0 +1,50 @@ +// #docregion +import {Component, Directive, Input, QueryList, + ViewContainerRef, TemplateRef, ContentChildren} from 'angular2/core'; + +@Directive({ + selector: '[ui-pane]' +}) +export class UiPane { + @Input() title: string; + private _active:boolean = false; + + constructor(public viewContainer: ViewContainerRef, + public templateRef: TemplateRef) { } + + @Input() set active(active: boolean) { + if (active == this._active) return; + this._active = active; + if (active) { + this.viewContainer.createEmbeddedView(this.templateRef); + } else { + this.viewContainer.remove(0); + } + } + + get active(): boolean { + return this._active; + } +} + +@Component({ + selector: 'ui-tabs', + template: ` + + + ` +}) +export class UiTabs { + @ContentChildren(UiPane) panes: QueryList; + + select(pane: UiPane) { + this.panes.toArray().forEach((p: UiPane) => p.active = p == pane); + } +} + diff --git a/public/index.jade b/public/index.jade index d962cb5aa2..792351a9ef 100644 --- a/public/index.jade +++ b/public/index.jade @@ -22,7 +22,7 @@ div +makeTabs('../docs/_fragments/homepage-hello-world/ts/src/hello_world.ts,../docs/_fragments/homepage-hello-world/ts/src/hello_world.html,../docs/_fragments/homepage-hello-world/ts/src/index.html', null, 'hello_world.ts,hello_world.html,index.html') br div - h3.text-headline Structuring apps with components + h3.text-headline Structuring Apps With Components p.text-body Groups of coordinated components divide the responsibilities of our application. This ToDo list app has a separate component for the form, the list, and the core app logic. Where the previous example component referenced templates in separate files, this one shows using inline templates. p.text-body Defining types as we do here in Todo.ts communicates our intention to other developers, helps us find bugs in our code, and lets IDEs do more work for us in refactoring, code navigation, and code completion. p(style='text-align:right') @@ -31,3 +31,12 @@ div | Try in Plunker +makeTabs('../docs/_fragments/homepage-todo/ts/src/todo_app.ts,../docs/_fragments/homepage-todo/ts/src/todo_form.ts,../docs/_fragments/homepage-todo/ts/src/todo_list.ts,../docs/_fragments/homepage-todo/ts/src/todo.ts,../docs/_fragments/homepage-todo/ts/src/index.html', null, 'todo_app.ts,todo_form.ts,todo_list.ts,todo.ts,index.html') br +div + h3.text-headline Advanced Component Communication + p.text-body This demo shows an efficient implementation of tabs/panes. Each pane is only instantiated while it is visible. Panes which are not visible are released and do not have associated memory, DOM and change detection cost. + p.text-body The demo also showcases dependency injection and the ability of one component to query for other components. Such queries automatically update even as detail panes are added. This allows tobs component to work with ngFor without any special knowledge of it. + p(style='text-align:right') + md-button.md-primary(href='http://plnkr.co/edit/PK6Hyg?p=preview' target='_blank') + span.icon-open-in-new + | Try in Plunker + +makeTabs('../docs/_fragments/homepage-tabs/ts/src/ui_tabs.ts,../docs/_fragments/homepage-tabs/ts/src/di_demo.ts,../docs/_fragments/homepage-tabs/ts/src/index.html', null, 'ui_tabs.ts,di_demo.ts,index.html')