Angular PatternFly 4 Migration Guide

David Taylor edited this page May 30, 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


Upgrade your PatternFly dependency using the npm command:

npm install --save angular-patternfly@4.0.0


Upgrade your PatternFly dependency using the bower command:

bower install --save angular-patternfly#4.0.0


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 Angular-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:

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

Components added

In PatternFly 4, the following components have been added:

  • pfTableView - basic table with checkbox selection of rows, select all, pagination, row actions, etc... Can be used with pfToolbar to also use filtering, batch actions, and view switching (between list, card, and table views).
  • pfCanvasEditor - drag and drop items from a toolbox onto the canvas. Drag items to rearrange them on the canvas. Items can be connected to each other.
  • pfDonutChart - Shows relationship of a set of values to a whole.
  • pfEmptyState - Configurable empty state for List, Card, and Table views.

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


  • Updated lodash dependency to 4.x
  • Using LESS css preprocessing
  • 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)
  • pfSelect - No longer accepts ngOptions as a parameter. Please see the pfSelect documentation for usage.
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.