<!DOCTYPE html>
<html>
<head>
<base href="." />
<title>angular playground</title>
<link rel="stylesheet" href="style.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, OnInit, ViewChild, ViewContainerRef } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser';
import { Service } from './service';
//custom components
import { ContactDetails } from './contactDetails.component';
import { PersonalDetails } from './personalDetails.component';
@Component({
selector: 'my-app',
templateUrl:'./src/app.html',
styleUrls:['./src/app.css']
})
export class App implements OnInit {
name = 'from Angular'
@ViewChild('dynamic', { read: ViewContainerRef }) viewContainerRef: ViewContainerRef
//constructor(service: Service, viewContainerRef: ViewContainerRef) {
constructor(service: Service) {
this.service = service
}
private tempSmartComponents = [
{
"Component": PersonalDetails,
// "inputs": [
// {
// }
// ],
},
{
"Component": ContactDetails,
}
]
ngOnInit() {
this.service.setRootViewContainerRef(this.viewContainerRef);
//this.service.addDynamicComponent()
this.tempSmartComponents.map(component => {
this.service.addDynamicComponent(component.Component);
})
}
}
@NgModule({
imports: [ BrowserModule ],
declarations: [
App,
ContactDetails,
PersonalDetails
],
providers: [ Service ],
entryComponents: [ ContactDetails, PersonalDetails ],
bootstrap: [ App ]
})
export class AppModule {}
import {
ComponentFactoryResolver,
Injectable,
Inject,
ReflectiveInjector
} from '@angular/core';
import { ContactDetails } from './contactDetails.component';
import { PersonalDetails } from './personalDetails.component';
@Injectable()
export class Service {
constructor(private factoryResolver: ComponentFactoryResolver) { }
public setRootViewContainerRef(viewContainerRef) {
this.rootViewContainer = viewContainerRef
}
// public addDynamicComponent() {
// const factory = this.factoryResolver.resolveComponentFactory(ContactDetails);
// const component = factory.create(this.rootViewContainer.parentInjector);
// const factory2 = this.factoryResolver.resolveComponentFactory(PersonalDetails);
// const component2 = factory2.create(this.rootViewContainer.parentInjector);
// this.rootViewContainer.insert(component.hostView)
// this.rootViewContainer.insert(component2.hostView)
// var obj = {name:'yovin'}
// component.instance.testTiltle = obj;
// }
public addDynamicComponent(componentRef) {
const factory = this.factoryResolver.resolveComponentFactory(componentRef);
const component = factory.create(this.rootViewContainer.parentInjector);
this.rootViewContainer.insert(component.hostView);
//if (componentRef === ContactDetailsComponent) {
//assign values
var obj = { name: 'Sample name' };
component.instance['defaultData'] = obj;
//}
}
}
import { Component, Input } from '@angular/core'
@Component({
selector: 'contact-details',
templateUrl:'./src/contactDetails.component.html',
styleUrls:['./src/contactDetails.component.css']
})
export class ContactDetails {
@Input testTiltle : any;
}
import { Component, Input } from '@angular/core'
@Component({
selector: 'personal-details',
templateUrl:'./src/personalDetails.component.html',
styleUrls:['./src/personalDetails.component.css']
})
export class PersonalDetails {
}
<fieldset>
<legend><span class="number">2</span>Your profile</legend>
<label for="bio">Biography:</label>
<textarea id="bio" name="user_bio">{{defaultData.name}}</textarea>
</fieldset>
<fieldset>
<label for="job">Job Role:</label>
<select id="job" name="user_job">
<optgroup label="Web">
<option value="frontend_developer">Front-End Developer</option>
<option value="php_developor">PHP Developer</option>
<option value="python_developer">Python Developer</option>
<option value="rails_developer"> Rails Developer</option>
<option value="web_designer">Web Designer</option>
<option value="WordPress_developer">WordPress Developer</option>
</optgroup>
<optgroup label="Mobile">
<option value="Android_developer">Androild Developer</option>
<option value="iOS_developer">iOS Developer</option>
<option value="mobile_designer">Mobile Designer</option>
</optgroup>
<optgroup label="Business">
<option value="business_owner">Business Owner</option>
<option value="freelancer">Freelancer</option>
</optgroup>
<optgroup label="Other">
<option value="secretary">Secretary</option>
<option value="maintenance">Maintenance</option>
</optgroup>
</select>
<label>Interests:</label>
<input type="checkbox" id="development" value="interest_development" name="user_interest"><label class="light" for="development">Development</label><br>
<input type="checkbox" id="design" value="interest_design" name="user_interest"><label class="light" for="design">Design</label><br>
<input type="checkbox" id="business" value="interest_business" name="user_interest"><label class="light" for="business">Business</label>
</fieldset>
<!-- <div class="section"><span>1</span>First Name & Address</div> <br>
<div class="inner-wrap">
<label>Your Full Name <input type="text" name="field1" /></label> <br>
<label>Address <textarea name="field2"></textarea></label><br>
</div><br> -->
<fieldset>
<legend>
<span class="number">1</span>Your basic info</legend>
{{defaultData.name}}
<label for="name">Name:</label>
<input type="text" id="name" name="user_name">
<label for="mail">Email:</label>
<input type="email" id="mail" name="user_email">
<label for="password">Password:</label>
<input type="password" id="password" name="user_password">
<label>Age:</label>
<input type="radio" id="under_13" value="under_13" name="user_age">
<label for="under_13" class="light">Under 13</label>
<br>
<input type="radio" id="over_13" value="over_13" name="user_age">
<label for="over_13" class="light">13 or older</label>
</fieldset>
<!--The content below is only a placeholder and can be replaced.-->
<div class="form-style-10">
<h1>Sign Up Now!<span>Sign up and tell us what you think of the site!</span></h1>
<form>
<ng-template #dynamic></ng-template>
</form>
</div>
.form-style-10{
width:450px;
padding:30px;
margin:40px auto;
background: #FFF;
border-radius: 10px;
-webkit-border-radius:10px;
-moz-border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
}
.form-style-10 .inner-wrap{
padding: 30px;
background: #F8F8F8;
border-radius: 6px;
margin-bottom: 15px;
}
.form-style-10 h1{
background: #2A88AD;
padding: 20px 30px 15px 30px;
margin: -30px -30px 30px -30px;
border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
color: #fff;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
font: normal 30px 'Bitter', serif;
-moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
-webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
border: 1px solid #257C9E;
}
.form-style-10 h1 > span{
display: block;
margin-top: 2px;
font: 13px Arial, Helvetica, sans-serif;
}
.form-style-10 label{
display: block;
font: 13px Arial, Helvetica, sans-serif;
color: #888;
margin-bottom: 15px;
}
.form-style-10 input[type="text"],
.form-style-10 input[type="date"],
.form-style-10 input[type="datetime"],
.form-style-10 input[type="email"],
.form-style-10 input[type="number"],
.form-style-10 input[type="search"],
.form-style-10 input[type="time"],
.form-style-10 input[type="url"],
.form-style-10 input[type="password"],
.form-style-10 textarea,
.form-style-10 select {
display: block;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width: 100%;
padding: 8px;
border-radius: 6px;
-webkit-border-radius:6px;
-moz-border-radius:6px;
border: 2px solid #fff;
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
}
.form-style-10 .section{
font: normal 20px 'Bitter', serif;
color: #2A88AD;
margin-bottom: 5px;
}
.form-style-10 .section span {
background: #2A88AD;
padding: 5px 10px 5px 10px;
position: absolute;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border: 4px solid #fff;
font-size: 14px;
margin-left: -45px;
color: #fff;
margin-top: -3px;
}
.form-style-10 input[type="button"],
.form-style-10 input[type="submit"]{
background: #2A88AD;
padding: 8px 20px 8px 20px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
color: #fff;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
font: normal 30px 'Bitter', serif;
-moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
-webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
border: 1px solid #257C9E;
font-size: 15px;
}
.form-style-10 input[type="button"]:hover,
.form-style-10 input[type="submit"]:hover{
background: #2A6881;
-moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
-webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
}
.form-style-10 .privacy-policy{
float: right;
width: 250px;
font: 12px Arial, Helvetica, sans-serif;
color: #4D4D4D;
margin-top: 10px;
text-align: right;
}
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Nunito', sans-serif;
color: #384047;
}
form {
max-width: 300px;
margin: 10px auto;
padding: 10px 20px;
background: #f4f7f8;
border-radius: 8px;
}
h1 {
margin: 0 0 30px 0;
text-align: center;
}
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea,
select {
background: rgba(255,255,255,0.1);
border: none;
font-size: 16px;
height: auto;
margin: 0;
outline: 0;
padding: 15px;
width: 100%;
background-color: #e8eeef;
color: #8a97a0;
box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
margin-bottom: 30px;
}
input[type="radio"],
input[type="checkbox"] {
margin: 0 4px 8px 0;
}
select {
padding: 6px;
height: 32px;
border-radius: 2px;
}
button {
padding: 19px 39px 18px 39px;
color: #FFF;
background-color: #4bc970;
font-size: 18px;
text-align: center;
font-style: normal;
border-radius: 5px;
width: 100%;
border: 1px solid #3ac162;
border-width: 1px 1px 3px;
box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset;
margin-bottom: 10px;
}
fieldset {
margin-bottom: 30px;
border: none;
}
legend {
font-size: 1.4em;
margin-bottom: 10px;
}
label {
display: block;
margin-bottom: 8px;
}
label.light {
font-weight: 300;
display: inline;
}
.number {
background-color: #5fcf80;
color: #fff;
height: 30px;
width: 30px;
display: inline-block;
font-size: 0.8em;
margin-right: 4px;
line-height: 30px;
text-align: center;
text-shadow: 0 1px 0 rgba(255,255,255,0.2);
border-radius: 100%;
}
@media screen and (min-width: 480px) {
form {
max-width: 480px;
}
}
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Nunito', sans-serif;
color: #384047;
}
form {
max-width: 300px;
margin: 10px auto;
padding: 10px 20px;
background: #f4f7f8;
border-radius: 8px;
}
h1 {
margin: 0 0 30px 0;
text-align: center;
}
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea,
select {
background: rgba(255,255,255,0.1);
border: none;
font-size: 16px;
height: auto;
margin: 0;
outline: 0;
padding: 15px;
width: 100%;
background-color: #e8eeef;
color: #8a97a0;
box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
margin-bottom: 30px;
}
input[type="radio"],
input[type="checkbox"] {
margin: 0 4px 8px 0;
}
select {
padding: 6px;
height: 32px;
border-radius: 2px;
}
button {
padding: 19px 39px 18px 39px;
color: #FFF;
background-color: #4bc970;
font-size: 18px;
text-align: center;
font-style: normal;
border-radius: 5px;
width: 100%;
border: 1px solid #3ac162;
border-width: 1px 1px 3px;
box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset;
margin-bottom: 10px;
}
fieldset {
margin-bottom: 30px;
border: none;
}
legend {
font-size: 1.4em;
margin-bottom: 10px;
}
label {
display: block;
margin-bottom: 8px;
}
label.light {
font-weight: 300;
display: inline;
}
.number {
background-color: #5fcf80;
color: #fff;
height: 30px;
width: 30px;
display: inline-block;
font-size: 0.8em;
margin-right: 4px;
line-height: 30px;
text-align: center;
text-shadow: 0 1px 0 rgba(255,255,255,0.2);
border-radius: 100%;
}
@media screen and (min-width: 480px) {
form {
max-width: 480px;
}
}