Angular2 (click) load dynamically the component view

Question

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'

    },


];

Aravind · Accepted Answer · 2017-03-18 23:02:56Z

7

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
    }];

LIVE DEMO

edited Mar 18, 2017 at 23:02

answered Mar 18, 2017 at 22:25

Aravind

41.7k16 gold badges97 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

18 Comments

Chris Angular Over a year ago

You are passing an event and than reading the innehr HTML, but I would like to instead of passing Event is to insert from an array data and pass that to the function. The button inner HTMl will be total different. So I can use your example. Also doing with the if statements as you have in the end I will end up with 1000 if statements. :(

Aravind Over a year ago

update the above comment by looking for spell check and meaningful sentence.

Chris Angular Over a year ago

Comment updated, but did u see my plunker with an array? plnkr.co/edit/HRKGhCCEfkOhNjXbr6C5?p=preview

Aravind Over a year ago

you should be using a property in the json array to point to specific component data. will update the plunker in a minute and tell

Chris Angular Over a year ago

Hurray, you done it! Amazing. So you pass the item inside the click function, and than using _.find to link it to myComponents...

|

Collectives™ on Stack Overflow

Angular2 (click) load dynamically the component view

1 Answer 1

18 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

18 Comments

Your Answer

Sign up or log in

Post as a guest

Related