Skip to content

Angular PatternFly 4 Migration Guide

David Taylor edited this page May 26, 2017 · 13 revisions

This wiki page will detail changes required to migrate your Angular-PatternFly applications from Angular-PatternFly 3 to Angular-PatternFly 4.

Dependency management

npm

Upgrade your PatternFly dependency using the npm command:

$ npm install --save patternfly@next

bower

Upgrade your PatternFly dependency using the bower command:

bower install --save patternfly#3.25.0

angular-ui-bootstrap

Angular-PatternFly v4.0.0 updates it's angular-ui-bootstrap dependency to v2.3.x. Post angular-ui-bootstrap v0.14.0 all angular-ui-bootstrap components are prefixed with 'uib-'. Angular-patternfly v4.0.0 has prefixed all of it's angular-ui-bootstrap components. You may have to prefix angular-ui-bootstrap components in your application. Please see Prefix Migration Guide for more information.

Directive to Component Re-factor

In PatternFly 4 the Angular 1.x directives were refactored to Angular 1.5+ components. The naming convention has remaing the same, but all attribute directives will need to be changed to component tags, as in:

<div pf-about-modal ...></div>

would become:

<pf-about-modal ...></pf-about-modal>

Exceptions (these are still attribute directives):

  • pfRemainingCharsCount
  • pfFocused
  • pfValidation
  • pfFixedAccordion

A list of all PatternFly 4 components and their attributes can be seen in the Angualr-PatternFly docs: http://www.patternfly.org/angular-patternfly/

Directives removed

In PatternFly 4, two directives have been removed:

  • pfDatepicker - this can be replaced with Angular UI Bootstrap's uibDatepicker
  • pfDateTimepicker - currently there is no non-jquery support for this component

Optional jQuery dependency

The angular patternfly code has been adjusted to use the non-JQuery patternfly settings. To keep this jQuery independence, include only patternfly-settings.js rather than patternfly.js.

Angular-PatternFly v3.0 to v4.0 ChangeLog

Enhancements

  • Updated lodash dependency to 4.x
  • Updated angular-bootstrap dependency to 2.3.x
  • Dropped 1.3.x support for dependencies: angular, angular-animate, angular-sanitize, and angular-mocks

Bug Fixes

  • Update layout for sort, filter, and toolbar to match patternfly markup

Breaking Changes

  • pfInlineNotification - pfNotificationRemove function added which ties the click event of the close button to a user specified function. Previously, this used to be hardcoded to use the Notifications service, this is now optional.
  • pfListView - If defined, actionButton class will replace 'btn-default'. Previously it was appended. (Issue #434)
Clone this wiki locally