diff --git a/README.md b/README.md
index 7c067d5..01c4d57 100644
--- a/README.md
+++ b/README.md
@@ -1,27 +1,33 @@
-# DynamicTabs
+# Egghead Course: Create a Dynamic Tabs Component with Angular
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.5.0.
+by Juri Strumpflohner ([Twitter](https://twitter.com/juristr) - [Blog](https://juristr.com/blog))
-## Development server
+This repository is organized in different branches, one branch for each video lesson.
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+## Contents
-## Code scaffolding
+1. [Get to know our basic Angular TabsComponent](https://github.com/juristr/egghead-create-dynamic-tabs-component-angular/tree/master)
+1. [Declare a template within a template using `ng-template` in Angular](https://github.com/juristr/egghead-create-dynamic-tabs-component-angular/tree/01-ng-template)
+1. [Pass a reference of an ng-template to a component and render it in Angular](https://github.com/juristr/egghead-create-dynamic-tabs-component-angular/tree/02-ng-container-and-template-outlet)
+1. [Pass data to be rendered in a dynamic ng-template using ngTemplateOutletContext in Angular](https://github.com/juristr/egghead-create-dynamic-tabs-component-angular/tree/03-ng-outlet-context)
+1. [Define an anchor point where to render dynamic components in Angular](https://github.com/juristr/egghead-create-dynamic-tabs-component-angular/tree/04-define-anchor-point)
+1. Dynamically instantiate an Angular component
+1. [Destroy a dynamically instantiated Angular component](https://github.com/juristr/egghead-create-dynamic-tabs-component-angular/tree/06-destroy-dynamic-components)
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+## Setup & Run
-## Build
+Clone the repository and install all packages
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
+```
+$ npm install
+```
-## Running unit tests
+Run the project by executing
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+```
+$ npm start
+```
-## Running end-to-end tests
+## Questions?
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+Feel free to reach out to me [on Twitter](https://twitter.com/juristr) or [open an issue](https://github.com/juristr/egghead-create-dynamic-tabs-component-angular/issues).
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 8177f80..af7bc84 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,5 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
import { PeopleService } from './people/people.service';
+import { TabsComponent } from './tabs/tabs.component';
@Component({
selector: 'app-root',
@@ -7,14 +8,20 @@ import { PeopleService } from './people/people.service';
<h1>Angular tabs</h1>
<ngx-tabs>
<ngx-tab tabTitle="People List">
- <app-people-list [people]="people"></app-people-list>
+ <app-people-list [people]="people"
+ (addPerson)="onAddPerson()"></app-people-list>
</ngx-tab>
- <ngx-tab tabTitle="Tab 2">Tab 2 Content</ngx-tab>
+
</ngx-tabs>
+ <ng-template let-person="data" #personEdit>
+ Hi, I'm {{ person?.name }}.
+ </ng-template>
`
})
export class AppComponent implements OnInit {
+ @ViewChild('personEdit') personEditTemplate;
+ @ViewChild(TabsComponent) tabsComponent: TabsComponent;
people;
constructor(private peopleService: PeopleService) {}
@@ -24,4 +31,12 @@ export class AppComponent implements OnInit {
this.people = data;
});
}
+
+ onAddPerson() {
+ this.tabsComponent.openTab(
+ 'Dynamic tab',
+ this.personEditTemplate,
+ this.people[0]
+ );
+ }
}
diff --git a/src/app/tabs/dynamic-tab-anchor.directive.ts b/src/app/tabs/dynamic-tab-anchor.directive.ts
new file mode 100644
index 0000000..9f3bd88
--- /dev/null
+++ b/src/app/tabs/dynamic-tab-anchor.directive.ts
@@ -0,0 +1,8 @@
+import { Directive, ViewContainerRef } from '@angular/core';
+
+@Directive({
+ selector: '[dynamicTabAnchor]'
+})
+export class DynamicTabAnchorDirective {
+ constructor(public viewContainer: ViewContainerRef) {}
+}
diff --git a/src/app/tabs/tab.component.ts b/src/app/tabs/tab.component.ts
index 5515e8c..5127671 100644
--- a/src/app/tabs/tab.component.ts
+++ b/src/app/tabs/tab.component.ts
@@ -12,10 +12,16 @@ import { Component, Input } from '@angular/core';
template: `
<div [hidden]="!active" class="pane">
<ng-content></ng-content>
+ <ng-container *ngIf="template"
+ [ngTemplateOutlet]="template"
+ [ngTemplateOutletContext]="{data: dataContext}">
+ </ng-container>
</div>
`
})
export class TabComponent {
@Input() tabTitle: string;
@Input() active = false;
+ @Input() template;
+ @Input() dataContext;
}
diff --git a/src/app/tabs/tabs.component.ts b/src/app/tabs/tabs.component.ts
index 06f494e..fb2da6d 100644
--- a/src/app/tabs/tabs.component.ts
+++ b/src/app/tabs/tabs.component.ts
@@ -2,9 +2,12 @@ import {
Component,
ContentChildren,
QueryList,
- AfterContentInit
+ AfterContentInit,
+ ViewChild,
+ ComponentFactoryResolver
} from '@angular/core';
import { TabComponent } from './tab.component';
+import { DynamicTabAnchorDirective } from './dynamic-tab-anchor.directive';
@Component({
selector: 'ngx-tabs',
@@ -13,12 +16,39 @@ import { TabComponent } from './tab.component';
<li *ngFor="let tab of tabs" (click)="selectTab(tab)" [class.active]="tab.active">
<a href="#">{{tab.tabTitle}}</a>
</li>
+ <li *ngFor="let tab of dynamicTabs" (click)="selectTab(tab)" [class.active]="tab.active">
+ <a href="#">{{tab.tabTitle}}</a>
+ </li>
</ul>
<ng-content></ng-content>
+ <ng-template dynamicTabAnchor #container></ng-template>
`
})
export class TabsComponent implements AfterContentInit {
@ContentChildren(TabComponent) tabs: QueryList<TabComponent>;
+ @ViewChild(DynamicTabAnchorDirective)
+ dynamicTabPlaceholder: DynamicTabAnchorDirective;
+ dynamicTabs: TabComponent[] = [];
+
+ constructor(private componentFactoryResolver: ComponentFactoryResolver) {}
+
+ openTab(title: string, template, data) {
+ const componentFactory = this.componentFactoryResolver.resolveComponentFactory(
+ TabComponent
+ );
+
+ const viewContainerRef = this.dynamicTabPlaceholder.viewContainer;
+
+ const componentRef = viewContainerRef.createComponent(componentFactory);
+ const instance: TabComponent = componentRef.instance as TabComponent;
+ instance.tabTitle = title;
+ instance.template = template;
+ instance.dataContext = data;
+
+ this.dynamicTabs.push(instance);
+
+ this.selectTab(this.dynamicTabs[this.dynamicTabs.length - 1]);
+ }
// contentChildren are set
ngAfterContentInit() {
@@ -34,6 +64,7 @@ export class TabsComponent implements AfterContentInit {
selectTab(tab: TabComponent) {
// deactivate all tabs
this.tabs.toArray().forEach(tab => (tab.active = false));
+ this.dynamicTabs.forEach(tab => (tab.active = false));
// activate the tab the user has clicked on.
tab.active = true;
diff --git a/src/app/tabs/tabs.module.ts b/src/app/tabs/tabs.module.ts
index d4528ee..240e740 100644
--- a/src/app/tabs/tabs.module.ts
+++ b/src/app/tabs/tabs.module.ts
@@ -2,10 +2,12 @@ import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TabsComponent } from './tabs.component';
import { TabComponent } from './tab.component';
+import { DynamicTabAnchorDirective } from './dynamic-tab-anchor.directive';
@NgModule({
imports: [CommonModule],
- declarations: [TabsComponent, TabComponent],
- exports: [TabsComponent, TabComponent]
+ declarations: [TabsComponent, TabComponent, DynamicTabAnchorDirective],
+ exports: [TabsComponent, TabComponent],
+ entryComponents: [TabComponent]
})
export class TabsModule {}