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

23 May 2016

devx-angular2We’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>

To bind the button’s click event:
 
<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.

23 comment(s)
richard morris

nice.  

I look forward to being able to migrate to Angular2 now :)

24 May, 2016
Alberto Babel.NET

Great news. Happy to have ng2 support.

24 May, 2016
Michael Petrinolis

What about Aurelia?

24 May, 2016
Geert Depickere

+1 for Aurelia

27 May, 2016
Allen Shiels

That's great news.

I've downloaded the 16.1.2 beta release. I don't see anything to do with Angular 2 in there though. How can I try this out?

Thanks

5 June, 2016
Allen Shiels

Hi

I've just tried the 16.1.3 beta now too. I still can't see anything Angular 2 related.

You said "it is not production ready but that we want you to try it out and send us your feedback". How can I try this?

For example, in your last code snippet above you are using the  DxTextBox directive. Where are you importing this from?

Thanks

Allen

6 June, 2016
javad kaef

What about React and Aurelia?

7 June, 2016
Ramila Herath

in the CTP would you have support for chart visualization components too?

8 June, 2016
INullable

Are there any plans to support Aurelia?

8 June, 2016
Marion (DevExpress Support)

@Allen Shiels

We are releasing CTP Angular 2 support in official version 16.1. Once v16.1 is officially released, the corresponding code will be published on our GitHub. Please wait for the 16.1 official release.

15 June, 2016
Marion (DevExpress Support)

@Ramila Herath

Yes

15 June, 2016
Jeremy Fensch

When is 16.1 official release planned?

20 June, 2016
Allen Shiels

Thanks for the info Marion.

16.1 has now been released. Where is the GitHub repo for Angular2?

23 June, 2016
Ángel Benito
Allen Shiels

The GitHub repository is there now, thanks (github.com/.../devextreme-angular2)

24 June, 2016
Johan Lindberg

+1 for Aurelia

26 June, 2016
Kobus Smit 1

+1 for Aurelia!

2 August, 2016
Kevon Houghton 1

Support Aurelia please!

11 August, 2016
Goran Maricic

+1 for Aurelia

14 August, 2016
Jayson Valentino

Cool.. \m/

6 September, 2016
Pankaj Parkar

Angular 2 got released on 15 sept, Now how can Implement devexpress Angular 2 licensed version in my current project?

5 October, 2016
Tom Mcd

+1 Aurelia support

1 November, 2016

Please login or register to post comments.