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:




Replace "component-name" with the name you want to give to your new Angular component.

Open the HTML file my-component.component.html in the same folder as the my-component.component.ts file and copy the HTML markup from your original HTML component into the file.

Modify the HTML code to make sure it conforms to Angular"s syntax. For example, replace any class attributes with ngClass directives, replace any style attributes with ngStyle directives, and so on.

Modify the component"s TypeScript file to add any necessary functionality to the component. For example, if the component contains form elements, you will need to add form validation code to the TypeScript file.

You can add any necessary CSS styles specific to the component to its CSS file. However, for global styles that are already included, you do not need to add them again in the component"s CSS file.

Import the new Angular component into your Angular module and add it to the declarations array.







Use the new component in your Angular templates by adding its selector to the template.




There are several video tutorials available online that can guide you through this process. You can search for "converting HTML to Angular component" or "creating Angular components from HTML" to find these tutorials.

Thanks

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:




You can also check out the preview of these examples by visiting the following link:
https://preview.keenthemes.com/metronic8/angular/demo1/crafted/widgets/charts.

For more information about using ng-apexcharts plugin with Angular, please refer to the official documentation at: https://apexcharts.com/docs/angular-charts/.


Thanks

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