Options
All
  • Public
  • Public/Protected
  • All
Menu

PatternFly NG

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
    
  2. Install patternfly-ng

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

    • install patternfly
    npm install patternfly --save
    
  4. Add a patternfly-ng component

  5. open src/app/app.module.ts and add
import { NotificationModule } from 'patternfly-ng/notification';
// Or
import { NotificationModule } from 'patternfly-ng';
...

@NgModule({
   ...
   imports: [NotificationModule, ... ],
    ... 
})
  • open .angular-cli.json and insert a new entry into the styles array
      "styles": [

        "../node_modules/patternfly/dist/css/patternfly.min.css",
        "../node_modules/patternfly/dist/css/patternfly-additions.min.css",
        "../node_modules/patternfly-ng/dist/css/patternfly-ng.min.css",
        "styles.css",
      ],
  • open src/app/app.component.html and add
    <pfng-toast-notification
    [header]="'test header'"
    [message]="'this is a notification'"
    [showClose]="'true'"
    [type]="'success'">
    </pfng-toast-notification>
    

Optional Dependencies

  1. To enable table drag and drop, add dragula.min.css from the ng2-dragula package

  2. open .angular-cli.json and insert a new entry into the styles array

      "styles": [
        "../node_modules/dragula/dist/dragula.min.css",
        "../node_modules/patternfly/dist/css/patternfly.min.css",
        "../node_modules/patternfly/dist/css/patternfly-additions.min.css",
        "../node_modules/patternfly-ng/dist/css/patternfly-ng.min.css",
        "styles.css",
      ],
  1. To enable charts, add patternfly-settings.js from the patternfly package

  2. open .angular-cli.json and insert a new entry into the scripts array

      "scripts": [
        "../node_modules/patternfly/dist/js/patternfly-settings.js"
      ],

Do you have a question?

Generated using TypeDoc