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.
- 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
This example demonstrates using the Angular-cli to get started with PatternFly-ng
- Installing angular-cli
Note: you can skip this part if you already have generated an Angular application usingng-cli
and webpack
npm i -g @angular/cli
ng new patternfly-ng-app
cd patternfly-ng-app
ng serve
-
Install patternfly-ng
npm install patternfly-ng --save
-
Add patternfly-ng dependencies
- install
patternfly
npm install patternfly --save
- Add a patternfly-ng component
- 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.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>
- 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",
],
- 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"
],
- Search our GitHub issues
- Join our patternfly-ng channel on Slack
- Join our mailing-list following the instructions on patternfly.org