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
    dbeaver
    How To Connect Your Forge Remote Database In DBeaver
    Aug 30, 2021
    learning
    Developing Problem Solving Skills Through Games
    Sep 14, 2021

    Updating A Primitive Type Variable From A Service In Angular

    angular
    angular

     

    Do you need to get a value from a service level variable as soon as your application starts up? This would mean that your service would have to initialize, followed by calling the method that populates your service variable, all before your application finishes with the start-up process. Your variable would be undefined because the problem is created by the component reading the value from the service too early, as the service has not yet had a chance to initialize itself and push a value into your variable.

    How do we solve this?

    I had two solutions for two different use cases.

    App Initializer

    APP_INITIALIZER let’s your service be initialized when your application starts up instead of when a component calls upon it when needed. We implement the app initializer in our app.module file like so:

    app initializer

    Import APP_INITIALIZER from angular/core and create a method that calls the initialize method in  your service.

    app initializer

    Add your service to the providers array with the necessary configuration.

    With our app initializer now added to the app.module file, we get that service level variable back with a value immediately. No more undefined value 🙂

    This solution would work for you if you didn’t need that value to update as you were using your application. I needed this to happen. The value should update in my component every time the variable in my service changed. For this use case I needed to use my second solution, a Behaviour Subject and Observable.

    Behavious Subject and Observable

    With the behaviour subject and observable I don’t need to initialize my service in time for when the component reads the variable. I can now subscribe to the service level variable, which is now an observable, and push values through the stream using the .next method.

    Behavious Subject and Observable

    I added these variables to the service.

    Behavious Subject and Observable

    Still in my service, I update the variable using .next()

    Behavious Subject and Observable

    In my component I added these variables.

    Behavious Subject and Observable

    And in the ngOnInit lifecycle hook, I subscribe to the observable of my service to receive the updated values.

    Now the component gets an undefined variable until the service is completely initialized, at which point the service level variable gets updated with a value and the component, that is subscribed to that variable, is updated also.

    This was the right solution for my use case as it meant I no longer had to wait for the service to initialize, but it would also update the variable in my component whenever the service variable changed.

    Contact us


      Related posts:

      how to deploy your app/website on herokuHow To Deploy Your App/Website On Heroku how to deploy a backend api to azureHow To Deploy A Backend API To Azure dynamic doughnut graph using laravel vue componentDynamic Doughnut Graph Using Laravel Vue Component laravel livewireLaravel Livewire
      Share
      36
      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.

      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 1 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