Angular2 Routing with Hashtag to page anchor

Question

I wish to add some links on my Angular2 page  that when click  will jump to specific positions within that page  like what normal hashtags do  So the links would be something like   users 123 userInfo  users 123 userPhoto  users 123 userLikes   etc   I don t think I need HashLocationStrategy  as I m fine with the normal Angular2 way  but if I add  directly  the link would actually jump to the root  not somewhere on the same page  Any direction is appreciated  thanks

User · Answer

Sorry for answering it bit late  There is a pre-defined function in the Angular Routing Documentation which helps us in routing with a hashtag to page anchor i e   anchorScrolling   enabled   Step-1 - First Import the RouterModule in the app module ts file -  imports        BrowserModule       FormsModule      RouterModule forRoot routes         anchorScrolling   enabled                Step-2 - Go to the HTML Page  Create the navigation and add two important attributes like  routerLink  and fragment for matching the respective Div ID s -   lt ul gt       lt li gt   lt a  routerLink             fragment  home  gt  Home  lt  a gt  lt  li gt       lt li gt   lt a  routerLink             fragment  about  gt  About Us  lt  a gt  lt  li gt     lt li gt   lt a  routerLink             fragment  contact  gt  Contact Us  lt  a gt  lt  li gt   lt  ul gt    Step-3 - Create a section div by matching the ID name with the fragment -   lt section id  home  class  home-section  gt         lt h2 gt   HOME SECTION  lt  h2 gt   lt  section gt    lt section id  about  class  about-section  gt           lt h2 gt   ABOUT US SECTION  lt  h2 gt   lt  section gt    lt section id  contact  class  contact-section  gt           lt h2 gt   CONTACT US SECTION  lt  h2 gt   lt  section gt    For your reference  I have added the example below by creating a small demo which helps to solve your problem       Demo   https   routing-hashtag-page-anchors stackblitz io

User · Answer

A simple solution that works for pages without any query parameters  is browser back   forward  router and deep-linking compliant    lt a  click   jumpToId  anchor1    gt Go To Anchor 1 lt  a gt    ngOnInit             If your page is dynamic     this yourService getWhatever            then              data   gt                this componentData   data              setTimeout      gt  this jumpToId  window location hash substr 1     100                            If your page is static        this jumpToId  window location hash substr 1       jumpToId  fragment             Use the browser to navigate     window location hash   fragment          But also scroll when routing   deep-linking to dynamic page        or re-clicking same anchor     if  fragment            const element   document querySelector       fragment           if  element  element scrollIntoView              The timeout is simply to allow the page to load any dynamic data  protected  by an  ngIf  This can also be used to scroll to the top of the page when changing route - just provide a default top anchor tag

User · Answer

Adding on to Kalyoyan s answer  this subscription is tied to the router and will live until the page is fully refreshed  When subscribing to router events in a component  be sure to unsubscribe in ngOnDestroy   import   OnDestroy   from   angular core   import   Router  NavigationEnd   from   angular router   import   Subscription   from  rxjs Rx    class MyAppComponent implements OnDestroy      private subscription  Subscription     constructor router  Router        this subscription   router events subscribe s   gt          if  s instanceof NavigationEnd            const tree   router parseUrl router url           if  tree fragment              const element   document querySelector       tree fragment             if  element    element scrollIntoView element                                      public ngOnDestroy         this subscription unsubscribe

User · Answer

Solutions above didn t work for me    This one did it   First  prepare MyAppComponent for automatic scrolling in ngAfterViewChecked       import   Component  OnInit  AfterViewChecked   from   angular core   import   ActivatedRoute   from   angular router   import   Subscription   from  rxjs     Component                 export class MyAppComponent implements OnInit  AfterViewChecked      private scrollExecuted  boolean   false     constructor  private activatedRoute  ActivatedRoute         ngAfterViewChecked          if    this scrollExecuted           let routeFragmentSubscription  Subscription            Automatic scroll       routeFragmentSubscription           this activatedRoute fragment            subscribe  fragment   gt                if   fragment                   let element   document getElementById  fragment                  if   element                     element scrollIntoView                     this scrollExecuted   true                      Free resources                 setTimeout                         gt                        console log   routeFragmentSubscription unsubscribe                         routeFragmentSubscription unsubscribe                       1000                                                                  Then  navigate to my-app-route sending prodID hashtag  import   Component   from   angular core   import   Router   from   angular router     Component                 export class MyOtherComponent      constructor  private router  Router         gotoHashtag  prodID  string         this router navigate      my-app-route       fragment  prodID

User · Answer

All the other answers will work on Angular  version  lt  6 1  But if you ve got the latest version then you won t need to do these ugly hacks as Angular has fixed the issue   here s the link to issue  All you d need to do is set scrollOffset with the option of the second argument ofRouterModule forRoot method    NgModule     imports        RouterModule forRoot routes          scrollPositionRestoration   enabled         anchorScrolling   enabled         scrollOffset   0  64      x  y                exports   RouterModule     export class AppRoutingModule

User · Answer

In html file    lt a  fragment   test1   routerLink           gt Go to Test 1 section lt  a gt    lt section id  test1  gt     lt  section gt   lt section id  test2  gt     lt  section gt    In ts file   export class PageComponent implements AfterViewInit  OnDestroy      private destroy     new Subject      private fragment     new BehaviorSubject lt string   null gt  null     private fragment    this fragment   asObservable       constructor private route  ActivatedRoute        this route fragment pipe takeUntil this destroy     subscribe fragment   gt          this fragment   next fragment                  public ngAfterViewInit    void       this fragment  pipe takeUntil this destroy     subscribe fragment   gt          if    fragment            document querySelector       fragment  scrollIntoView                           public ngOnDestroy    void       this destroy   next        this destroy   complete

User · Answer

Here is another workaround with refernce to JavierFuentes answer    lt a  routerLink     self-route   id   fragment  some-element   click   gotoHashtag  some-element    gt Jump to Element lt  a gt    in script   import  ActivatedRoute  from   angular router   import  Subscription  from  rxjs Subscription    export class Links       private scrollExecuted  boolean   false       constructor private route  ActivatedRoute           ngAfterViewChecked                 if   this scrollExecuted                  let routeFragmentSubscription  Subscription                routeFragmentSubscription   this route fragment subscribe fragment   gt                    if  fragment                      let element   document getElementById fragment                     if  element                        element scrollIntoView                        this scrollExecuted   true                         Free resources                     setTimeout                             gt                            console log  routeFragmentSubscription unsubscribe                            routeFragmentSubscription unsubscribe                             0                                                                                              gotoHashtag fragment  string                const element   document querySelector       fragment               if  element  element scrollIntoView element                 This allows user to directly scroll to element  if user directly lands on the page having hashtag in url     But in this case  I have subscribed route Fragment in ngAfterViewChecked but ngAfterViewChecked   gets called continuously per every ngDoCheck and it doesn t allows user to scroll back to top  so routeFragmentSubscription unsubscribe is called after a timeout of 0 millis after view is scrolled to element     Additionally gotoHashtag method is defined to scroll to element when user specifically clicks on the anchor tag   Update   If url has querystrings   routerLink     self-route   id   in anchor wont preserve the querystrings  I tried following workaround for the same    lt a  click   gotoHashtag  some-element    gt Jump to Element lt  a gt   constructor  private route  ActivatedRoute                private  router Router               gotoHashtag fragment  string        let url           let urlWithSegments   this  router url split            if urlWithSegments length         url   urlWithSegments 0              window location hash   fragment      const element   document querySelector       fragment       if  element  element scrollIntoView element

User · Answer

This one work for me    This ngFor so it dynamically anchor tag  You need to wait them render  HTML    lt div  ngForComments  ngFor  let cm of Comments  gt       lt a id  Comment   cm id    fragment  Comment   cm id     click   jumpToId    gt   cm namae   Reply lt  a gt  Blah Blah  lt  div gt    My ts file   private fragment  string   ViewChildren  ngForComments   AnchorComments  QueryList lt any gt    ngOnInit           this route fragment subscribe fragment   gt    this fragment   fragment            ngAfterViewInit         this AnchorComments changes subscribe t   gt          this ngForRendred              ngForRendred         this jumpToId      jumpToId          let x   document querySelector       this fragment       console log x      if  x           x scrollIntoView              Don t forget to import that ViewChildren  QueryList etc   and add some constructor ActivatedRoute

User · Answer

I had the same issue  The solution   using  View port Scroller https   angular io api common ViewportScroller scrolltoanchor  -- app-routing module ts code    import   PageComponent   from    page page component    const routes  Routes        path   page   component  PageComponent       path   page  id   component  PageComponent         -- Component HTML     lt a  click     scrollTo  typeExec    gt       lt mat-icon gt lens lt  mat-icon gt     lt  a gt    -- Component s code         import   Component   from   angular core       import   ViewportScroller   from   angular common         export class ParametrageComponent          constructor private viewScroller  ViewportScroller            scrollTo tag   string                  this viewScroller scrollToAnchor tag

User · Answer

None of the previous answers worked for me  In a last ditch effort  I tried in my template    lt a  click   onClick    gt From Here lt  a gt   lt div id  foobar  gt To Here lt  div gt    With this in my  ts   onClick        let x   document querySelector   foobar        if  x           x scrollIntoView              And it works as expected for internal links  This does not actually use anchor tags so it would not touch the URL at all

User · Answer

if it does not matter to have those element ids appended to the url  you should consider taking a look at this link    Angular 2 - Anchor Links to Element on Current Page   x000D   x000D     html x000D     add  click  event on element x000D   lt a  click   scroll   any-element-id     gt Scroll lt  a gt  x000D   x000D     in ts file  do this x000D  scroll sectionId    x000D  let element   document getElementById sectionId   x000D   x000D    if element    x000D      element scrollIntoView       scroll to a particular element x000D      x000D     x000D   x000D   x000D

User · Answer

Use this for the router module in app-routing module ts    NgModule     imports   RouterModule forRoot routes        useHash  true      scrollPositionRestoration   enabled       anchorScrolling   enabled       scrollOffset   0  64           exports   RouterModule       This will be in your HTML    lt a href    users 123 userInfo  gt

User · Answer

I tried most of these solutions but ran into problems leaving and coming back with another fragment it wouldn t work  so I did something a bit different that works 100   and gets rid of the ugly hash in the URL   tl dr here s a better way than what I ve seen so far   import   Component  OnInit  AfterViewChecked  OnDestroy   from   angular core   import   ActivatedRoute   from   angular router   import   Subscription   from  rxjs Subscription     Component       selector   app-hero       templateUrl     hero component html       styleUrls      hero component scss      export class HeroComponent implements OnInit  AfterViewChecked  OnDestroy       private fragment  string      fragSub  Subscription       constructor private route  ActivatedRoute           ngOnInit             this fragSub   this route fragment subscribe  fragment   gt    this fragment   fragment                ngAfterViewChecked    void           try               document querySelector       this fragment  scrollIntoView  behavior   smooth                 window location hash                   catch  e                 ngOnDestroy             this fragSub unsubscribe

User · Answer

Since the fragment property still doesn t provide anchor scrolling  this workaround did the trick for me    lt div  routerLink     somepath    fragment  Test  gt     lt a href   Test  gt Jump to  Test  anchor  lt  a gt   lt  div gt

User · Answer

I ve just tested very useful plugin available in nmp - ngx-scroll-to  which works great for me  However it s designed for Angular 4   but maybe somebody will find this answer helpful

User · Answer

Unlike other answers I d additionally also add focus   along with scrollIntoView    Also I m using setTimeout since it jumps to top otherwise when changing the URL  Not sure what was the reason for that but it seems setTimeout does the workaround   Origin    lt a  routerLink  fragment  some-id   click   scrollIntoView  some-id    gt Jump lt  a gt    Destination    lt a id  some-id  tabindex  -1  gt  lt  a gt    Typescript   scrollIntoView anchorHash        setTimeout      gt            const anchor   document getElementById anchorHash           if  anchor                anchor focus                anchor scrollIntoView

User · Answer

A little late but here s an answer I found that works    lt a  routerLink      path    fragment  test   click   onAnchorClick    gt Anchor lt  a gt    And in the component   constructor  private route  ActivatedRoute  private router  Router         onAnchorClick           this route fragment subscribe   f   gt          const element   document querySelector         f         if   element   element scrollIntoView   element                 The above doesn t automatically scroll to the view if you land on a page with an anchor already  so I used the solution above in my ngInit so that it could work with that as well   ngOnInit         this router events subscribe s   gt          if  s instanceof NavigationEnd            const tree   this router parseUrl this router url           if  tree fragment              const element   document querySelector       tree fragment             if  element    element scrollIntoView element                                     Make sure to import Router  ActivatedRoute and NavigationEnd at the beginning of your component and it should be all good to go   Source

User · Answer

After reading all of the solutions  I looked for a component and I found one which does exactly what the original question asked for  scrolling to anchor links  https   www npmjs com package ng2-scroll-to  When you install it  you use syntax like       app awesome component ts  Component             template                lt a scrollTo href   main-section  gt Scroll to main section lt  a gt           lt button scrollTo scrollTargetSelector   test-section  gt Scroll to test section lt  a gt           lt button scrollTo scrollableElementSelector   container  scrollYTarget  0  gt Go top lt  a gt           lt  -- Further content here -- gt           lt div id  container  gt               lt section id  main-section  gt Bla bla bla lt  section gt               lt section id  test-section  gt Bla bla bla lt  section gt           lt div gt              export class AwesomeComponent       It has worked really well for me

User · Answer

I just got this working on my own website  so I figured it would be worth posting my solution here     lt a  routerLink   baseUrlGoesHere  fragment  nameOfYourAnchorGoesHere  gt Link Text  lt  a gt    lt a name  nameOfYourAnchorGoesHere  gt  lt  a gt   lt div gt They re trying to anchor to me  lt  div gt    And then in your component  make sure you include this    import   ActivatedRoute   from   angular router     constructor private route  ActivatedRoute          this route fragment subscribe   f   gt             const element   document querySelector         f            if   element   element scrollIntoView   element

User · Answer

Although G  nter s answer is correct  it doesn t cover the  jump to  the anchor tag part   Therefore  additionally to    lt a  routerLink     somepath    fragment  Test  gt Jump to  Test  anchor  lt  a gt      this  router navigate     somepath   id     fragment   test           in the component  parent  where you need a  jump to  behavior  add   import   Router  NavigationEnd   from   angular router    class MyAppComponent     constructor router  Router         router events subscribe s   gt          if  s instanceof NavigationEnd            const tree   router parseUrl router url           if  tree fragment              const element   document querySelector       tree fragment             if  element    element scrollIntoView true                                        Please note that this is a workaround  Follow this github issue for future updates  Credits to Victor Savkin for providing the solution

User · Answer

Update  This is now supported   lt a  routerLink     somepath    fragment  Test  gt Jump to  Test  anchor  lt  a gt      this  router navigate     somepath   id     fragment   test       Add Below code to your component to scroll    import  ActivatedRoute  from   angular router       lt -- do not forget to import    private fragment  string     constructor private route  ActivatedRoute         ngOnInit         this route fragment subscribe fragment   gt    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

[routing] Angular2 Routing with Hashtag to page anchor

Examples related to routing

Examples related to angular

Examples related to hashtag