angular-routing

How do I navigate to a parent route from a child route?

by

Do you want a link/HTML or do you want to route imperatively/in code? Link: The RouterLink directive always treats the provided link as a delta to the current URL: [routerLink]=”[‘/absolute’]” [routerLink]=”[‘../../parent’]” [routerLink]=”[‘../sibling’]” [routerLink]=”[‘./child’]” // or [routerLink]=”[‘child’]” // with route param ../../parent;abc=xyz [routerLink]=”[‘../../parent’, {abc: ‘xyz’}]” // with query param and fragment ../../parent?p1=value1&p2=v2#frag [routerLink]=”[‘../../parent’]” [queryParams]=”{p1: ‘value’, p2: … Read more

$location / switching between html5 and hashbang mode / link rewriting

by

The documentation is not very clear about AngularJS routing. It talks about Hashbang and HTML5 mode. In fact, AngularJS routing operates in three modes: Hashbang Mode HTML5 Mode Hashbang in HTML5 Mode For each mode there is a a respective LocationUrl class (LocationHashbangUrl, LocationUrl and LocationHashbangInHTML5Url). In order to simulate URL rewriting you must actually … Read more

How to get query parameters from URL in Angular 5?

by

In Angular 5, the query params are accessed by subscribing to this.route.queryParams (note that later Angular versions recommend queryParamMap, see also other answers). Example: /app?param1=hallo&param2=123 param1: string; param2: string; constructor(private route: ActivatedRoute) { console.log(‘Called Constructor’); this.route.queryParams.subscribe(params => { this.param1 = params[‘param1’]; this.param2 = params[‘param2’]; }); } whereas, the path variables are accessed by this.route.snapshot.params Example: … Read more

How to dynamically change header based on AngularJS partial view?

by

I just discovered a nice way to set your page title if you’re using routing: JavaScript: var myApp = angular.module(‘myApp’, [‘ngResource’]) myApp.config( [‘$routeProvider’, function($routeProvider) { $routeProvider.when(“https://stackoverflow.com/”, { title: ‘Home’, templateUrl: ‘/Assets/Views/Home.html’, controller: ‘HomeController’ }); $routeProvider.when(‘/Product/:id’, { title: ‘Product’, templateUrl: ‘/Assets/Views/Product.html’, controller: ‘ProductController’ }); }]); myApp.run([‘$rootScope’, function($rootScope) { $rootScope.$on(‘$routeChangeSuccess’, function (event, current, previous) { $rootScope.title = … Read more