![]() We at meshcloud provide a solution to manage cloud access, users and projects across cloud platforms. Of course, you’re free to use it if you want, but there are probably more feature complete ones out there already available for you.In this blog post you’ll learn why you’d want and how to implement a lazy tab navigation system in Angular. All this information helps the compiler to better reason about the application structure and thus to provide static analysis for better dev support, security and ultimately better performance.Īlthough this example is fully working, it was created for an academic purpose if you want, to learn more about dynamic components, view containers and how to pass around templates rather than to create a feature blown production read tab component. Also, by having a view container, the compiler “knows” where your components will get placed. As you might have spotted, we used a well defined class, like the TabComponent, to get a dedicated factory for creating such components. The main reasoning behind is to get static analysis by the Angular compiler. But it’s for a good purpose and once you played around with it, it isn’t that difficult after all. We talked about component factories, view containers and passing template references around. Angular takes a more verbose approach as you have seen here. ![]() It’s not as easy as in AngularJS (version 1.x) where you could simply render in a DOM string containing a bunch of directives/components and they would automagically load up. Dynamic components in Angular initially seem like a mystery to many people. import Īlso take a look at the official docs for ViewContainerRef: The running exampleĬheck out the full example in this Plunker here: Conclusion - Wrapping up Luckily enough, there’s a way to do so.įirst of all we need to define the variable on our template using the let-person="person" syntax: As such, each template needs to get its own specific data. Note, we have a tab open editing the person “Juri” while at the same time creating a new person record. But that wouldn’t allow us to edit multiple people simultaneously, such as: Editing in multiple tabs at the same time Think about it, this is really powerful.īut what about our input binding ="person"? We could simply create a member variable person inside our AppComponent and assign it whenever we click on some person to edit. Templates can directly bind to the component where they are defined, although they may end up being rendered inside another component, just as in our case inside the TabComponent. We can directly hook it to the AppComponent code where our is defined and just implement the event as we normally would. Let’s first look at the simpler outbound one. The component takes an input binding and has an outbound event (savePerson). Note: this is not scope of this article, but feel free to check out its implementation in the linked Plunker The person-edit component Inside the template the component takes care of editing our person record by creating a proper form with bindings, events etc. To define the so-called template of our dynamic tab we want to display, Angular gives us the tag. We do this in the view of our AppComponent where we also have our component. First, we need to be able to define the content of our dynamic tabs. So how does the API of our dynamic tabs look like. Have fun! Desired API for our dynamic tabs Impatient? Jump to the end of the article for a running example of what we are building step by step in this article. Our setup: editing a person from the list in a dedicated tab TL DR - Gimme a running code example! ![]() Whenever we click the “Add new person” or “edit” button beneath an existing record, we want the editing to take place in a separate tab pages that gets added dynamically. ![]() Assume for example that we have a first statically defined tab which contains a list of people. We now want to extend this API in such a way that allows us to dynamically open new tab pages based on the user interaction. As you can see, it is already possible to define tabs in a static manner, by using the my-tab component placed inside the.
0 Comments
Leave a Reply. |