Skip to main content

Posts

Showing posts with the label Angular Router Works

What Is RouterState in Routers?

What Is RouterState? RouterState is interface and it represents the state of the router. It looks like this. interface   RouterState   extends   Tree  {    snapshot :  RouterStateSnapshot    toString ():  string } It is also a tree of activated routes. We can access the current RouterState from anywhere in the Angular app using the Router service and the routerState property. For more detail kindly refer the link - https://www.code-sample.com/2018/05/angular-5-6-7-routing-and-navigation.html

What Is RouterLinkActive in Angular?

What Is RouterLinkActive? The RouterLinkActive is a directive. To add the active CSS class to the element when the associated RouterLink becomes active (visually look like selected anchors). It is also works for both parent and child elements. @ Directive ({    selector:   '[routerLinkActive]' ,    exportAs:   'routerLinkActive' }) Consider the following example for active a link – < a   routerLink = "/user/detail"   routerLinkActive = "active-link" > User Detail </ a > You can also set more than one class and it look like this. < a   routerLink = "/user/detail"   routerLinkActive = "active-class1 active-class2" > User detail </ a > < a   routerLink = "/user/detail"  [ routerLinkActive ]= "['active-class1', 'active-class2']" > User detail </ a > For more detail kindly refer the link - https://www.code-sample.com/2018/05/angula...

Is it possible to have a multiple router-outlet in the same template?

Is it possible to have a multiple router-outlet in the same template? Yes, why not! We can use multiple router-outlets in the same template by configuring our routers and simply adds the router-outlet name. < div   class = "row" >    < div   class = "user" >      < router-outlet   name = "users" ></ router-outlet >    </ div >    < div   class = "detail" >      < router-outlet   name = "userDetail" ></ router-outlet >    </ div > </ div > And setups your route config and it looks like this. //Apps roots const   appRoots  = [    {  path:   '' ,  redirectTo:   '/dashboard' ,  pathMatch:   'full'  },    {  path:   'userDetail' ,  component:   UserDetailComponent  },  //Id is a Roots parameter. ...