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.
TypeScript HTML JavaScript CSS Ruby
seanforyou23 and dlabrecq feat(copy-updates): align copy component impl with latest designs (#444)
improve tests
fix tooltip flutter
add tooltip for copy buttons
use input element for copy value container
remove redundant triggers
clean up view templates
use obj for storing common values in copyBase

add project flag to tslint script to avoid "rule requires type information" warning
use readonly input instead of span so copy value is scrollable
use tooltipText input prop instead of tooltip to avoid namespace collision
both focus and hover can launch a tooltip
specify body for container attribute to fix tooltip styling issues
avoid breaking changes by setting buttonAriaLabel to buttonLabel value when passed in
update tests to use new property name
Latest commit 37b8a88 Aug 10, 2018
Permalink
Failed to load latest commit information.
config chore(dependencies): update dev-dependencies (#432) Jul 27, 2018
resources/community-meetings Added Aug 22 community meeting information Aug 29, 2017
src feat(copy-updates): align copy component impl with latest designs (#444) Aug 10, 2018
.editorconfig Initial project structure Mar 14, 2017
.gitignore Added code coverage and stylelint and minor cleanup (#430) Jul 26, 2018
.npmrc chore(dependencies): update dev-dependencies (#432) Jul 27, 2018
.stylelintrc chore(build): added LESS linter (#417) Jul 2, 2018
.travis.yml Travis build update (#427) Jul 24, 2018
CONTRIBUTING.md chore(): updated contribution guide regarding rawgit (#429) Jul 26, 2018
LICENSE.txt Initial creation of contribution and product readmes Jun 28, 2017
README.md Replaced NotificationModule by ToastNotificationModule (#445) Aug 10, 2018
deploy_key.enc Updated deploy key Jul 12, 2017
gulpfile.js fix(build): package adjustments for semantic release update (#426) Jul 24, 2018
karma.conf.js Initial project structure Mar 14, 2017
package.json chore(demo): ensure events are of appropriate type before setting act… Aug 8, 2018
tsconfig-aot.json chore(build): removed gulp-ngc for future Angular 6 support (#411) Jun 29, 2018
tsconfig-demo.json BREAKING CHANGE: updated to Angular 6, ngx-bootstrap 3, ngx-datatable… Jun 30, 2018
tsconfig-prod.json fix(build): package adjustments for semantic release update (#426) Jul 24, 2018
tsconfig.json WIP: Add support for UMD and es2015 bundles (#373) Jun 22, 2018
tslint.json chore(tslint): enabled ordered imports Dec 1, 2017
typedoc.json Initial project structure Mar 14, 2017
webpack.config.js Initial project structure Mar 14, 2017

README.md

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>

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?