![]() ![]() * Select initial tab and navigate to child route. Private readonly routerOutletNavService: RouterOutletNavService Private readonly activatedRoute: ActivatedRoute, StyleUrls: Įxport class RouterOutletNavComponent implements OnInit, OnDestroy readonly styleClass: RouterOutletNavStyleClass = 'nav-child' Now let's combine the RouterOutletNavComponent, RouterOutletNavTab and RouterOutletNavService. ![]() We call the service RouterOutletNavService. This approach should be followed every time □ With a clear separation we’ll also increase the testability of the functionalities. The component should only handle the user experience. This is a best practice to increase modularity and reusability. We’ve implemented a service that exposes the functionality. Sure, we didn’t implement the tab creation and tab selection logic within the component. We call the tab interface RouterOutletNavTab. But this is not relevant for the general implementation. For example to show/hide a tab depending on a specific condition and to attach a badge with countable information. Our interface declares additional properties. We call the component RouterOutletNavComponent.īesides that we’ve defined an interface which describes each tab: This includes the tab creation based on the router config and tab selection based on the activated route. We need a shared component which covers all criteria of the tab navigation system. Now we’ll take a look at the technical realization and how we’ve implemented this approach. We’ve got an overview about the lazy tab navigation system from the conceptual perspective. What is necessary to implement the lazy tab navigation system? In conjunction with the lazy loading feature, we are able to load the content of the respective tab in a dedicated manner. It is kind of a container which defines the available routes and manages the tabs. The tab navigation system takes the role of describing the context. If we now combine the tab navigation system approach with the lazy loading feature we’ll get a really flexible and scalable pattern. From the performance and UX perspective this is not a good approach. This would mean that we load every section content up front. And we want to allow multiple sub-sections. Eager loading is for a tab navigation system not an option because we’ve a lot of different sections. This increases the bundle size and for large applications it is not a best practice due to the load time. ![]() With eager loading all NgModules are loaded when accessing the web application. For comparison, there is the option to load NgModules eagerly. It is a design pattern that loads NgModules as needed. Lazy loading is a central Angular feature. In general we’ll determine the tab state based on the activated route. This enables us to reference specific tab sections within other views. Besides that we have the possibility to create deep links to specific tab sections. This means we can automatically prevent the creation of multiple tabs which correspond to the same section. This makes total sense because the routes are uniquely identifiable. We’ve decided to handle the tab creation based on the route config. The tab navigation system is a central component which coordinates the tab creation and holds the tab state. But first to the general tab navigation system. This will enable us to implement scalable views with a lot of clearly separated sections. We came up with a lazy tab navigation system is what we need which covers all mentioned challenges.Īs the name suggests, the idea is a tab navigation system in which the content is loaded lazy. We’ve invested a lot of time to find a proper solution. But what makes the difference to support user friendly behavior? It is really easy to say that the improvement of the user experience is the key. It is important to navigate between the sections without lagging or freezing. Therefore we’ve improved user experience in our Angular SPA (Single Page Application) and decreased the necessary interactions for specific management workflows. Besides that we want to decrease the effort of management workflows to a minimum because cloud management is a complex topic with a lot of items to manage. One of our main goals is to make the interaction with the cloud as easy as possible. We at meshcloud provide a solution to manage cloud access, users and projects across cloud platforms. In this blog post you’ll learn why you’d want and how to implement a lazy tab navigation system in Angular. If you use the url, the method will be invoked after we skip to the prefil.xhtml page. If you want to do this.You can't use the url in the p:menuitem because we must call a method to changing the tabindex before skipping to the prefil.xhtml page. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |