Angular2 (click) load dynamically the component view
Use the below code,
@Component({
selector: 'my-app',
template: `
<div>
<h2>Lets dynamically create some components!</h2>
<button (click)="createComponent($event)">Create Hello World</button>
<button (click)="createComponent($event)">Create World Hello</button>
<dynamic-component [componentData]="componentData"></dynamic-component>
</div>
`,
})
And the component method will have the following code
createComponent(val){
if(val.srcElement.innerHTML==='Create Hello World')
{
this.createHelloWorldComponent()
}
if(val.srcElement.innerHTML==='Create World Hello'){
this.createWorldHelloComponent()
}
}
LIVE DEMO updated your plunker.
Update 1: When you are not ready to handle them in the if conditions you should have a mapping property to return the componentData based on the clicked item.
var myComponents =[{
id : 1,
component: HelloWorldComponent,
inputs: { showNum: 9 }
},{
id : 2,
component: WorldHelloComponent,
inputs: { showNum: 0 }
}];
var myMenu = [{
id: 1,
viewname: 'HelloWorldComponent',
componentID : 1
},
{
id: 2,
viewname: 'WorldHelloComponent',
componentID : 2
}];
Chris Angular
Updated on June 09, 2022Comments
-
Chris Angular about 2 years
I've created on click to load a dynamically a component view, but I have each click as separate. I would like to have function, that I pass via the function a string than input that string in my function to load the view.
Here is a working plunker http://plnkr.co/edit/ZXsIWykqKZi5r75VMtw2?p=preview
Component
@Component({ selector: 'my-app', template: ` <div> <h2>Lets dynamically create some components!</h2> <button (click)="createHelloWorldComponent()">Create Hello World</button> <button (click)="createWorldHelloComponent()">Create World Hello</button> <dynamic-component [componentData]="componentData"></dynamic-component> </div> `, }) export class App { componentData = null; createHelloWorldComponent(){ this.componentData = { component: HelloWorldComponent, inputs: { showNum: 9 } }; } createWorldHelloComponent(){ this.componentData = { component: WorldHelloComponent, inputs: { showNum: 2 } }; } }
What would like to have is one function, and from the array define a variable that is passed in the (click) and that load the view. Here is a trying plunker: http://plnkr.co/edit/HRKGhCCEfkOhNjXbr6C5?p=preview
@Component({ selector: 'my-app', template: ` <div> <h2>Lets dynamically create some components!</h2> <li *ngFor="let item of myMenu"> <button (click)="loadView({{ item.viewname }})">{{ item.id }}</button> </li> <dynamic-component [componentData]="componentData"></dynamic-component> </div> `, }) export class App { componentData = null; myMenu = {}; constructor() { this.myMenu = myMenu; } loadView(viewName){ this.componentData = { component: viewName, inputs: { showNum: 9 } }; } } const myMenu = [ { id: 1, viewname: 'HelloWorldComponent' }, { id: 2, viewname: 'WorldHelloComponent' }, ];