Unable to localize the filter menu's text #10052

9 Answer(s)

• 

  0

  AI-Bot created 2 months ago

  Support Team ABP Agent

  1. Solution

  • In LeptonX Angular, the text “Filter Menu” comes from the LeptonX localization resource. To change/localize it, add a localization entry under the LeptonX resource in your application and ensure Angular loads dynamic localizations.
  • Option A: Use the Localization Management UI (Administration > Localization > Texts)
    • Resource: LeptonX
    • Key: FilterMenu
    • Base Value: Filter menu
    • Value: Your translation (e.g., Filtrar menu)
    • Then refresh the app. The button label will use the new value.
  • Option B: Seed it in code (backend)
    • Add/override the text in your DataSeedContributor with the LeptonX resource:

  public class MyDataSeedContributor : IDataSeedContributor, ITransientDependency
    {
        private readonly ILocalizationTextManager _textManager;
        private readonly ICurrentTenant _currentTenant;
  
        public MyDataSeedContributor(ILocalizationTextManager textManager, ICurrentTenant currentTenant)
        {
            _textManager = textManager;
            _currentTenant = currentTenant;
        }
  
        public async Task SeedAsync(DataSeedContext context)
        {
            using (_currentTenant.Change(context?.TenantId))
            {
                // Portuguese example
                await _textManager.SetAsync("LeptonX", "FilterMenu", "pt-BR", "Filtrar menu");
  
                // Add other languages as needed
                await _textManager.SetAsync("LeptonX", "FilterMenu", "en", "Filter menu");
            }
        }
    }
  

  • Run the DbMigrator or your seeder so the values are stored. Reload the Angular app.
  • Make sure Angular requests dynamic localizations
    • ABP Angular already loads dynamic text via application-localization API. If you disabled it, re-enable by keeping OnlyDynamics=True in the initial calls (default). No extra Angular change is needed.
  • If you are not seeing changes:
    • Clear the browser cache and hard refresh.
    • Ensure the active culture matches the translated language (check the language selector or SessionStateService language).
    • Confirm the Resource name is exactly LeptonX and the Key is exactly FilterMenu (case-sensitive).
    • Verify you didn’t override the component template with a hardcoded string.

  2. Sources

  • Validated link:
    • https://abp.io/docs/latest/ui/angular/localization

  ---

  This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  Save Cancel
• 

  0

  dcsimoes created 2 months ago

  The text already exists on localization

  Save Cancel
• 

  0

  maliming created 2 months ago

  Support Team Fullstack Developer

  hi

  What is the page URL? Is it an Angular or an MVC page?

  Thanks.

  Save Cancel
• 

  0

  dcsimoes created 2 months ago

  It is on angular and is page agnostic, it's on the sidebar layout

  Save Cancel
• 

  0

  maliming created 2 months ago

  Support Team Fullstack Developer

  hi

  We will fix it in the next patch version.

  You can override the MenuFilterComponent to replace it.

  Thanks.

  Save Cancel
• 

  0

  dcsimoes created 2 months ago

  Can you exemplify?

  Save Cancel
• 

  0

  maliming created 2 months ago

  Support Team Fullstack Developer

  hi

  Override the MenuFilterComponent component and change the menuFilterText to FilterMenu.

  https://abp.io/docs/latest/framework/ui/angular/component-replacement#how-to-replace-a-component

  

  Save Cancel
• 

  0

  dcsimoes created one month ago

  Hello. I was able to achieve it this way

  /// Custom Menu Filter Component
  /// IS TEMPORARY - TO BE REMOVED WHEN FIXED IN FUTURE RELEASE: https://abp.io/support/questions?sort=LastActivityDate-desc&creatorUserId=3a10d34c-87a0-a3f1-8e50-72cd7b2a718f&hidepinnedQuestions=True
  @Component({
    selector: 'app-custom-menu-filter',
    imports: [CommonModule, FormsModule, LocalizationPipe],
    standalone: true,
    template: `
      <div class="lpx-menu-filter">
        <i class="bi bi-funnel menu-filter-icon"></i>
        <!-- TODO: PROVIDE API -->
        <input
          class="menu-filter-input hidden-in-hover-trigger"
          type="text"
          [(ngModel)]="service.menuFilter"
          [placeholder]="menuFilterText | abpLocalization"
        />
        <span
          (click)="service.clearFilter()"
          class="menu-filter-clear hidden-in-hover-trigger"
          [class.hidden]="!service.menuFilter"
        >
          <i class="bi bi-x clear-icon"></i>
        </span>
      </div>
    `,
  })
  export class CustomMenuFilterComponent extends MenuFilterComponent {
    override menuFilterText = 'LeptonX::FilterMenu' as SideMenuLayoutTranslate;
  }
  
  

  app.config.ts:

  {
        provide: CONTENT_BEFORE_ROUTES,
        useValue: [CustomMenuFilterComponent],
        multi: true,
      },
  

  lpx-menu-filter {
    display: none !important;
    }
  

  sincelpx-menu-filter is not an ReplaceableComponent. If you can share a better wayu to achieve this I would appreciate it. Also I'll be waiting for feedback for when this issue is solved

  Thanks, David Simões

  Save Cancel
• 

  0

  maliming created one month ago

  Support Team Fullstack Developer

  hi

  We will fix it in the next 4.3.x patch version. Your question credit has been refunded.

  Thanks.

  Save Cancel