Finding the the current route or URL in Angular is one of the common requirements in an App. There are many ways by which you can get a current Route or URL in Angular. You can use the router service, location service or window object to get the path. You can also listen to changes to URL using the router event or URL change event of the location service.
The Angular Router raises events when it navigates from one route to another route. It raises several events such as NavigationStart, NavigationEnd, NavigationCancel, NavigationError, ResolveStart, etc. You can listen to these events and find out when the state of the route changes. Some of the useful events are route change start ( NavigationStart ) and route change end ( NavigationEnd). In this tutorial, we learn what is router events are and how to listen to them using Example code.
The RouterLinkActive is a directive for adding or removing classes from an HTML element that is bound to a RouterLink. Using this directive, we can toggle CSS classes for active RouterLinks based on the current RouterState. The main use case of this directive is to show the user which route they are currently on. You can either make the font bold or apply some background color.
The Angular can pass data to Route in several ways. You can use Pass data using route parameter, using the Optional or query parameter or by using the fragments. The Angular also provides the option to pass both static & dynamic data to the route. In this tutorial, let us explore it in more detail
Lazy loading is the technique where angular loads the Modules only on a need basis rather than all at once. It is also called on-demand loading. By default, Angular Loads the modules eagerly. Lazy Loading of Angular Modules reduces the initial load time of the app. We use the loadChilden method of the Angular Router to lazy load them when the user navigates to a route. In this article, we will show you how to implement lazy loading
