<- Font Awesome Icon Library -> I’m not really happy about how we had to do it, but this is the cleanest approach I could find. Create a dropdown menu that appears when the user moves the mouse over an icon. In this small article, I’ve described how we’ve handled the internationalization of our new PrimeNG menu. Whenever the language change callback is invoked, we just have to call our buildUserProfileMenu method to get a new version of the menu with the correct translations. In order to do this easily, we’ve simply moved the construction code of our menu model in a factory method: Note that the example code above doesn’t handle the subscription correctly don’t forget it for your applications though or you’ll introduce a memory leak -) When that happens, we need to rebuild the menu. With this, we get warned whenever the language changes. In our application, we store the current language in the NGRX store and our facade simply exposes a selector to let us watch for value changes, which makes this really easy, but the same can be achieved using the onTranslationChange event emitter exposed by the TranslateService service of ngx-translate: So here’s our plan: subscribe to language changes events and rebuild the whole menu each time the language changes. The first one would be better for other reasons, but also problematic because it would introduce technical debt. Rebuild the menu model whenever the language changes so that it contains the correct translated textįor now, we’ve started with the second option. cagataycivici Is there any option to swap the primeicons used in components like p-dialog with the font-awesome icons like they were used in primeNG 5.2 For example the close icon for the dialog Edit: Currently I am swapping them inside the components css to use the same icons that were used in primeNG 5.Size of an icon is controlled with the font-size property of the element. Breadcrumb ContextMenu Dock Menu Menubar MegaMenu PanelMenu SlideMenu Steps TabMenu TieredMenu Chart. Fork PrimeNG’s menu to bend it to our will and be able to use the translate pipe directly against the labels provided in the menu model PrimeIcons library is optional as PrimeNG components can use any icon with templating.Bummer! The solutionĪfter looking into it a bit, only two solutions stood out: Otherwise, add a FontAwesome Pro kit using SVGs, add an icon to a button or menu item and watch the show. The problem is that with this in place, the menu translations are interpolated only once at construction time (during ngOnInit), but those don’t get re-evaluated when the language is changed. If you don't want to mess around with font awesome, just swap the icon span with an svg on a ripple supported component like a button or a menu item. Here’s what our menu looks like once converted to PrimeNG: With PrimeNG’s menu, we had resort to translateService.instant(.), which does a one-time translation that doesn’t get updated automatically. With mat-menu, we simply has to use ngx-translate’s translate pipe and it worked fine. They’re set once and don’t get automatically updated. This is problematic at least in the context of internationalization, because the labels that we pass to the menu aren’t dynamic. What’s less nice is the fact that we have very limited control over how the menu items are rendered, as opposed to Angular Material’s mat-menu component, which uses content projection and thus lets us insert whatever we want into the menu easily. The nice thing about that model is that we can statically define the menu’s configuration, pass it as input to the p-menu and let it render everything for us. The boon and bane of Prime’s menu system is that it is backed by a powerful menu model. In this article, I’ll explain how we’ve managed to translate the PrimeNG menu dynamically. We feel like overriding all the Angular Material styles is not going to be easy and would be hacky (at best).Īs part of this transition to PrimeNG, we had to rewrite our mat-menu usages to Prime NG’s “equivalent” menu component. The reason for this move is the fact that our designer’s work feels too distant from Material Design and we’re not willing to swim against the flow. Recently, for our awesome startup project, we’ve decided to move away from Angular Material and to switch to Tailwind + PrimeNG.
0 Comments
Leave a Reply. |