Basically I have so many components which are being loaded on the page load in different tabs as I have used their selectors at design time.
I want to load those components on demand (on Click of tabs).
Here is the selector of a component which I want to load dynamically. But it is loading the html as it is and not loading the component.
My code for loading a component is as below:
ngOnInit()
{
$('#context1 .menu .items')
.tab({
cache: true,
// faking API request
apiSettings: {
loadingDuration : 300,
mockResponse : function(settings) {
var response = {
first : ' <div class="Context1">
<div class="title">
<div class="gap" style="height: 20%"></div>
<label style="margin-left: 10px"> Charges</label>
<div class="ui right floated tiny icon buttons primary" >
<button class="tiny ui button">Create New Charges</button>
</div>
</div>
<div class="content">
<app-chargeslistview></app-chargeslistview>
</div>
</div>',
second : 'AJAX Tab Two',
third : 'AJAX Tab Three'
};
return response[settings.urlData.tab];
}
},
context : 'parent',
auto : true,
path : '/'
});
}
Please help!!
It is loading the html and not the component because Angular sanitizes DOM input like that.
What you'll need to do is use something like componentFactoryResolver to load an instance of a component dynamically. The Angular site has an article demonstrating something like this. There are several other implementations of loading components dynamically, here are a few links on the subject:
https://www.npmjs.com/package/angular2-dynamic-component
http://blog.rangle.io/dynamically-creating-components-with-angular-2/
https://blog.lacolaco.net/post/dynamic-component-creation-in-angular-2/
The Angular runtime needs to be able to inject an instance of a component where the selector is, and just inserting HTML on a page at runtime bypasses the Angular runtime to handle that component. If you could just insert stuff into the DOM and it run, then that would be a security vulnerability.
Hope this points you in the right direction.
EDIT
To do lazy loading routing with Semantic UI tab (I haven't tested this code, but it should be close) you should be able to do something like this:
//TEMPLATE
<div class="ui top attached tabular menu">
<a class="item" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}" [routerLink]="['/myFirstRoute']">First</a>
<a class="item" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}" [routerLink]="['/mySecondRoute']">Second</a>
<a class="item" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}" [routerLink]="['/myThirdRoute']">Third</a>
</div>
<div class="ui bottom attached tab segment" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">
<router-oulet></router-oulet>
</div>
The routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}" evaluates the current route and adds the class active if the current route matches the routerlink.
Your routes could be lazy loaded, and if so, would look something like this:
//ROUTER
export const ROUTES: Routes = [
{
path: 'myFirstRoute',
loadChildren: './routeOne/routeOne.module#RouteOneModule'
},
{
path: 'mySecondRoute',
loadChildren: './routeTwo/routeTwo.module#RouteTwoModule'
},
{
path: 'myThirdRoute',
loadChildren: './routeThree/routeThree.module#RouteThreeModule'
}
];
The lazy loading would would make those modules be bundled separately in chunks, which would not be called from the server until the route is activated. Then the chunk would be retrieved and loaded.
Hope that gets your pointed in the right direction.