Anil Singh | Code-sample.com

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 Router link? The Router-link is a directive and it used to link a specific part of your applications. @ Directive ({  selector:   ':not(a)[routerLink]'  }) Let explain the route configuration using the - {  path:   'user/:id' ,  component:   UserDetailComponent I the above rote configuration, when linking to this user/:id route, you use the RouterLink directive. If the link is static, you can use the directive as follows. < a   routerLink = "/user/id" >  See the User detail </ a > If you using dynamic values to generate the router link that you can pass an array of path segments. You can specify a route parameter like this. < a  [ routerLink ]= "['/user', user.id]" >    < span   class = "text-align" > {{ user.id }} </ span > {{ user.name }} </ a > You can set query params and fragment as follows. < a  [ routerLink ]= "['/user/id']...

What Is Router outlet? The Router-Link, RouterLink-Active and t he Router outlet is directive provided by the Angular RouterModule package. It’s provides the navigation and URLs manipulation capabilities. It also renders the components for specific location of your applications. Both the template and templateUrl render the components where you use this directive. < router-outlet >   </ router-outlet > For more detail kindly refer the link - https://www.code-sample.com/2018/05/angular-5-6-7-routing-and-navigation.html

What Is Router imports? It is an optional service that presents a special component view for a given URL. It has own library package- @angular/router and It is not a part of an Angular core. The Angular package looks like this. import  { Routes ,  RouterModule ,}    from   '@angular/router' ; And    //Composability and Grouping    //imports used for composing modules together.    imports:  [      BrowserModule ,      //enableTracing enables debugging purposes only      //useHash enables the location strategy that uses the URL fragment instead of the history API.      RouterModule . forRoot ( appRoots , {  enableTracing:   true ,  useHash: true  })    ], For more detail kindly refer the link - https://www.code-sample.com/2018/05/angular-5-6-7-routing-and-navigation.html

What Is HashLocationStrategy? To enable HashLocationStrategy in an Angular app you pass {useHash: true} when you providing routes with router module and it like this.    //Composability and Grouping    //imports used for composing modules together.    imports:  [      BrowserModule ,      //enableTracing enables debugging purposes only      //useHash enables the location strategy that uses the URL fragment instead of the history API.      RouterModule . forRoot ( appRoots , {  enableTracing:   true ,  useHash: true  })    ], The HashLocationStrategy add the route path to the hash (#) in the browser’s URL. The hash (#) part of the URL is called the hash fragment. When using HashLocationStrategy for routing and providing a base Href, it always placed after the hash (#) e.g. http://localhost:8080/#/UserDetail/1...