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
    ice cubes
    Setup A New Python Project Like A Pro (Part 2)
    Jan 24, 2022
    sending files with auxiliary data
    Simple Way To Send A File With Auxiliary Data Via Axios In VueJS
    Feb 9, 2022

    Switch Branding In Your Angular Project

    Categories
    • Languages / Tech areas
    • Software Development
    • Web Development
    Tags
    • angular
    • angular js
    • css
    • stylesheets
    • web development
    switch branding in your angular project
    switch branding in your angular project

    Set up a build configuration to easily switch between pre-defined layouts and data endpoints.

    - Build configurations differ depending on the Angular version, so for this article I will be using Angular 12.

    Environment files

    First lets create a new environment file (environment.ts) and change the naming of the files. That way we can easily determine which environment suits which build configuration.

    Setting up different environment files is essential if you have different databases your front-end needs to communicate with based on the branding switch.

    Switch branding in your Angular project

    Switch branding in your Angular project

    Switch branding in your Angular project

     

    Stylesheet sets

    Next up is creating another set of CSS stylesheets and then naming them according to the environment files previously discussed (it will be easier to understand which stylesheet suites which brand/build). This will ensure each brand's page styling is isolated in their respective stylesheet.

    Switch branding in your Angular project

     

    The configuration

    The final step is to add another build configuration. In this case we will have at total of 2 variants specified in our projects' angular.json file.

    The build configuration ties your stylesheets and environment files together and will build your Angular project according to all those resources.

    Switch branding in your Angular project

    Switch branding in your Angular project

    Switch branding in your Angular project

    - Note: You can also duplicate your assets folder and name it accordingly. Keep the file names inside your different assets folders the same to ensure that you can reference the same file name in your html regardless of what build you are serving or building.

    This eliminates the need for conditional templates in your view.

    Switch branding in your Angular project

     

    Result time

    Lastly, run the build command, with some extra flags to ensure the correct build variant, and watch the magic happen.

    Switch branding in your Angular project

    Contact us


      Related posts:

      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 angularUpdating A Primitive Type Variable From A Service In Angular laravel envoyer and forgeProvisioning A New Digital Ocean Server With Laravel Forge, And Deploying Code With Laravel Envoyer how to use ckeditor 5 in angular with server side rendering supportHow To Use CKEditor 5 In Angular With Server Side Rendering Support
      Share
      0
      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 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