Open Closed

Dynamic brand logo change based on parameter #2358


User avatar
0
kaustubh.kale@ness.com created

ABP Framework version: v4.3.1 UI type: Angular DB provider: EF Core Tiered (MVC) or Identity Server Separated (Angular): no / yes Exception message and stack trace: N.A Steps to reproduce the issue:" N.A

Hi Team

We want to make dynamic logo for platform . we are getting parameter in login url from using that parameter we want to change logo of platform.

In above image Lenovo logo is their so we need to show this logo if we get parameter Lenovo from url http://localhost:4200/account/login?Tenant=Lenovo

If we get another parameter then we have to show that company logo.

Kindly Guide us to achieve this.


5 Answer(s)
  • User Avatar
    0
    kaustubh.kale@ness.com created

    Hi Team

    Any Update on above.

  • User Avatar
    0
    kaustubh.kale@ness.com created

    Hi @EngincanV

    I did not get it your point.

  • User Avatar
    0
    EngincanV created
    Support Team .NET Developer

    Hi again @kaustubh.kale@ness.com, I am sorry I've added the wrong URL.

    Can you check this question's answers? I think the suggested steps in this question can answer your question.

  • User Avatar
    0
    kaustubh.kale@ness.com created

    Hi @EngincanV

    Giving error on below line

    import { SetStyle } from '@volo/abp.ng.theme.lepton';

    Error msg

    '"@volo/abp.ng.theme.lepton"' has no exported member named 'SetStyle'. Did you mean 'setStyle'?ts(2724) layout.utils.d.ts(4, 25): 'setStyle' is declared here. '"@volo/abp.ng.theme.lepton"' has no exported member named 'SetStyle'. Did you mean 'setStyle'?ts(2724) layout.utils.d.ts(4, 25): 'setStyle' is declared here.

  • User Avatar
    2
    muhammedaltug created

    Hello,

    You can read query parameters value with ActivatedRoute's queryParameters stream

    Example

    import { ActivatedRoute } from '@angular/router';
    
    class YourComponent {
        constructor(private route: ActivatedRoute){
            this.route.queryParams.subscribe(params => {
                const tenant = params['Tenant']
                
            })
        }
    }
    

    There are 2 methods below for how can you change the logo.

    Method 1: There is a CSS variable named logo-reverse which is assigned to the background property of the 'navbar-brand' class. You can change this variable's value in your component. Example:

    import { AfterViewInit, ElementRef } from '@angular/core';
    
    class YourComponent implements AfterViewInit{
        constructor(private elRef: ElementRef){
        }
        
        ngAfterViewInit() {
            this.elRef.nativeElement.style.setProperty('--logo-reverse', `url(${logoUrl})`)
        }
    }
    

    Method 2: You can set a template variable element that has background property for the logo. After you can change this element's background-image style property. Example:

    <!-- YOUR COMPONENT TEMPLATE -->
    <a #logoLink class="navbar-brand" routerLink="/" alt="Logo"></a>
    
    class YourComponent implements AfterViewInit {
        @ViewChild("logoLink")
        logoLink: ElementRef<HTMLElement>
        
        ngAfterViewInit() {
            this.logoLink.nativeElement.setProperty('background', `url(${logoUrl})`)
        }
    }
    

    Full Guide Example:

    import { AfterViewInit, ElementRef } from '@angular/core';
    import { ActivatedRoute } from '@angular/router';
    
    class YourComponent implements AfterViewInit {
        constructor(private route: ActivatedRoute, private elRef: ElementRef){}
        
        ngAfterViewInit() {
            this.route.queryParams.subscribe(params => {
                const tenant = params['Tenant']
                const logoUrl = "YOUR LOGO URL";
                this.elRef.nativeElement.style.setProperty('--logo-reverse', `url(${logoUrl})`);
            })
        }
    }
    
Made with ❤️ on ABP v9.1.0-preview. Updated on December 10, 2024, 06:38