patternfly-ng
TypeScript icon, indicating that this package has built-in type declarations

4.5.2 • Public • Published

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';
...
 
@NgModule({
   ...
   imports[ToastNotificationModule, ... ],
    ... 
})
  • open angular.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>
  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"[
        "./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
  • open angular.json and insert a new entry into the scripts array
      "scripts"[
        "./node_modules/patternfly/dist/js/patternfly-settings.js"
      ],

Do you have a question?

Package Sidebar

Install

npm i patternfly-ng

Weekly Downloads

141

Version

4.5.2

License

MIT

Unpacked Size

5.75 MB

Total Files

715

Last publish

Collaborators

  • adamviktora
  • bennyp
  • dlabaj
  • ausuliv
  • dgutride
  • dlabrecq
  • patternfly-build
  • jeff-phillips-18
  • mturley
  • mwcz
  • kylebuch8
  • evwilkin
  • schulj12
  • nicolethoen
  • heymp
  • zhawkins