I need a help . How to render from typescript
looking for help using @angular/core.
import { Component } from '@angular/core';
@Component({
selector: 'childcomp',
template:
<div>{{html}}</div>
})
export class ChildComponent
{
html:string =
"
}
@Component({
selector: 'anotherchildcomp',
template:
<h1>Another Child Component</h1>
})
export class AnotherChildComponent
{
@Input attribID: string ;
}
Go throug the example
<html>
<head>
<title>Angular 2 Nested Components</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
Injecting child components
const {Component} = ng.core;
const {bootstrap} = ng.platform.browser;
@Component({
selector: 'child-component',
styles : [`
.child {
background : #aaa;
padding: 10px;
overflow:auto;
}
.book{
background : #0a0;
padding:20px;
margin:10px;
width:300px;
float:left;
}
`],
template: `
<div class="child">
<h2>Books :</h2>
<div class="book" *ngFor="#book of books">
<h4> Title : {{book.title}} </h4> <h4>Price: {{book.price}}</h4>
</div>
</div>
`
})
class ChildComponent {
books = [
{
title : 'Love Story',
price : 'Rs. 1400'
},
{
title : 'Two States',
price : 'Rs. 1700'
},
{
title : 'Computer fundamentals',
price : 'Rs. 1000'
}
]
}
@Component({
selector: 'my-app',
styles : [`
.parent {
background : #c7c7c7;
padding: 20px;
}
`],
template: `
<div class="parent">
<h1>Author : {{name}}</h1>
<child-component></child-component>
</div>
`,
directives : [ChildComponent]
})
class AppComponent {
name = "John Doe"
}
bootstrap(AppComponent, []);
https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html
Can you look in to this link.
