Best way to replace layout:partial in Angular?
Hi,
After watching the "Your First project - Metronic 8 Admin Template" video I learned how to use the generated files from the Layout Builder in Keen 3. Whereby I'm using Angular and not PHP. Some of my components has not been well aligned though and their hover effect didn't work properly. This mainly happened in the navbar for example in the language dropdown.
After trying out a lot I found the reason. In PHP the HTML is included in place, so the structure stays exactly the same. But when including an Angular component there is a new parent element added. So some of the selectors doesn't work anymore.
I could fix it by moving the attributes of the top element in the template into the angular element. So for example for the languages menu I needed to change:
<app-languages-menu class></app-languages-menu>
to
<app-languages-menu class="app-navbar-item ms-1 ms-lg-3"></app-languages-menu>
by copying the classes from the partial file into the parent file.
Now I wonder: Is that the best approach, or is there something better available for Angular, which is similar easy and straightforward as shown for PHP in the mentioned video?
Thanks for any help on this. :-)
Best
Marc
Replies (5)
Finding the best way to replace layout:partial in Angular has streamlined my development process. I use Angular’s component Spectra Precision Laser HL700 Laserometer architecture to create reusable components, which allows for cleaner code and better maintainability. This approach not only enhances performance but also simplifies the dynamic loading of different layouts, making my applications more efficient.
Hi Marc,
You're very welcome! I'm glad to hear that worked perfectly. 😊
Hi Faizal,
Thanks a ton. The "ViewEncapsulation.None" works like a charm. 
Best
Marc
Hi Marc,
You're right that Angular wraps components with a parent element by default, which can cause issues with CSS selectors and hover effects.
To keep the structure as close to the original HTML as possible, you can use Angular's ViewEncapsulation.None on your component. This prevents Angular from adding extra CSS scoping classes:
import { Component, ViewEncapsulation } from "@angular/core";
@Component({
selector: "app-languages-menu",
templateUrl: "./languages-menu.component.html",
styleUrls: ["./languages-menu.component.css"],
encapsulation: ViewEncapsulation.None
})This will help the CSS styles and selectors from the layout builder apply as intended, avoiding the extra parent wrapping element.
After finalizing the login flow suddenly the active effects of Keen like the menu hovers and theme selector didn't work anymore. The required init functions hasn't been called anymore obviously. I managed to fix it by adding the following lifecycle method to app.component.js:
ngAfterViewChecked() {
KTComponents.init();
KTThemeMode.init();
}
Would that be the right approach and the best suited callback? Is there perhaps even some document or video available describing this topic for keenthemes templates?
Best
Marc
