Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

Integrate header from html to angular


Hi,
I'm trying to use Demo 20 (HTML) header in my Demo 2 (Angular) application.
I got the style file from html and added in my project. Everything fine until i realised that, in mobile mode, the menu drawer doesn't work (in html demo works). The overlay is there, but nothing else (the menu).
Does it needs any special configuration?
Could you help me?

Thanks in advance!


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

In the HTML version, specific JavaScript files handle the interactions and animations for the menu. If these scripts are not included in your Angular project, the menu might not work.

Copy scripts.bundle.js file from the HTML version. This file should contain all the necessary JavaScript for handling the menu.

Update the angular.json file to include the scripts.bundle.js in the scripts section. This ensures the script is bundled and included in your application.



{
"projects": {
"your-project-name": {
"architect": {
"build": {
"options": {
"scripts": [
"src/assets/scripts.bundle.js"
]
}
}
}
}
}
}



Thanks for response!
I did as you told me but i get this error in browser console:

Uncaught TypeError: Cannot read properties of undefined (reading 'init')
at Object.init (src\assets\js\scripts.bundle.js:1:35)
at src\assets\js\scripts.bundle.js:1:332



Hi,

You can import the JavaScript component file from demo20/src/js/components/menu.js into your Angular project. This file handles the interactions for the sidebar menu.

Thank you



Thank you! But that didn't worked either.

The problem was because of data-kt-swapper. The "data-kt-swapper-parent="{default: '#kt_body', lg: '#kt_header'}"" didn't triggered on kt_body on mobile mode, so the menu couldn't be displayed.
I used this is .ts file (in case someone needs it):
SwapperComponent.createInstances();
var swapperElement = document.querySelector("#kt_header_navs") as HTMLElement;
var swapper = SwapperComponent.getInstance(swapperElement);

swapper.update();

Now it works! happy
Thanks for help anyway.


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  :(