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
This project has been moved to @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 to build wonderful pwa ? You favorite front-end framework is angular material ?
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!
View all the directives in action at https://anthonynahas.github.io/ngx-material-pages
- Angular (requires Angular 2 or higher)
- if you are still using angular v5, please the following version
Peer Dependencies Requirements:
- angular animations
- angular cdk
- angular material
- angular material theme
- material icons
- if you need a built in theme --> please let me know
npm i -s @angular/animations @angular/material @angular/cdk
Install above dependencies via npm.
npm install --save ngx-material-pages
Note:If you are using
SystemJS, you should adjust your configuration to point to the UMD bundle. In your systemjs config file,
mapneeds to tell the System loader where to look for
Once installed you need to import the main module:
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
NB: please do not forget to import the angular animations module in your root component too! (usally app.component.ts)
Other modules in your application can simply import
The easiest way is to add
The easiest way is to add
Usage - Library's components
This library consists of 4 essential components.
ngx-material-pagesthe main container that hold the pages incl. the outlook view and the content
ngx-material-page-loaderthe container of each page. This component should have two nested elements which are the outlook and the content components (see below)
ngx-material-page-outlookthe outlook view of a page. This can contain a custom component, custom layout or just a title.
ngx-material-page-contentthis is the content view of the page. This can be anything!!
<!-- put your own outlook view for the first page --><!-- put your own content view for the first page --><!-- put your own outlook view for the second page --><!-- put your own content view for the second page -->
Where are ngx-material-pages being used ? Here are some examples
Other Angular Libraries
- Drop an email to: Anthony Nahas and I will help you
- or open an appropriate issue
- let us chat on Gitter
Copyright (c) 2018 Anthony Nahas. Licensed under the MIT License (MIT)