ng2-admin 0.4.0 is out!

Hello Everyone!

Today we are excited to announce a small, but major 0.4.0 release of our ng2-admin.

For the last couple of weeks we've been working hard to finally release this update which includes a list of bugfixes, new components, and what is more important - updated Angular Router and Angular Forms. So let's start from this part and then move on to the other news.

New Angular Component Router, Forms.

Angular 2 Router has been through a bunch of rebuilds, updates and changes to finally become Angular Component Router (though it's still in beta we really hope this is a final router from the architecture standpoint). We are not going to describe all the great features of Component Router; instead of it we'll focus on the changes you have to make in your admin application while updating to a new ng2-admin 0.4.0.

So, here's a list of steps you have to go through:

0. Update the code.

This step is simple, just run the git pull command to get the changes from github and then install the dependencies with npm install.

1. Routes. Move rotes configuration into src/app/app.routes.ts.

Now all the routes are defined in one place of your application and then being registered on the application bootstrap phase. This means thatfirst of all you need to remove all @RouteConfig declarations across all of your components. Then let's take a look at app.routes.ts itself:

export const routes:RouterConfig = [  
  ...LoginRoutes,
  ...RegisterRoutes,
  ...PagesRoutes,
  {
    path: '**',
    redirectTo: '/pages/dashboard'
  },
];

Here we define an array of all routes registered in the application.You may notice as well that we've separated all 'pages' routes from other first-level routes of the app. This is done intentionally, foremost to divide pages, available to authenticated and non-authenticated users. Also, our 'pages' routes have 'page/' prefix in the url which is also achieved through this separation. The last important thing here is path:** route. This is the route left for 404 not found page. In our case instead of a 404 page the dashboard page is shown.
Okay, let's assume you have a bunch of pages you want to move and the first of them is the main dashboard page. Let's open src/app/pages/pages.routes.ts and add a route for it:

export const PagesRoutes:RouterConfig = [  
  {
    path: 'pages',
    component: Pages,
    children: [
      {
        path: 'dashboard',
        component: Dashboard
      },
      {
        path: 'editors',
        component: Editors
      }
   ]
 }
];

As you see all our routes are defined as children to 'pages' route. So we added the 'dashboard' route under children property of the 'pages' route. Each route needs to have a path and a component that will be rendered. That's it, all you have to do afterwards is to move all your routes here and don't forget to remove @RouteConfig declarations and imports or @angular/router-deprecated from your code.

2. Sidebar Menu. Move sidebar menu declarations inside of the routes configuration.

Yes, we decided that the solution of a menu, that is combined with routes and not declared separately, is much more convenient. First of all, it is so because you won't loose anything as configuration located in one place; secondly it's less verbose (less code, less files, less mistakes). So, for instance, to create a menu item for our dashboard page let's change the dashboard route configuration like this:

export const PagesRoutes:RouterConfig = [  
  {
    path: 'pages',
    component: Pages,
    children: [
      {
        path: 'dashboard',
        component: Dashboard,

        data: {
          menu: {
            title: 'Dashboard',
            icon: 'ion-android-home',
            selected: false,
            expanded: false,
            order: 0
          }
        }

      }
      // rest of the items
   ]
 }
];

So the only thing you need to do is to add a menu declaration under the data property of your route. The menu item declaration hasn't changed, there's still a title, icon and a couple other configuration properties.
Now check out your menu - it will have one item. The same thing you need to do with all of your menu items. At the end - remove the old app.menu.ts file as it's no longer needed.

3. Update your forms.

Generally, if you are using forms in your application it's better to take a look at this guide. The most important change is that now forms are 'template-driven' out of the box which means we can build almost any form inside of Angular 2 template. Yet it is still possible to declare a from in your component as we did with our login/register forms.

After doing these steps you should have your ng2-admin updated with the latest version of Angular 2, Component Router and Forms and ready to rock!

New ng2-admin components

Besides the update we have introduced a couple of useful components, here's the list:

  1. CKEditor WYSIWYG component.
  2. Image Uploader component. Can be used for uploading images, avatars. Has a built-in file transferer.
  3. Tree view component.
  4. Start Rating component.
  5. Checkbox/multi-checkbox component.

And that's basically it! This update brings ng2-admin a bit closer to a release, yet there is still a lot of work to do. Hope you'll find it useful in your projects!