Open Closed

Angular Top menu layout not supporting eThemeBasicComponents.Logo #6250


User avatar
0
oncalldev@cloudassert.com created
  • ABP Framework version: v 7.4.0

  • UI Type: Angular

  • Database System: EF Core (SQL Server)

  • Tiered (for MVC) or Auth Server Separated (for Angular): yes

  • Exception message and full stack trace:

  • Steps to reproduce the issue:

    Hi, I am trying to customize the logo in my application it has top menu layout, used ThemeBasicModule and key called eThemeBasicComponents.Logo, custom component is not getting triggered in replaceable components.

In app.component.ts: import { eThemeBasicComponents } from '@abp/ng.theme.basic';

in constructor (private replaceableComponens: ReplaceableComponentsService) {}

calling this code OnInit of app component.

MemberLogoComponent declared in app.module.ts

MemberLogoComponent.html

And same code followed in side menu layout application and it is working as expected But having issues only in Top menu layout application, replaceable component is not getting triggered. Need support on this.


15 Answer(s)
  • User Avatar
    0
    Anjali_Musmade created
    Support Team Support Team Member

    Hi,

    May I know which theme you are using (Basic, Lepton, or LeptonX)? Also mention its version.

    If possible, please provide a screenshot of the error you are getting or what you expect.

    regards, Anjali

  • User Avatar
    0
    Anjali_Musmade created
    Support Team Support Team Member

    Hi ,

    Do you want to customize logo like this

    Please confirm on this so that I will better assist you.

    Thanks,

  • User Avatar
    0
    oncalldev@cloudassert.com created

    Hi,

    I am using leptonx in angular and its version "@volosoft/abp.ng.theme.lepton-x": "~2.3.0" and "abp: 7.4.0"

    Getting no error in the console or in compiler. Code changes are done for logo component replacement and only the respective component is not triggered.

    The above image you have shared is right, that is what I need.

  • User Avatar
    0
    Anjali_Musmade created
    Support Team Support Team Member

    Hi, For that you just need to replace the images logo-dark.svg and logo-light.svg with your new images. Make sure the name of images should be same. No need to replace component. For component replacement refer this https://docs.abp.io/en/abp/latest/UI/Angular/Component-Replacement#how-to-replace-logocomponent

    Thanks,

  • User Avatar
    0
    oncalldev@cloudassert.com created

    I have dynamic logo to change when switching tenants, so I am in need of replaceable component approach and trying to call the following code in app.component.ts

    this.replaceableComponents.add({ component: CustomLogoComponent, key: eThemeBasicComponents.Logo });

    I followed same link https://docs.abp.io/en/abp/latest/UI/Angular/Component-Replacement#layout-components to replace the LogoComponent. In SideMenu layout application it is working fine and only in top menu I am facing issues that is not triggering replaced component.

  • User Avatar
    0
    oncalldev@cloudassert.com created

    Hi, Kindly let me know the solution for the above scenario.

    Thanks

  • User Avatar
    0
    Anjali_Musmade created
    Support Team Support Team Member

    Hi,

    The Gdpr Module is distinct from multi-tenancy. It deals with the management of tenants and editions. Therefore, if you wish to remove or disable this module for a client, you should remove the GdprConfigModule.forRoot() line from app.module.ts.

    Thanks,

  • User Avatar
    0
    oncalldev@cloudassert.com created

    Hi, Understood, I got solved with Gdpr. Can I have any solution for replaceable components issue. In the top menu layout application I am still facing issues in replacing components using eThemeBasicComponents.Logo.

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    The commercial app template uses the LeptonX them not Basic.

    The key should be: eThemeLeptonXComponents.Logo https://docs.abp.io/en/commercial/latest/themes/lepton-x/angular#brand-component

    Here is everything about the leptonx theme: https://docs.abp.io/en/commercial/latest/themes/lepton-x/angular

  • User Avatar
    0
    oncalldev@cloudassert.com created

    Hi, I have tried both, even in eThemeLeptonXComponents.Logo respective component is not triggered, following is my code.

    import { eThemeLeptonXComponents, eUserMenuItems } from '@volosoft/abp.ng.theme.lepton-x';
    
    constructor(private replaceableComponents: ReplaceableComponentsService) {}
    
    ngOnInit() {
        this.replaceableComponents.add({
          component: MemberLogoComponent,// custom component having dynamic
          key: eThemeLeptonXComponents.Logo
        });
    }
    
  • User Avatar
    0
    sinan created
    Support Team Angular Developer

    Hi, We have created an pull request about this issue, it will be fixed in 7.4 patch

    Thank you for reporting

  • User Avatar
    0
    oncalldev@cloudassert.com created

    Hi, Do I want to install anything for this or will I get any update once fixed

    Thanks

  • User Avatar
    0
    sinan created
    Support Team Angular Developer

    it is enough to update your version in package.json when we released the patch

    then run yarn command in terminal

  • User Avatar
    0
    oncalldev@cloudassert.com created

    Hi, Can I have the suggestions to add or remove items from the Appearance(Settings). I am in need to add the custom theme, kindly let me know how to bind the custom class here.

  • User Avatar
    0
    oncalldev@cloudassert.com created

    Hi, Kindly give some solution on the above query

    Thanks

Made with ❤️ on ABP v9.1.0-preview. Updated on November 11, 2024, 11:11