patternfly-ng

A collection of PatternFly Angular components and other useful things to be shared.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
patternfly-ng
8804.5.25 years ago7 years agoMinified + gzip package size for patternfly-ng in KB

Readme

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 pagecontributing.
  • Web site: https://www.patternfly.org
  • API Docs: http://www.patternfly.org/patternfly-ng/
  • Build Status: https://travis-ci.org/patternfly/patternfly-ng.svg?branch=master

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
```bash npm i -g @angular/cli ng new patternfly-ng-app cd patternfly-ng-app ng serve ```
  1. Install patternfly-ng
```bash
  npm install patternfly-ng --save
```
  1. Add patternfly-ng dependencies
- install patternfly
```bash
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?

- Search our GitHub issuesgithub-issues - Join our patternfly-ng channel on Slack - Join our mailing-list following the instructions on patternfly.org