ps
primeng-schematics
npm i primeng-schematics
ps

primeng-schematics

Prime NG schematics for Angular projects

by Andriy Malish

9.0.4 (see all)License:MITTypeScript:Not Found
npm i primeng-schematics
Readme

PrimeNG

PrimeNG schematics (V7)

npm version npm GitHub license

This project is inspired by Angular Material Schematics and adds PrimeNG (V7) support to your Angular (V7) project.

Create a new angular project with PrimeNG support

with npm init npm init primeng my-primeng-app

or yarn create yarn create primeng my-primeng-app No globally installed NPM modules are required. Executing one of these commands will:

  1. create a new Angular 7 project called "my-primeng-app" (angular ng-new schematic)
  2. add PrimeNg support to the newly created project (primeng-schematics add schematic) - ensure project dependencies in package.json - ensure project dependencies in your app module - add prebuilt PrimeNG theme into angular.json and styles.<EXTENSION> files - add Prime icons - add Flex grid - add Chart.js - run npm install
  3. create sample dashboard component (png g dbr schematic), which includes: - primeNG menubar (png g mb schematic) - six types of primeNG charts (png g chr --type schematic) - primeNG table (png g t schematic)
  4. run ng serve -o command

The newly created app should now look like (with rhea default theme): newly created rhea app

Any additional Angular NG NEW or PrimeNG ADD options may be passed along with this command: npm init primeng my-primeng-app --minimal --interactive false --theme luna-amber

Test your new app (if the app was created without --minimal flag): npm test

Global installs

You may install @angular/cli, and primeng-schematics globally, which will expose ng and primeng-schematics (along with its alias png) global executables respectively: npm i @angular/cli primeng-schematics -g

In further examples I will assume that these packages are installed globally. It is also possible to use local or temporary cached with npx packages. So instead of running

$ ng add c componentName

alternatives ways may be used:

# using npx
$ npx @angular/cli c componentName
# using local package (must be run from the project root)
$ npm run ng -- c componentName
# the same using npm bin (note use of back ticks)
$ `npm bin`/ng c componentName
# the same using relative path
$ node_modules/.bin/ng c componentName

Similarly, instead of running

$ png help

alternatives ways are:

# using npx
$ npx primeng-schematics help
# using local package (must be run from the project root)
$ npm run png -- help
# the same using npm bin (note use of back ticks)
$ `npm bin`/png help
# the same using relative path
$ node_modules/.bin/png c componentName

To see Angular NG NEW options run: ng new --help

To see PrimeNG ADD options run: png add --help

Change theme palette (even while app is running)

png theme

and then choose the theme from the dialog or pass it with --theme flag, for example: png theme --theme luna-amber

After switching to luna-amber palette, the app should look like switch to luna-amber theme

to see available themes: png theme help

Generator Schematics

In addition to the install, PrimeNG schematic module has currently six schematics it comes packaged with:

Each component schematic will create a new angular component that includes PrimeNG component. (ng g is an alias for ng generate)

$ ng g menubar <COMPONENT_NAME>

Organization chart schematics

$ ng g org-chart <COMPONENT_NAME>
$ ng g sidebar <COMPONENT_NAME>

Table

$ ng g table <COMPONENT_NAME> [--storage [none, session, local]]

Chart

$ ng g chart <COMPONENT_NAME> [--type [line, bar, doughnut, pie, polarArea, radar]]

Dashboard

$ ng g dashboard <COMPONENT_NAME>

You may also use png g command instead of ng g: png g dashboard my-dashboard

Too see components' aliases and options: png generate help

After executing one of these commands, a new angular component will be created with provided name. After this point you can add this new component to any existing component.

For example, assuming that you created <app-mb>, <app-oc>, <app-sb> and <app-t> components (menu bar, organization chart, side menu and table), you may modify your app.component.html file to something like:

<app-mb></app-mb>
<app-sb></app-sb>
<h1>
  Welcome to {{ title }}! 
</h1>
<app-oc></app-oc>
<app-t></app-t>

GENERAL HELP

png help

TODOS

  • Improve / fix / add tests
  • Implement ng-update schematic

Downloads/wk

118

GitHub Stars

15

LAST COMMIT

2yrs ago

MAINTAINERS

1

CONTRIBUTORS

5

OPEN ISSUES

0

OPEN PRs

5
VersionTagPublished
9.0.4
latest
2yrs ago
No alternatives found
No tutorials found
Add a tutorial