Dynamic brand logo change based on parameter #2358

5 Answer(s)

• 

  0

  kaustubh.kale@ness.com created 3 years ago

  Hi Team

  Any Update on above.

  Save Cancel
• 

  0

  kaustubh.kale@ness.com created 3 years ago

  Hi @EngincanV

  I did not get it your point.

  Save Cancel
• 

  0

  EngincanV created 3 years ago

  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.

  Save Cancel
• 

  0

  kaustubh.kale@ness.com created 3 years ago

  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.

  Save Cancel
• 

  2

  muhammedaltug created 3 years ago

  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})`);
          })
      }
  }
  

  Save Cancel