<!DOCTYPE html>
<html>
<head>
<base href="." />
<title>angular playground</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" />
<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js/dist/zone.js"></script>
<script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
<script src="config.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<my-app>
loading...
</my-app>
</body>
</html>
/* Styles go here */
### Angular Starter Plunker - Typescript
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
paths: {
'npm:': 'https://unpkg.com/'
},
//map tells the System loader where to look for things
map: {
'app': './src',
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
'@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
'@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
'@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
'@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
'@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
'@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
'@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
'@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
'@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
'rxjs': 'npm:rxjs',
'typescript': 'npm:typescript@2.2.1/lib/typescript.js'
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
}
}
});
//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';
platformBrowserDynamic().bootstrapModule(AppModule)
//our root app component
import {Component, NgModule, ComponentRef, ViewChild
OnInit, ViewContainerRef, ComponentFactoryResolver} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { Container } from './container'
import { SubContainer } from './sub-container'
import {DropDownTab} from './dropdown-tab'
@Component({
selector: 'my-content',
template: `
<div>
<label for="labNameId">Lab Name</label>
<input id="labNameId" type="text" placeholder="Lab Name" />
</div>
`,
})
export class DynamicComponent {
name="bob"
}
@Component({
selector: 'my-app',
template: `
<div>
<button class="btn btn-danger" (click)="addComponent()">Add component</button>
<div ></div>
<button (click)="clear()">Clear</button>
<button (click)="check()">check size </button>
<span *ngIf="vcLength">{{vcLength}}</span>
</div>
`,
})
export class App implements OnInit {
containerRef: ComponentRef<Container>
vcLength:number
compArray:Array<any> = [DropDownTab]
//@ViewChild(Container) cont: Container
constructor(private vcRef: ViewContainerRef, private resolver: ComponentFactoryResolver) {}
ngOnInit(){
let containerFactory = this.resolver.resolveComponentFactory(Container);
this.containerRef = this.vcRef.createComponent(containerFactory);
for(let i = 0; i < this.compArray.length; i++){
this.containerRef.instance.makeComp(this.compArray[i]);
}
this.containerRef.instance.initContent();
}
addComponent() {
this.containerRef.instance.makeComp(DynamicComponent);
let state = this.containerRef.instance.enabled;
this.containerRef.instance.enabled = !state;
//let factory = this.resolver.resolveComponentFactory(DynamicComponent);
//this.comp = this.vcRef.createComponent(factory);
}
clear() {
this.containerRef.instance.destroyComp();
//this.comp = null;
}
check() {
this.vcLength= this.containerRef.instance.viewContainer.length;
}
}
@NgModule({
imports: [ BrowserModule ],
declarations: [ App, DynamicComponent,Container,SubContainer,DropDownTab ],
entryComponents: [DynamicComponent,Container,SubContainer,DropDownTab],
bootstrap: [ App ]
})
export class AppModule {}
import {Component,ViewChild,ContentChild,ViewContainerRef,ComponentFactoryResolver,
Type,AfterViewInit
} from '@angular/core'
import {DynamicComponent} from './app'
import {DropDownTab} from './dropdown-tab'
import {SubContainer} from './sub-container'
@Component({
selector: 'my-container',
template: `
<p > Hello this demostrates adding dynamic component with ng-content </p>
<ul #container class="tabs-nav">
<li class="tab-item" [ngClass]="{ 'error' : enabled, 'disable-tab':enabled}"
*ngFor="let tab of subList; let i=index" (click)="selectTab(tab)">
<a class="tab-link" >{{tab.title}}</a>
</li>
</ul>
`,
styleUrls: ['src/container.css']
})
export class Container {
name="text";
enabled = true;
subList: Array<SubContainer>=[];
@ViewChild('container', {read: ViewContainerRef}) viewContainer:ViewContainerRef;
constructor(private compFR:ComponentFactoryResolver ){
}
makeComp(component: Type<DynamicComponent>){
let compFactory =this.compFR.resolveComponentFactory(component);
let compRef = this.viewContainer.createComponent(compFactory);
let length =this.viewContainer.length - 1;
console.log(length)
let subFactory = this.compFR.resolveComponentFactory(SubContainer);
let subRef = this.viewContainer.createComponent(subFactory,length,undefined,[[compRef.location.nativeElement]]);
subRef.instance.title = compRef.instance.name;
this.subList.push(subRef.instance);
}
destroyComp(){
this.viewContainer.remove();
this.viewContainer.remove();
this.subList.splice(this.subList.length - 1, 1)
}
initContent() {
// get all active tabs
if (!this.subList) {
return;
}
if (this.subList.length < 1) {
return;
}
let activeTabs = this.subList.filter((tab) => tab.active);
if (activeTabs.length === 0) {
this.selectTab(this.subList[0])
}
}
selectTab(tab: SubContainer){
// deactivate all tabs
this.subList.forEach(tab => tab.active = false);
// activate the tab the user has clicked on.
tab.active = true;
tab.enabled = true;
}
ngAfterViewInit(){
//this.tabRef.title="Tab(Not Dynamically Created)"
//this.subList.push(this.tabRef);
}
}
import {Component,ViewChild,ViewContainerRef,ComponentFactoryResolver,
Type
} from '@angular/core'
import {SubContainer} from './sub-container'
@Component({
selector: 'my-sub',
template: `
<div [hidden]="!active">
<ng-content></ng-content>
</div>
`,
})
export class SubContainer {
title:string;
active:boolean = false;//
}
import {Component,ViewChild,ViewContainerRef,ComponentFactoryResolver,
Type
} from '@angular/core'
@Component({
selector: 'drop-down',
template: `
<div >
<select class="form-control">
<option value="">select duration...</option>
<option value="1">Half Hour</option>
<option value="2">1 Hour</option>
<option value="3">Half Day</option>
<option value="4">Full Day</option>
</select>
</div>
`,
})
export class DropDownTab {
name:string ="DropDown"
active:boolean = true;
}
.tabs-nav {
border-bottom: 1px solid #ddd;
display: flex;
list-style: none;
padding-left: 0px;
margin-bottom: 20px;
}
/*.tabs-nav .tab-item:hover {
background-color: #2E7FF8;
/*border: 1px #2C7FD8;*/
/* border: 1px solid grey;
}*/
.tab-item {
border:.01rem solid #d7dada; -webkit-border-radius: 2rem; -moz-border-radius: 2rem;border-radius: .3rem;font-size:12px;padding: .3rem .3rem .3rem .3rem; text-decoration:none; display:inline-block; color: #000000;
background-color: #f4f5f5; background-image: -webkit-gradient(linear, left top, left bottom, from(#f4f5f5), to(#dfdddd));
background-image: -webkit-linear-gradient(top, #f4f5f5, #dfdddd);
background-image: -moz-linear-gradient(top, #f4f5f5, #dfdddd);
background-image: -ms-linear-gradient(top, #f4f5f5, #dfdddd);
background-image: -o-linear-gradient(top, #f4f5f5, #dfdddd);
background-image: linear-gradient(to bottom, #f4f5f5, #dfdddd);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#f4f5f5, endColorstr=#dfdddd);
}
.tab-item:hover{
border:.01rem solid #bfc4c4;
background-color: #d9dddd; background-image: -webkit-gradient(linear, left top, left bottom, from(#d9dddd), to(#c6c3c3));
background-image: -webkit-linear-gradient(top, #d9dddd, #c6c3c3);
background-image: -moz-linear-gradient(top, #d9dddd, #c6c3c3);
background-image: -ms-linear-gradient(top, #d9dddd, #c6c3c3);
background-image: -o-linear-gradient(top, #d9dddd, #c6c3c3);
background-image: linear-gradient(to bottom, #d9dddd, #c6c3c3);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#d9dddd, endColorstr=#c6c3c3);
cursor: pointer;
}
/*.tab-item {
position: relative;
padding-left: 11px;
padding-right:11px;
background-color: #DCDCDC;
list-style-position:inside;
border-radius: 2px;
border-width:thin;
border-color: #ADACAC;
border-style: solid;
}*/
.tabs-nav .error{
border: thin solid red;
}
.tabs-nav .disable-tab{
/*cursor: not-allowed;*/
}
/*.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
color: #495057;
background-color:#DCDCDC;
border-color: #ddd #ddd #fff;
}*/
ul li a:hover{
/*background-color: #2E7FF8;*/
}
.nav-tabs .tab-link {
border-top-left-radius: .25rem;
border-top-right-radius: .25rem;
}
.nav-tabs .tab-link {
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
border-width: 1px;
border-style: none;
}
.tab-link {
display: block;
padding: .1rem 1rem;
}
/*
.nav-link.disabled {
cursor: not-allowed;
}
.nav-link:hover{
background-color: #DCDCDC;
}*/