# ngx-material-pages - Open source library for Angular Apps to illustrate custom material pages content with steps (ideal for tutorials and explanation purposes) - Angular v6 supported
[](https://badge.fury.io/js/ngx-material-pages),
[](https://anthonynahas.github.io/ngx-material-pages)
[](https://gitter.im/angular-material-extensions/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
[](https://circleci.com/gh/AnthonyNahas/ngx-material-pages)
[](https://coveralls.io/github/anthonynahas/ngx-material-pages?branch=master)
[](https://david-dm.org/anthonynahas/ngx-material-pages)
[](https://david-dm.org/anthonynahas/ngx-material-pages#info=devDependencies)
[](https://greenkeeper.io/)
[](https://github.com/AnthonyNahas/ngx-material-pages/blob/master/LICENSE)
> This project has been moved to [@angular-material-extensions/pages](https://github.com/angular-material-extensions/pages)
Do you need an illustration for your explanations and tutorials ? Or maybe an alternative way of pagination ?
Are you using [angular](https://angular.io/) to build wonderful pwa ?
You favorite front-end framework is [angular material](https://material.angular.io/) ?
ngx-material-pages is the right UI component for you!
You build wonderful and comprehensive tutorials pages by providing an outlook and content for each
step of your explanation.
Try it out!
## Demo
View all the directives in action at https://anthonynahas.github.io/ngx-material-pages
## Dependencies
* [Angular](https://angular.io) (*requires* Angular 2 or higher)
- if you are still using angular v5, please the following version `1.2.1`
### Peer Dependencies Requirements:
### Requirements:
- [angular animations ](https://www.npmjs.com/package/@angular/animations)
- [angular cdk ](https://www.npmjs.com/package/@angular/cdk)
- [angular material ](https://www.npmjs.com/package/@angular/material)
- [angular material theme](https://material.angular.io/guide/getting-started#step-4-include-a-theme)
- [material icons](https://material.angular.io/guide/getting-started#step-6-optional-add-material-icons)
- if you need a built in theme --> please let me know
> This project has been renamed from [ngx-material-pages](https://www.npmjs.com/package/ngx-material-pages) to [@angular-material-extensions/pages](https://github.com/angular-material-extensions/pages)
## Install Peer Dependencies - [help](https://material.angular.io/guide/getting-started#step-1-install-angular-material-and-angular-cdk)
```bash
npm i -s @angular/animations @angular/material @angular/cdk
```
## Installation
Install above dependencies via *npm*.
Now install `ngx-material-pages` via:
```shell
npm install --save ngx-material-pages
```
---
##### SystemJS
>**Note**:If you are using `SystemJS`, you should adjust your configuration to point to the UMD bundle.
In your systemjs config file, `map` needs to tell the System loader where to look for `ngx-material-pages`:
```js
map: {
'ngx-material-pages': 'node_modules/ngx-material-pages/bundles/ngx-material-pages.umd.js',
}
```
---
Once installed you need to import the main module:
```js
import { NgxMaterialPagesModule } from 'ngx-material-pages';
```
The only remaining part is to list the imported module in your application module. The exact method will be slightly
different for the root (top-level) module for which you should end up with the code similar to (notice ` NgxMaterialPagesModule .forRoot()`):
NB: please do not forget to import the angular animations module in your root component too! (usally app.component.ts)
```js
import { NgxMaterialPagesModule } from 'ngx-material-pages';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@NgModule({
declarations: [AppComponent, ...],
imports: [NgxMaterialPagesModule.forRoot(),
BrowserAnimationsModule,
...],
bootstrap: [AppComponent]
})
export class AppModule {
}
```
Other modules in your application can simply import ` NgxMaterialPagesModule `:
```js
import { NgxMaterialPagesModule } from 'ngx-material-pages';
@NgModule({
declarations: [OtherComponent, ...],
imports: [NgxMaterialPagesModule, ...],
})
export class OtherModule {
}
```
## Add a material theme - [help](https://material.angular.io/guide/getting-started#step-4-include-a-theme)
The easiest way is to add
```css
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
```
to you `styles.css` files
[learn more](https://material.angular.io/guide/theming)
## Add a material icons - [help](https://material.angular.io/guide/getting-started#step-6-optional-add-material-icons)
The easiest way is to add
```html
```
to you `index.html` files
[learn more](https://google.github.io/material-design-icons/)
## Usage - Library's components
This library consists of 4 essential components.
1. `ngx-material-pages` the main container that hold the pages incl. the outlook view and the content
2. `ngx-material-page-loader` the container of each page. This component should have two nested elements
which are the outlook and the content components (see below)
3. `ngx-material-page-outlook` the outlook view of a page. This can contain a custom component, custom layout or just a title.
4. `ngx-material-page-content` this is the content view of the page. This can be anything!!
5. Example:
```html
```
## Where are ngx-material-pages being used ? Here are some examples
- [ngx-auth-firebaseui](https://ngx-auth-firebaseui.firebaseapp.com/getting-started)
- [ngx-material-pages](https://anthonynahas.github.io/ngx-material-pages/getting-started)
- [ngx-material-password-strength](https://anthonynahas.github.io/ngx-material-password-strength/getting-started)
- [ngx-material-contacts](https://anthonynahas.github.io/ngx-material-contacts/getting-started)
- [ngx-material-faq](https://anthonynahas.github.io/ngx-material-faq/getting-started)
- [combination-generator](https://anthonynahas.github.io/combination-generator/getting-started)
## Other Angular Libraries
- [ngx-auth-firebaseui](https://github.com/AnthonyNahas/ngx-auth-firebaseui)
- [@angular-material-extensions/password-strength](https://github.com/angular-material-extensions/password-strength)
- [@angular-material-extensions/contacts](https://github.com/angular-material-extensions/contacts)
- [@angular-material-extensions/cards](https://github.com/angular-material-extensions/cards)
- [@angular-material-extensions/faq](https://github.com/angular-material-extensions/faq)
- [@angular-material-extensions/combination-generator](https://github.com/angular-material-extensions/combination-generator)
## Support
+ Drop an email to: [Anthony Nahas](mailto:anthony.na@hotmail.de) and I will help you
+ or open an appropriate [issue](https://github.com/anthonynahas/ngx-material-pages/issues)
+ let us chat on [Gitter](https://gitter.im/angular-material-extensions/Lobby)
## License
Copyright (c) 2018 [Anthony Nahas](mailto:anthony.na@hotmail.de). Licensed under the MIT License (MIT)
---
_Source: https://npm.io/package/ngx-material-pages · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
