Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Build Status semantic-release

Welcome to PatternFly-Ng. This is a library of common Angular components for use with the PatternFly reference implementation. Below is information on how to get started using PatternFly-ng. If you wish to contribute to PatternFly-ng, please go to our Contributions page.

Using PatternFly-ng In Your Application

This example demonstrates using the Angular-cli to get started with PatternFly-ng

  1. Installing angular-cli
    Note: you can skip this part if you already have generated an Angular application using ng-cli and webpack
npm i -g @angular/cli
ng new patternfly-ng-app
cd patternfly-ng-app
ng serve
  1. Install patternfly-ng

      npm install patternfly-ng --save
  2. Add patternfly-ng dependencies

  • install patternfly
  npm install patternfly --save
  1. Add a patternfly-ng component
  • open src/app/app.module.ts and add
import { ToastNotificationModule } from 'patternfly-ng/notification';
// Or
import { ToastNotificationModule } from 'patternfly-ng';

   imports: [ToastNotificationModule, ... ],
  • open angular.json and insert a new entry into the styles array
      "styles": [
  • open src/app/app.component.html and add
  [header]="'test header'"
  [message]="'this is a notification'"
  1. For Angular 8, open angular.json and insert the following into the options array
"options": {
  "preserveSymlinks": true,

Optional Dependencies

  1. To enable table drag and drop, add dragula.min.css from the ng2-dragula package
  • open angular.json and insert a new entry into the styles array
      "styles": [
  1. To enable charts, add patternfly-settings.js from the patternfly package
  • open angular.json and insert a new entry into the scripts array
      "scripts": [

Do you have a question?


The code for a set of Angular 6+ components for the PatternFly project. Note that the release/3.x branch supports Angular 4 and 5.







No packages published