Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/patternfly/patternfly-ng
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.
https://github.com/patternfly/patternfly-ng
Last synced: 12 days ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/patternfly/patternfly-ng
- Owner: patternfly
- License: mit
- Created: 2017-03-08T21:55:44.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-04-29T15:52:54.000Z (6 months ago)
- Last Synced: 2024-10-01T06:23:49.667Z (about 1 month ago)
- Language: TypeScript
- Homepage: http://www.patternfly.org/patternfly-ng
- Size: 99.4 MB
- Stars: 88
- Watchers: 24
- Forks: 55
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# DEPRECATED
This project is no longer active. Please see [patternfly-react](https://github.com/patternfly/patternfly-react) for React based components.
# PatternFly-Ng
[](https://travis-ci.org/patternfly/patternfly-ng) [](https://github.com/semantic-release/semantic-release)
Welcome to PatternFly-Ng. This is a library of common Angular 6 components for use with the PatternFly 3 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][contributing].
- 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
```
2. Install patternfly-ng
```bash
npm install patternfly-ng --save
```
3. Add patternfly-ng dependencies
- install `patternfly`
```bash
npm install patternfly --save
```
4. Add a patternfly-ng component
- open `src/app/app.module.ts` and add
```typescript
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
```json
"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
```
```
5. 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
```json
"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",
],
```
2. To enable charts, add patternfly-settings.js from the patternfly package
- open `angular.json` and insert a new entry into the scripts array
```json
"scripts": [
"./node_modules/patternfly/dist/js/patternfly-settings.js"
],
```
## Do you have a question?
- Search our [GitHub issues][github-issues]
- Join our patternfly-ng channel on [Slack](http://slack.patternfly.org)
- Join our mailing-list following the instructions on [patternfly.org](http://www.patternfly.org/community/)
[contributing]: https://github.com/patternfly/patternfly-ng/blob/master/CONTRIBUTING.md
[github-issues]: https://github.com/patternfly/patternfly-ng/issues