Hi Faqru,

I appreciate your interest in Metronic.

Please note that some pages from the HTML version may not be available in Angular, but the CSS styles from the HTML version are already integrated into Angular. Additionally, all components from the HTML version are static and non-functional. To achieve the same look, you can simply copy the component HTML from the HTML version and paste it into the Angular component. However, it is essential to remember that the actual functionality and implementation of the components will need to be done by the customer to align with their unique business requirements.

Please do not hesitate to reach out to us if you require any further clarification.

Thanks

Please how can I copy the component HTML from the HTML version and paste it into the Angular component? For example create new project in HTML and I need to copy this any angular template. Please any video tutorial for this. Having HTML templates as view only useless. I need to have atleast to see create operation window in angular. Please guide.

Hi Faqru,

Create a new Angular component using the Angular CLI. Open your terminal and navigate to your Angular project folder. Run the following command:

ng generate component component-name

import { MyComponentComponent } from "./my-component/my-component.component";

declarations: [
 AppComponent,
 MyComponentComponent
]

<app-my-component></app-my-component>

Thank you Faizal for you effort. Its working and I bring demo1 of index.html in my own component. But I need header, sidebar and footer from demo1. I checked the index.html its full complete dashboard and too many lines of code. Is there any easy way to get source for header, side and footer html code and copy to my own component?

Hi Faqru,

To prepare your HTML template, you can use the online layout builder available for your demo version. For example, if you are using demo1, visit the following link:

https://preview.keenthemes.com/metronic8/demo1/layout-builder.html

The layout builder allows you to configure the layout with various options and preview it in real time. Once you have decided on a configuration, you can download the HTML code for your preferred layout by clicking on the "Export" button at the bottom of the page. The export package contains the HTML template with structured includable partials (header, aside, footer, etc.) for server-side integration. You can include the assets from your local download version.

Once you have integrated the master layout, menus, and navigation, you can proceed with your inner pages by referring to the original theme demos. You can refer to the demo pages' source code for additional guidance on available features.

If you require further assistance, please do not hesitate to let us know.

Thanks

That's great and its works perfectly online layout builder. What about charts ? What type charts used in keenthemes ? Where is the static data for chart is located ?

Hi Faqru,

For Angular, we use ng-apexcharts plugin to create apexchart examples. You can find these examples in the following directory:

demo1/src/app/_metronic/partials/content/widgets/charts

Thank you Faizal. Its great response and support. I have issue with Calendar app. I copy calendar.html to my custom component and its not showing calendar view and evets details. Please see below screen link my output for calendar app.

https://drive.google.com/file/d/1R_ctL_sK_ofyzVsVQZ0i8y_PwfQP-dkt/view?usp=share_link

Hi Faqru,

Thank you for your feedback

One thing you could check is whether you have included all the necessary CSS and JavaScript files in your custom component. Make sure that you have included the required files for the calendar plugin, such as FullCalendar, Moment.js, and the theme CSS file.

Please check if there are any JavaScript errors by opening the console log in your browser and taking a screenshot of it. This will help us identify the issues.

Thanks

Hello Faizal,

I checked all scripts and css for calendar. Still its not working. Please find my files. Index.html(Gloabl index) and calendar.html(component).

https://drive.google.com/file/d/16nECMeJd-uqPCT8cSfUlSRQzbQrPnWtp/view?usp=share_link (calendar.html)

https://drive.google.com/file/d/1w53rrLp6-CiNaa-oJ1phhJr3a1S_RMGY/view?usp=share_link (index.html)

Waiting for your response. Still calendar html code still not working.

Hi Faqru,

Apologies for the delay. To use the fullcalendar plugin, you will need to install it first. Please refer to the documentation available at https://fullcalendar.io/docs/angular for installation instructions.

Additionally, you will also need to include the JavaScript code to initialize the calendar. You can find a sample calendar initialization file at src/js/custom/apps/calendar/calendar.js. Please ensure that this file is properly included in your project and that the necessary configuration options have been set.

Thanks