DevExtreme: Angular 2 Support CTP (Coming soon in v16.1)

We’ve had so many questions about using the DevExtreme Widgets in Angular 2 that there could only be one answer:

In our v16.1 release, DevExtreme supports Angular 2!

What does this mean?

This first release of our DevExtreme Angular 2 widgets will be a Community Technical Preview (CTP). This means, like Angular 2 being in beta, that it is not production ready but that we want you to try it out and send us your feedback.

How does it work?

If you are familiar with Angular 2, or have at least followed its tutorials, you will already be familiar with DevExtreme’s support for it.

To render a button with a static text value:

<dx-button text="Simple button"></dx-button>

<dx-button (onClick)="handler()"></dx-button>

One-way binding

If we want changes to the value of ‘bindingProperty’ of the host component to propagate to the value of the dxTextBox widget, a one-way binding approach is used:

<dx-text-box [value]="bindingProperty"></dx-text-box>

Two-way binding

In addition to the one-way binding, we can also perform two-way binding, which propagates changes from the bindingProperty to the widget or vice versa from the widget to the bindingProperty:

<dx-text-box [(value)]="bindingProperty"></dx-text-box>

Custom Templates

In case you want to customize the rendering of a DevExtreme widget, we support custom templates. These templates integrate nicely in the Angular 2 template syntax.

<dx-button>
   <div *dxTemplate="#This=data of 'template'">
       <div class="custom-button-template"> {{This.text}} </div>
   </div>
</dx-button>

Please note that in the above sample, the button template data is referenced by the local ‘This’ variable. This ‘This’ variable exposes the templates data object.

Angular 2 Forms support

One of the really nice features of Angular 2 is the simplification of working with forms. Some cool out-of-the-box features are: two-way data binding, change tracking, validation and error handling. You can read more about it here.

The DevExtreme Angular 2 widgets support the ‘ngModel’ binding as well as the ‘ngControl’ directive, which are necessary for the Angular 2 forms features.

<form  [ngFormModel]="form">
        <dx-text-box 
            [(ngModel)]="email" 
            [isValid]="emailRef.valid || emailRef.pristine"
            [validationError]="{ message: 'Email is invalid'}"
            ngControl="email" 
            #emailRef="ngForm">
        </dx-text-box>
</form>

@Component({
   selector: 'my-app',
   templateUrl: "app/app.component.html",
   directives: [
       DxTextBox,
       DxTextBoxValueAccessor,
   ]
})
export class AppComponent implements OnInit {
   email: string;
   form: ControlGroup;
   ngOnInit() {
       this.form = new ControlGroup({
           email: new Control('', Validators.compose([Validators.required, CustomValidator.mailFormat]))
       });
   }
}

How to get it?

We are going to make the DevExtreme Angular 2 integration open sourced. Once we have published the v16.1 release, we will make our GitHub repository public. From that point you will always be able to get the latest version, issue pull requests, and fork the code if needed.

Roadmap

Once Angular 2 is finally released – presumably in a couple of months – we will mark our widgets as moving from CTP to being in beta, with an official release targeted for v16.2.

Free DevExpress Products – Get Your Copy Today