/
dynamic.ts
71 lines (56 loc) · 1.53 KB
/
dynamic.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
import {Component} from "@angular/core";
@Component({
selector: 'navigation',
template: `
<p>NavigationComponent</p>
`,
})
export class NavigationComponent {
}
@Component({
selector: 'execute-list',
template: `
<p>ExecuteListComponent</p>
`,
})
export class ExecuteListComponent {
}
@Component({
selector: 'my-app',
template: `
<h1>Angular version 4</h1>
<pre>{{appLayouts | json}} <br></pre>
<div *ngFor="let layout of appLayouts" [attr.class]="layout.className">
<div *ngFor="let subLayout of layout.subLayout">
<div *ngIf="subLayout.component">
<ng-container *ngComponentOutlet="getClass(subLayout.type)"></ng-container>
</div>
<div *ngIf="!subLayout.component" [attr.class]="subLayout.className">
</div>
</div>
</div>
`,
})
export class App {
private components = [
NavigationComponent
];
public appLayouts = [{
className: "row page-wrap",
subLayout: [
{component: true, type: "NavigationComponent"},
{component: false, className: "container clearfix display-table", subLayout: [
]}
]
}];
public getClass(className){
let instance: any = null;
this.components.filter(component => {
if (component.name === className) {
instance = component;
return true;
}
});
return instance;
}
}