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

Don Wibier's Blog
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.

Free DevExpress Products – Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We’ll be happy to follow-up.
richard morris
richard morris

nice.  

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

24 May 2016
Alberto Babel.NET
Alberto Babel.NET

Great news. Happy to have ng2 support.

24 May 2016
Michael Petrinolis
Michael Petrinolis

What about Aurelia?

24 May 2016
Geert Depickere
Geert Depickere

+1 for Aurelia

27 May 2016
Allen Shiels
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
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
javad kaef

What about React and Aurelia?

7 June 2016
Ramila Herath
Ramila Herath

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

8 June 2016
INullable
INullable

Are there any plans to support Aurelia?

8 June 2016
Marion (DevExpress Support)
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)
Marion (DevExpress Support)

@Ramila Herath

Yes

15 June 2016
Jeremy Fensch
Jeremy Fensch

When is 16.1 official release planned?

20 June 2016
Allen Shiels
Allen Shiels

Thanks for the info Marion.

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

23 June 2016
Mar De La Mano
Mar De La Mano
Allen Shiels
Allen Shiels

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

24 June 2016
Johan Lindberg
Johan Lindberg

+1 for Aurelia

26 June 2016
Kobus Smit 1
Kobus Smit 1

+1 for Aurelia!

2 August 2016
Kevon Houghton 1
Kevon Houghton 1

Support Aurelia please!

11 August 2016
Goran Maricic
Goran Maricic

+1 for Aurelia

14 August 2016
Jayson Valentino
Jayson Valentino

Cool.. \m/

6 September 2016
Pankaj Parkar
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
Tom Mcd

+1 Aurelia support

1 November 2016

Please login or register to post comments.