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!
Replies (5)
Hi
It's great to hear that you resolved the issue with the mobile menu drawer. Hopefully it can help others. If you encounter any further issues or have additional questions, feel free to ask! 
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!
Thanks for help anyway.
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
