DevExtreme for Angular– CRUD UI Scaffolding Wizard in Visual Studio (v18.2)

A lot of Angular developers are already familiar with the Angular CLI (Command Line Interface). Besides creating, running and testing an Angular project, it also enables you to generate different parts of your application including scaffolding.

This all works very nice and efficient if you know all the command-line options to accomplish certain tasks.

Since DevExpress loves Visual Studio, in our v18.2 release we have included a really cool Scaffolding tool for Angular projects which are developed in Visual Studio.  The scaffolding tool is able to generate an Angular component which includes a DevExtreme widget. The cool thing here is that it is also configured to use the selected action methods on an ASP.NET WebAPI Controller.

Requirements

First make sure you have the following installed:

ASP.NET Core MVC:

• Visual Studio 2017 and later
• .NET Core SDK 2.1
• ASP.NET Core application with Angular
• Entity Framework Core Data Model

The DevExtreme Scaffolder is automatically installed for all compatible Visual Studio versions by the DevExtreme installer.

How does it work?

Once all prerequisites are installed, create a new project by going to File / New project to create a new ASP.NET Core Web Application with the standard Angular Project template.

Don’t forget to add the Entity Framework Core Data Model to the project!

Once the project wizard has completed its work, you can start using the scaffolding wizard by right-clicking any folder in the Solution Explorer and select Add / New Scaffolded item.. in the context menu.

In the Add Scaffold dialog, select Angular Component with a DevExtreme UI Widget and click Add.

The DevExtreme Wizard popups up which allows you to enter an Angular component name.

On the second tab you can select the DevExtreme Widget you want to use:

The real fun begins on the Data Binding tab:

Here you can directly specify the Entity Framework Data Context class together with the Model and the Controller (server-side). For all of you interested in the scaffolding process, you can read more about it here.

Once you’ve also configured the specific properties and other configuration options on the Settings tab, you can click the Add button which initiates the magic.

The component will be created in the ~/ClientApp/src/app/[ComponentName] folder and the component will be registered in the app.module.ts file as well. If there are any required NPM packages needed, they will also be automatically installed into the project.

The last thing that happens is the creation or modification of the ASP.NET Core controller with the appropriate action method(s) to provide the desired CRUD operations.

Try it?

Our v18.2 public beta is already available for our customers so login at our web-site and head to the My Downloads section from where you can download and install DevExtreme v18.2.

What do you think?

I invite all of you to test this new time-saving Scaffolding Wizard and let me know what you think of it. Also questions and suggestions are more than welcome by replying to this post.

Join the Webinar

Sign up for the upcoming "New in v18.2 - DevExtreme HTML / JS Controls" webinar where:

• you'll see all the new features/tools/components in v18.2 and
• you can ask questions and interact with our devs

Register today: https://attendee.gotowebinar.com/register/1534319392881688322

Free DevExpress Products - Get Your Copy Today