Newbe Dev Stack

directive When applied to an element in a template, makes that element a link that initiates navigation to a route. Navigation opens one or more routed components in one or more <router-outlet> locations on the page. See more... Exported from RouterModule Selectors :not(a) :not( area) [ routerLink] Properties Property Description @ Input() queryParams ?: Params | null Passed to Router#createUrlTree as part of the UrlCreationOptions . See also: UrlCreationOptions#queryParams Router#createUrlTree @ Input() fragment ?: string Passed to Router#createUrlTree as part of the UrlCreationOptions . See also: UrlCreationOptions#fragment Router#createUrlTree @ Input() queryParamsHandling ?: QueryParamsHandling | null Passed to Router#createUrlTree as part of the UrlCreationOptions . See also: UrlCreationOptions#queryParamsHandling Router#createUrlTree @ Input() preserveFragment : boolean Passed to Router#create...

Answer : You can do this by using the parent property on the ActivatedRoute - something like this. export class MyComponent implement OnInit { constructor(private activatedRoute: ActivatedRoute) {} ngOnInit() { this.activatedRoute.parent.url.subscribe((urlPath) => { const url = urlPath[urlPath.length - 1].path; }) } } You can see everything from the ActivatedRoute in more detail here: https://angular.io/api/router/ActivatedRoute You can check for parent route by determining if only one slash is present in it: constructor(private router: Router) {} ngOnInit() { this.router.events.pipe(filter(e => e instanceof NavigationEnd)).subscribe((x: any) => { if (this.isParentComponentRoute(x.url)) { // logic if parent main/parent route } }); } isParentComponentRoute(url: string): boolean { return ( url .split('') .reduce((acc: number, curr: string) ...

Answer : There are some solutions, make sure to check them all :) The router outlet will emit the activate event any time a new component is being instantiated, so we could use (activate) to scroll (for example) to the top: app.component.html <router-outlet (activate)="onActivate($event)" ></router-outlet> app.component.ts onActivate(event) { window.scroll(0,0); //or document.body.scrollTop = 0; //or document.querySelector('body').scrollTo(0,0) ... } Use, for exemple, this solution for a smooth scroll: onActivate(event) { let scrollToTop = window.setInterval(() => { let pos = window.pageYOffset; if (pos > 0) { window.scrollTo(0, pos - 20); // how far to scroll on each step } else { window.clearInterval(scrollToTop); } }, 16); } If you wish to be selective, say not every component should trigger the scrolling, you can ...

directive Acts as a placeholder that Angular dynamically fills based on the current router state. See more... See also Routing tutorial. RouterLink Route Exported from RouterModule Selectors router-outlet Properties Property Description @ Output('activate') activateEvents : EventEmitter<any> @ Output('deactivate') deactivateEvents : EventEmitter<any> isActivated : boolean Read-Only component : Object Read-Only activatedRoute : ActivatedRoute Read-Only activatedRouteData : Data Read-Only Template variable references Identifier Usage outlet #myTemplateVar="outlet" Description Each outlet can have a unique name, determined by the optional name attribute. The name cannot be set or changed dynamically. If not set, default value is "primary". <router-outlet></router-outlet> <router-outlet name='left'></router...