Hi Moaz Elzeny,

To use components from the HTML version of Metronic in the Angular version with the same logic and design, you'll need to perform the following steps:

1. Identify the specific component you want to use from the HTML version.

2. Copy the relevant HTML markup, CSS styles, and any associated JavaScript code related to the component.

3. Create a new Angular component in your Angular project.

4. Paste the HTML markup into the template file of the newly created Angular component.

5. Copy the CSS styles and add them to the component's styles file or the global styles file of your Angular project.

6. If the component requires any JavaScript code for functionality, you'll need to adapt and rewrite that code to fit the Angular framework. This may involve utilizing Angular directives, services, or other Angular-specific features to achieve the desired functionality.

7. Make any necessary adjustments or modifications to the component's logic and design to align with the Angular architecture.

Remember that while the HTML markup can be directly copied from the HTML version, the JavaScript code may require customization and adaptation to work within the Angular framework. You may need to refactor the code to leverage Angular's modules, services, and component lifecycle hooks.

It's also important to note that not all components from the HTML version may be easily translatable to Angular. Some components may rely on specific JavaScript libraries or plugins that may not have Angular equivalents. In such cases, you may need to explore alternative Angular-compatible libraries or build custom solutions.

I hope this helps you integrate the desired components into your Angular project. If you have any further questions, feel free to ask.

Thanks