Auto-generating Angular 4 Pages and Creating Custom Components Using Radzen

Jun 4

Written by: Michael Washington
6/4/2017 9:23 AM

“…a rapid application development solution for Angular 2[and 4]. It enables the creation of responsive web apps without writing HTML, CSS or JavaScript…”

As of this writing, there are some additional features that bring it closer to the features that long time users of Visual Studio LightSwitch are used to. Namely, the page creation wizard, the ability to edit the source code using Visual Studio, and the ability to create custom components.

Page Creation Wizard

Let’s say we add a new table to our Radzen application.

We can then open up Radzen, and select Data.

Select the existing data source.

We then confirm the data source type and select Infer Schema.

We now have the option to not automatically create pages (we can now create only the ones we need when we need them).

We can also select only the tables and fields we want to add to the data source (many of us have huge databases with a lot of tables and fields we don’t want in the application).

Returning to the main page in Radzen, we can now select Create New Page.

This allows us to select the new View/Add/Edit pages template.

We then select our database table for Page Schema and click Save.

The pages are created.

We can edit the pages, for example to hide the Id column.

Next, we select Run.

The Output window allows you to see what's happening.

The application displays Smile

Note: See this page to deploy the application to a production web server.

Edit Source Code in Visual Studio

You can open the folder your Radzen project is contained in…

If you have Visual Studio 2017 (or higher) you can then right-click on that folder and select Open in Visual Studio.

You can see and edit all of the code.

Note, you can see the Radzen Architecture at the following link:

http://www.radzen.com/documentation/architecture/

This will explain what pages you can and cannot edit.

Create Custom Components

Radzen allows you to create custom components.

This allows you to implement functionality that may not otherwise be possible to do using only the normal Radzen application.

For example, we can create a file called custom.component.ts in the client/src/app directory using the following code:

import { EventEmitter, Component, Input, Output } from '@angular/core';
@Component({
  selector: 'my-component',
  template: `
    <button (click)="onClick()">{{ text }}</button>
  `
})
export class CustomComponent {
  @Input() text: string;
  @Output() navigate = new EventEmitter();
  onClick() {
    this.navigate.next();
  }
}

We then register the component in the app.module.ts file.

Next, we create a new page.

We search for the HTML control and drop it on the page.

We select the control and set its Content property to the following:

<my-component text="Go To LightSwitchHelpWebsite.com" (navigate)="onNavigate()"></my-component>

We now stop the application and run it again.

When we return to Visual Studio, and refresh the Solution Explorer, we see that new pages have been created.

We can open the .ts file that does not have “-generated.component.ts” in its name and safely make edits, knowing that they will not be overwritten by Radzen.