I have two list of arrays.
- menu : That is the list of menu items. In the list I also say what component I should load from component list.
- myComponents : List of all components.
const menu = [
{id: 1, name: 'One',children:[2,3,4, 5], menucomponent: 'componentID: 1'},
{id: 2, name: 'Two', componentID : 2, menucomponent: 'componentID: 2'},
{id: 3, name: 'Three', componentID : 3, menucomponent: 'componentID: 3'},
{id: 4, name: 'Four', componentID : 4, menucomponent: 'componentID: 4'},
{id: 5, name: 'Five', componentID : 5, menucomponent: 'componentID: 5'},
{id: 6, name: 'Six', children:[3,4], menucomponent: 'componentID: 6'}
];
const myComponents =[
{id : 1,component: OneComponent},
{id : 2,component: OneComponent},
{id : 3},
{id : 4},
{id : 5}
];
I've mananged to dynamically load content in the big component box via defining in array. I have commented out in the HTML
<dynamic-component [componentData]="componentData"></dynamic-component>
This works when you enable the src/dynamic.component.ts component. I was not able to understand how to configure in plunker to load: lodash library and than why I had to uncomment src/dynamic.component.ts.
I can't seem to figure out how to load / define two components. Or maybe there is a smarter way of doing this than defining each component separately for each menu item?
I have a list of menu items, and when the user clicks on a menu item , I would like to load a specific component that has all the specific functionality, but some of the function I would like to show next the menu item and the rest in the big component below.
For example, when I click on a menu item, next to it I will show additional menu items or an input field, and than below I will show additional settings that are linked to the input field above.
Please let me know if there are any question, I have created a plunker: https://plnkr.co/edit/Is1dcGbOYb0y8XpVyMFJ?p=preview
In the image 1 menu item is active:
