On Friday, October 20, 2017 at 6:06:31 PM UTC+2, Gaurav Verma wrote: > > Thank you Zlatko for your response. You said @Input() layout = > 'horizontal' will allow me to configure the NavBar layout but how can I > dynamically set the layout? >
This particular problem is sSimple to solve: *@Input() layout: string = 'horizontal'* on a component just sets the *default* layout. If you later have a service which loads your configuration from JSON or whatever storage, it can later set this layout to 'vertical', for example. Now, some components may not be flexible enough to adjust on the fly - you simply do not instantiate those components into view until you have the proper > > I am trying to drive the components by json configuration. I will give > another example here - > [cut] Yes, all perfectly doable within a regular Angular app. Remember, you can load the component right away or lazily, and once loaded, you can instantiate it (and provide configuration) right away or modify this configuration dynamically. It's very flexible, and you're the actual designer of your component's API, so you decide (and, well, implement) all of this. > > > The questions still remain unsolved - > > > - How can I get Module "A" to know about the NavBarMenuItem components > defined in module "B" so that it can create the component instances and add > them to the NavBar component dynamically? > It's a bit vague question, so the answer is the classic of "it depends". You can provide some sort of a child module to your Module A so it knows what components it will get. You can create a module dynamically with the components you want at that instance, and then inject those. You could even (a bit less optimal) create a component itself dynamically and then pass that component to your original module so it can inject it into place or places it needs. > > - How can I instantiate a component from its class name as the > components are created on fly from the configuration fetched from the store? > You'd generally use componentFactory to create components on the fly. Look into, e.g. ComponentFactoryResolver. > > - When module “B” is dependent on module “A” then module A cannot be > statically depend on module B due to circular dependency problem, without > using reflection and runtime composition provided by MEF container how can > we solve this? > You don't have to depend on B, you use an injector the component factory and create factory on the fly and add it to your component, or say, inject to a child. Here's a plunkr demonstrating some of this: https://plnkr.co/edit/Zjne3btR82WWtokKEgHm?p=preview. It took a bit to make it all work but it basically does what you want: there's a GridCmp will take DefaultItems to construct the grid, but it will also take and insert components dynamically. And you can choose do do only one of these - so dynamic or one-off. And the components were loaded from another module. You could possibly load even that other module dynamically with NgModuleFactoryLoader. Or you could create your components right there on the fly. You could inject all those in other places, too, all over your grid-cmp template. As for the GridComponent itself, you can also make a wrapper component there and export it in a module, and this wrapper component basically takes config instead the current one, and then creates a module dynamically, and injects the whole, ready, module. So, take a look at that and see if that answers any of your questions, and if you have more, we're here. Basically, it depends on what exactly you're building. A simple nav-bar would look similar to what I have made there, and something more complex like tabular page layout with different navbars, toolbars and work areas for every page will be more complex. So you need to take it from here and see what else you can make. -- You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at https://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
