PrimeNG 4.1.0-RC3 Released
PrimeTek is pleased to announce the 3rd release candidate of PrimeNG 4.1.0 featuring 80 improvements.
Issue Tracker Maintenance
After RC1, we’ve started reviewing all the issues at GitHub, that is why the number of changes are high for an RC. However we’re very satisfied with the end result, there are currently around 280 open issues, 28 of them are confirmed minor defects and rest are enhancements or feature requests. Quality of PrimeNG has been drastically improved in the last 4 weeks with over 200 filed enhancements in total.
Immutable vs Mutable
Removal of ngDoCheck was a controversial change and after discussion with our community, we’ve decided to add it back but with a configuration option called immutable. Data components like DataTable either uses setter based checking or ngDoCheck to realize if the underlying data has changed to update the UI. This is configured using the immutable
property, when enabled (default) setter based detection is utilized so your data changes such as adding or removing a record should always create a new array reference instead of manipulating an existing array as Angular does not trigger setters if the reference does not change. For example, use slice instead of splice when removing an item or use spread operator instead of push method when adding an item. On the other hand, setting immutable property to false removes this restriction by using ngDoCheck with IterableDiffers to listen changes without the need to create a new reference of data. Setter based method is faster however both methods can be used depending on your preference. Note that immutable property also defines how DataTable treats the data, for example when immutable is enabled sorting does not mutate the original data but creates a new array of sorted data.
New Features and Enhancements
- Immutable property for data components
- Added events zoom_changed and map dragend to GMap
- Added double click event for TreeTable
- Compatibility for Scrollable and Responsive datatable
- Customized paginator position
- Optimize MultiSelect event bindings
- Dialog positioning improvement
- Add an onClick event for individual growl messages
- Simplify menuitem command handling
- Make use of direct child selection in CSS where possible/reasonable
- Improve overflow hidden on DataTable
- Remove placehoder in non-empty multiple autocomplete
- ConfirmDialog focus button when it opens
- Remove ui-dialog-buttonpane
- Bootstrap theme overrides anchor link colors with priority
- inputStyle and inputStyleClass for Chips
- Use a DataTable with resizableColumns and scrollable may cause unresponsive web page or lag css animation
- PanelMenu – Feature Request – Customise Styles
- Add type property to Spinner
- Chip duplicate handling
- modal dialogs should prevent the background from being scrollable
- appendTo property to TieredMenu component
- Accordion component padding issues in bootstrap theme
- Custom content for horizontal megamenu
- Custom content for menubar
- Pass rowIndex to column template (pTemplate=”rowexpansion”)
- Calendar needs “onClose” event
- Add filterMaxlength property to column
- activeIndex for Accordion
Defect Fixes
- Carousel throws ExpressionChecked error on Angular 4.2.x
- DataTable – ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: ‘NaNpx’. Current value: ‘352px
- Multiselect component fails with ChangeDetectionStrategy.OnPush
- Left tooltip position fails
- Autocomplete inputtext content not shown
- Custom sorting breaks pagination
- Calendar displayed value not updated on blur
- Memory leak in accordion
- InputSwitch throws expression was checked error with Angular 4.2.x
- color picker in reactive forms doesn’t select color
- Dropdown onChange fires on re-selection of same item
- Error in DataTable with ContextMenu
- Menubar event emmiter broken after hide and show
- Datatable reset method doesn’t emit onLazyLoadEvent
- ExpressionChangedAfterItHasBeenCheckedError in radioButton on reactive form
- Autocomplete empty text when lost focus
- Slider: Highlights surrounding text with mouse
- MultiSelect value support objects
- Bootstrap theme calendar
- Tree – DragDrop makes mistakes when dragging downwards in between other nodes
- p-confirmdialog is not centered to browser
- DataTable filter is not cleared when ::-ms-clear is clicked
- Datatable totalRecords is not updated after calling the resetMethod
- DataTable filter input deletes characters during typing
- Footer Group not displayed on scrollable datatable
- Calendar should allow valid blank/null value
- PanelMenu animation broken on fast click
- FileUpload remove method throwing error on Firefox
- Editable dropdown caret jumps
- Styleclass for TreeNode fails for Horizontal Tree
- p-calendar bug with IE11
- Calendar clicking on button icon not opening calendar IE9/IE10
- Custom filter selection apply sort
- Data table with filter and sort does not work with headerColumnGroup
- Data-table scroll disappears when filtering in a field shown by width scroll
- Datatable is not updated inside an expansiontemplate
- FileUpload multiple file drag when multiple set to false
- AutoComplete box-shadow issue while nested in Panel
- DataTable Column with Template onRowClick/onRowSelect not firing
- Datatable nested datatable not showing header
- [iOS only] Dropdown Autocmoplete doesn’t show suggestions by clicking on dropdown button
- p-dialog Bootstrap footer style issue with PrimeNG 4.0
- FileUpload firefox problem
- p-gmap in hidden containers fails
- Editor’s onTextChange event is sending the wrong value for “source”
- Focused dropdown reveals blinking cursor iOS
- Organization Chart – no lines, empty leafs, etc. for Bootstrap theme
- Orderlist header alignment issues
- Picklist header alignment issues
- can’t to add filter for columns in p-headerColumnGroup tag
Download
PrimeNG is licensed under MIT license and available for download at NPM
Angular 4.2
PrimeNG 4.1 brings official support to Angular 4.2 wbich introduced some issues like this that also caused problems with a couple of components. We’ve now tested everything with Angular 4.2 and demo also runs on it.
Test Suite
We’re working a new test suite that both contains unit and e2e tests for the components, initial version will be open sourced by mid july.
Accessibility (Section 508)
A compatibility matrix will be available soon to document accessibility support of each component in terms of grades such as A (excellent), B (moderate), C (weak). Then we’ll start improving the ones that get B and C grades. Same goes for RTL support as well.
Premium Templates
All available templates will be updated in mid july for compatibility with PrimeNG 4.1. There are no breaking changes but new components may need styling like OrganizationChart.
4.1.0 Final
Final release is due 5th of July.
Roadmap
Regarding new components, next in line is spreadsheet, we’ll also add shift key selection for DataTable, dynamic component loading for Dialog, TreeTable scrolling-resizing, more RTL enabled components and enhanced screen reader support via ARIA. Another important upcoming feature is “css helpers” to group forms, inputs, buttons which also introduces general typography.
We’re extremely happy with the adoption rate and the current 120K monthly downloads and have reached our end of 2017 targets already. This is very exciting because we’re just getting started.
