Angular2 Routing with Hashtag to page anchor

by

Update

This is now supported

<a [routerLink]="['somepath']" fragment="Test">Jump to 'Test' anchor </a>

this._router.navigate( ['/somepath', id ], {fragment: 'test'});

Add Below code to your component to scroll

  import {ActivatedRoute} from '@angular/router'; // <-- do not forget to import

  private fragment: string;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.fragment.subscribe(fragment => { this.fragment = fragment; });
  }

  ngAfterViewInit(): void {
    try {
      document.querySelector('#' + this.fragment).scrollIntoView();
    } catch (e) { }
  }

Original

This is a known issue and tracked at https://github.com/angular/angular/issues/6595

More Related Contents:

  1. Send data through routing paths in Angular
  2. laravel throwing MethodNotAllowedHttpException
  3. Angular2 How to navigate to certain section of the page identified with an id attribute
  4. Multiple canActivate guards all run when first fails
  5. Angular 4 – Http to HttpClient – property ‘someproperty’ does not exist on type Object
  6. Is there a compatibility list for Angular / Angular-CLI and Node.js?
  7. How to get current route in Symfony 2?
  8. How can I listen for keypress event on the whole page?
  9. mat-form-field must contain a MatFormFieldControl
  10. Select based on enum in Angular2
  11. How to bind event listener for rendered elements in Angular 2?
  12. Dynamically load HTML template in angular2
  13. Property ‘controls’ does not exist on type ‘AbstractControl’ Angular 4 [duplicate]
  14. Angular 4 checkbox change value
  15. Angular 5 and Service Worker: How to exclude a particular path from ngsw-config.json
  16. Cannot find name ‘require’ after upgrading to Angular4
  17. How to globally set the preserveWhitespaces option in Angular to false?
  18. Remove host component tag from html in angular 4
  19. What is the difference between formControlName and FormControl?
  20. addControl to FormGroup dynamically in Angular
  21. Angular2 without hash in the url
  22. What is the difference between declarations, providers, and import in NgModule?
  23. TypeScript-‘s Angular Framework Error – “There is no directive with exportAs set to ngForm”
  24. Get current url in Angular [duplicate]
  25. How to return observable from subscribe
  26. Limit input field to two decimal places – Angular 5
  27. How to create and download text/Json File with dynamic content using angular 2+
  28. FormControl.detectchanges – why use distinctUntilChanged?
  29. How to use angular2 built-in date pipe in services and directives script files [duplicate]
  30. How to add form validation pattern in Angular 2?

Leave a Comment