Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

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


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (4)


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. happy

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


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(