Base solution for your next web application
Open Closed

Add components from Metronic to solution?! #3614


User avatar
0
zokho created

Hi guys, Can someone please guide me on how to add components from the downloaded Metronic package to my Angular solution? I have located all the components in the Metronic (metronic-v4.7.5\metronic_v4.7.5\theme\assets\global\plugins). What I am not quiet sure is if I should import components via the npm or I can simply copy its folder to my solution. With the former method, I noticed that not all components exist in npm. With the latter way of copying the folder content, I don't know where is the proper place within the solution to have it pasted.

Thanks for your tips in advance :)


3 Answer(s)
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    We prefer to add components via npm if it exists on npm. Otherwise, we create a folder with plugin's name here "angular/src/assets" and copy plugin content under that folder.

    Thanks.

  • User Avatar
    0
    zokho created

    Thanks for your comment. I have got kind confused on when/how I can use Metronic components in my Angular 2 app?! I have downloaded the whole Metronic package from the provided link (1 GB). I found out that there is no component for Angular 2 in the package. So, does it mean that having the Metronic package means nothing, unless the project is in JQUERY or AngularJS? Can I use the Metronic components directy without having their Angular 2 equivalents? In the angular-cli.js I noticed the followings:

    "../src/assets/bootstrap-datepicker/js/bootstrap-datepicker.min.js",
    "../node_modules/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js",
    "../node_modules/bootstrap-daterangepicker/daterangepicker.js"
    

    But couldn't locate their usage anywhere in the solution! On the other hand, there are 2 components for date-time-picker for Angular 2 in the app\shared\common\timing folders as of date-time.component.ts and date-range-picker.component.ts which I can use. Is there any relevancy between the 2 Angular components and the above mentioned .js files in the angular-cli.js? I have actually commented the inclusion of .js files out in the angular-cli.js and didn't notice a change where the date-time.component are used! What is the app.js file in the assets\metronic\script folder? Do I need it? Can I modify it?

    So, I am kind of lost in understanding the usage of Metronic components in the Angular 2 application and would appreciate any tip and comment on any above wonders! thanks

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @zokho,

    As you noticed, current version of Metronic is for jQuery and AngularJS, so it does not have native angular2 components.

    We started developing AspNet Zero with metronic and when we move to angular2, we continued using it. So, what metronic provides for angular2 template is layout, a good view and jQuery plugins.

    We used ngx-bootstrap for some of our needs. We recently included prime-ng components.

    App.js is a metrnoic file and it configures jQuery plugins of metronic.

    The datetimepicker is included in angular-cli.json but it is not used yet, It is better to remove it I think.

    We are expecting native angular2 components with Metronic v5.

    Thanks.