PrimeNG 1.0.0-beta.16 Released
PrimeTek is glad to announce the new update for PrimeNG featuring the new confirmDialog component, native slider, accessibility improvements and more.
Angular 2.0 Final
First of all, congratulations to Angular team for releasing 2.0 final, we’ve been working on it since the early alphas as an early adopter and witnessed the great amount of work put in to the framework. Beta16 is tested against 2.0 final and fully supports it.
ConfirmDialog
ConfirmDialog is a reusable dialog backed by a service to make confirmation of actions easier than ever. See the live demo for an example.
1 |
import {ConfirmDialogModule,ConfirmationService} from 'primeng/primeng'; |
1 2 3 |
<p-confirmDialog header="Confirmation" icon="fa fa-question-circle" width="425"></p-confirmDialog> <button type="text" (click)="confirm()" pButton icon="fa-check" label="Confirm"></button> |
1 2 3 4 5 6 7 8 9 10 11 12 13 |
export class ConfirmDialogDemo { constructor(private confirmationService: ConfirmationService) {} confirm() { this.confirmationService.confirm({ message: 'Are you sure that you want to perform this action?', accept: () => { //Actual logic to perform a confirmation } }); } } |
To display the dialog, get an instance of confirmationService and call confirm method by passing several options including the accept callback that will actually perform the action. Great thing is the ability to use the same dialog over and over by other actions on the same component. Under the hood a Observables and RxJS is utilized to communicate between the caller and the dialog.
Native Slider
Slider was using jQuery UI slider and we’ve reimplemented it as a native component to avoid this dependency. The apis are same so there is no backward compatibility issue. We’ll also redo calendar and inputmask as native components in upcoming releases to remove jquery dependency of these components. p-schedule based on FullCalendar will remain as the only component of PrimeNG with jquery dependency.
Accessibility
We’re constantly improving support for specifications like section 508 to add keyboard and screen reader compatibility. Beta16 brings improvements to components such as tabview, accordion, checkbox, radiobutton, paginator and sortable datatable headers.
Breaking changes
- Tree template requires pTemplate with node type
- click event of RadioButton is renamed to onClick
Full Changelog
- New ConfirmDialog Component
- Compatibility Check with Angular 2.0 Final
- Fixes: DataTable columns reorder doesn’t work in FF #464
- Add expanded property to TreeNode
- Rename click of RadioButton to onClick
- Add applyFocus() method to dropdown
- Native slider without jQuery UI
- Disabled support in model driven forms
- Multiple templates for Tree
- Add disabled to menuitem
- Open fileupload request before onBeforeUpload for header modification
- Slide animation for PanelMenu Toggle
- Enhancement request: Keyboard support for radio buttons
- Two way binding support for Accordion Tab Selected property
- Two way binding support for Panel collapsed state
- Keyboard support for Paginator
- Keyboard support for DataTable sort headers
- Keyboard and Screen reader support for TabView
- Keyboard and Screen reader support for Accordion
- Add programatic tree expansion
Roadmap
Our plan is to release the first release candidate at the end of october after removing jquery from calendar and inputmask, along the way we’ll look at popular requests like custom components inside datatable filters and others. 1.0 final will follow the RCs and our estimate is november 2016 for it. Most of the APIs are already stable and no major breaking changes are expected. After 1.0, we have tons of work to do such as new spreadsheet component, recaptcha, image cropper, frozen columns-rows for datatable, block ui, color picker, knob.
Ultima
Ultima is the best seller admin template at PrimeStore and we’re currently porting it to PrimeNG, we plan to release Ultima for PrimeNG by the end of september. Checkout the PrimeFaces version for a preview.