Angular PatternFly 4 Migration Guide

This wiki page will detail changes required to migrate your Angular-PatternFly applications from PatternFly 3 to 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#4.0.0-alpha

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, three directives have been removed:

• pfSelect - this can be replace with Angular UI Boostrap's uibDropdown
• 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.