switchon@lavalamp.biz
+27(0) 83 419 4851 / +27(0) 21 036 1165
Application & software development
Get A Quote

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact
    laravel observers
    Laravel Observers
    Apr 26, 2021
    dynamic doughnut graph using laravel vue component
    Dynamic Doughnut Graph Using Laravel Vue Component
    May 24, 2021

    Router Extra Options

    Categories
    • Web Development
    Tags
    • anchor tags
    • angular
    • fragment attribute
    • framework
    • js
    • navigation bar
    • page scroll position
    • router extra options
    • scroll effect
    • scrolling to an anchor
    router extra options
    router extra options

    I've been fortunate enough to dev with Angular for the last 2 years, and I'm always pleasantly surprised when the framework makes my life easier with build in methods or configurations.

    One such configuration set is the Router ExtraOptions configurations. These are applied to the Router Module and I'm going to go through a few that I have used and found very helpful.


    Jumping to Anchor Tags


    If you want the user to jump to a specific place on a page, add the anchorScrolling property to the .forRoot method in your routing module file, like so:

    router extra options

    then in your view, reference your page you would like to route to and specify the fragment (#) part you want to append to your URL using the fragment attribute:

    router extra options

    and lastly give the section you want to scroll to an id (the same name as your fragment above), and that's it. Angular will jump to the exact spot you specified. Best of all the fragment attribute also accepts component variables so changing the name connected to the fragment programmatically is no problem (reference the variable using string interpolation).

    Next you would most likely want to set an offset when jumping to an anchor tag. This we do next.


    Adding a Scroll offset


    If you find your div is partially disappearing behind a fixed header, you might want to add an offset to the top of the page when scrolling to an anchor. This can sometimes be tricky with css and not work as well as expected. Here the scrollOffset property works quick and easy:


    router extra options

    Now each time you jump to an anchor tag it will not be cut off by a fixed header or navigation bar. The two values in the array are the x and y axis values, In this example I've giving it an offset of 95px from the top of the page.


    Restoring the page scroll position


    In older versions of Angular, like version 8, this configuration is not enabled by default. In the case that you are using that version or older, simply adding the scrollPositionRestoration property to your route configuration will force the page to shoot back to the top every time a user navigates backwards.


    router extra options

    In cases where the user might constantly be presented with the bottom or middle of a page when navigating back, this simple solution might save you a small headache and the user a lot of frustration.


    Reloading the same URL


    If you have a situation where you want the page to reload when the same URL is provided to the browser (by default Angular ignores reloading the same URL), Angular has you covered. Sometimes reloading the same page is necessary because you might want to invoke your ngOninit method in order to trigger a refresh feature.

    Adding the onSameUrlNavigation property will force the framework to reload the page for you in turn running your logic.


    router extra options

    I hope some of these awesome properties will help you in the future, it certainly has for me.

    Contact us


      Related posts:

      laravel livewireLaravel Livewire onesignalHow To Setup And Use OneSignal For Web Apps how to send a tweet from within your angular app via node jsHow To Send A Tweet From Within Your Angular App Via Node Js 9 tips to prevent programmer burnout9 Tips To Prevent Programmer Burnout
      Share
      100
      Werner Bestbier
      Werner Bestbier
      Werner is a front-end developer with a background in design. Making a users web-surfing life easy is his game. His preferred language/framework is Javascript and Angular.

      2 Comments

      1. Mitchell says:
        May 6, 2021 at 7:42 pm

        Wow as an experienced Angular Dev, I have defiantly found this interesting.

        Reply
      2. Werner Bestbier says:
        May 7, 2021 at 9:51 am

        Thank you Mitch, glad you found this interesting!

        Reply

      Leave a Reply Cancel reply

      Your email address will not be published. Required fields are marked *

      Lava Lamp Lab


      Like technology, a lava lamp constantly changes form, producing new conditions with every passing moment



      lava lamp lab facebook   lava lamp lab twitter   lava lamp lab linkedin   lava lamp lab instgram

      Services


      Application & software development

      Outsourced software development

      Project based resourcing

      Digital marketing & consulting

      Graphic design & consulting

      UI / UX design & consulting

      Contact Us


      +27(0) 83 419 4851

      +27(0) 21 036 1165


      switchon@lavalamp.biz


      Unit 4 Monaco Square,
      14 Church Street,
      Durbanville,
      Cape Town, 7550

      NBConsult Group


      nbconsult
      nbconnect msp
      nbclearning
      river broadband
      designer needed
      © 2023 Lava Lamp Lab (Pty) Ltd | All Rights Reserved | Privacy Policy
      Contact us now

        Application & software development

          Outsourced software development

            Project based resourcing

              Digital marketing & consulting

                Graphic design & consulting

                  UI/UX design & consulting

                    Lease an expert

                      Recruitment services

                        We are using cookies to give you the best experience on our website.

                        You can find out more about which cookies we are using or switch them off in settings.

                        Lava Lamp Lab
                        Powered by  GDPR Cookie Compliance
                        Privacy Overview

                        This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

                        Strictly Necessary Cookies

                        Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.

                        If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.

                        3rd Party Cookies

                        This website uses Google Analytics to collect anonymous information such as the number of visitors to the site, and the most popular pages.

                        Keeping this cookie enabled helps us to improve our website.

                        Please enable Strictly Necessary Cookies first so that we can save your preferences!

                        Cookie Policy

                        More information about our Cookie Policy