Skip to content
Open source library for angular apps to illustrate custom material pages content with steps (ideal for tutorials and explanations purposes)
CSS TypeScript HTML JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
.github
assets
config refactor(project): initial commit after generation Apr 8, 2018
e2e
projects/angular-material-extensions/pages
src
.editorconfig
.firebaserc
.gitignore
.travis.yml
.yo-rc.json
CHANGELOG.md
LICENSE
README.md
angular.json
browserslist
firebase.json fix(package): migrating the build system to angular cli Jul 23, 2019
greenkeeper.json chore: add Greenkeeper config file Jun 17, 2018
gulpfile.js fix(package): improved the schematics of the library Mar 28, 2019
karma.conf.js
package-lock.json
package.json
prerender.ts
protractor.conf.js
proxy.conf.json
server.ts fix(project): integration of angular universal Jul 25, 2019
static.paths.ts
tsconfig.app.json
tsconfig.json
tsconfig.server.json
tsconfig.spec.json
tslint.json fix(project): integration of angular universal Jul 25, 2019
webpack.config.js refactor(project): initial commit after generation Apr 8, 2018
webpack.server.config.js

README.md

@angular-material-extensions/pages - Open source library for Angular Apps to illustrate custom material pages content with steps (ideal for tutorials and explanation purposes) - Angular V8 supported

npm version npm demo Join the chat at https://gitter.im/angular-material-extensions/Lobby CircleCI branch Coverage Status dependency Status devDependency Status Greenkeeper Badge license Awesome

This Github project has been transferred to the angular material extensions monorepo angular-material-extensions/components

@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 ?

@angular-material-extensions/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!

Built by and for developers ❤️

Do you have any question or suggestion ? Please do not hesitate to contact us! Alternatively, provide a PR | open an appropriate issue here

If did you this project, support angular-material-extensions by starring ⭐️ and sharing it 📢

Table of Contents


Demo

View all the directives and components in action at https://angular-material-extensions.github.io/pages

Dependencies

  • Angular (requires) tested with V7
  • if you are still using angular v5 or lower, please use the following version 1.2.1

This project has been renamed from @angular-material-extensions/pages to @angular-material-extensions/pages

Peer Dependencies

learn more about angular material and cdk

if you need a built in theme --> please let me know

npm i -s @angular/animations @angular/material @angular/cdk

or use angular schematics like e.g:

ng add @angular/material 

Additional requirements Theme (Material Design)

Additional Requirements - Import the material design icons learn more

  • The easiest way to import material design icons is to provide a link in your index.html file like below:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  • alternative solution:
  1. Install of the official npm module of the material design icons
npm i -s material-design-icons
  1. Import them in your angular.json file
"styles": [
        "styles.css",
        "../node_modules/material-design-icons/iconfont/material-icons.css"
      ],

Installation

Install above dependencies via npm.

Now install @angular-material-extensions/pages via:

npm install --save @angular-material-extensions/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 @angular-material-extensions/pages:

map: {
  '@angular-material-extensions/pages': 'node_modules/@angular-material-extensions/pages/bundles/@angular-material-extensions/pages.umd.js',
}

Once installed you need to import the main module:

import { MatPagesModule } from '@angular-material-extensions/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 MatPagesModule .forRoot()):

NB: please do not forget to import the angular animations module in your root component too! (usally app.component.ts)

import { MatPagesModule } from '@angular-material-extensions/pages';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [MatPagesModule.forRoot(),
  BrowserAnimationsModule,
   ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

Other modules in your application can simply import MatPagesModule:

import { MatPagesModule } from '@angular-material-extensions/pages';

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [MatPagesModule, ...], 
})
export class OtherModule {
}

Add a material theme - help

The easiest way is to add

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

to you styles.css files

learn more

Add a material icons - help

The easiest way is to add

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

to you index.html files

learn more

Usage

This library consists of 4 essential components.

  1. mat-pages the main container that hold the pages incl. the outlook view and the content

  2. mat-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. mat-page-outlook the outlook view of a page. This can contain a custom component, custom layout or just a title.

  4. mat-page-content this is the content view of the page. This can be anything!!

  5. Example:

<mat-pages>
    <mat-page-loader>
      <mat-page-outlook>
        <!-- put your own outlook view for the first page -->
      </mat-page-outlook>
      <mat-page-content>
        <!-- put your own content view for the first page -->
      </mat-page-content>
    </mat-page-loader>
    <mat-page-loader>
      <mat-page-outlook>
        <!-- put your own outlook view for the second page -->
      </mat-page-outlook>
      <mat-page-content>
        <!-- put your own content view for the second page -->
      </mat-page-content>
    </mat-page-loader>
  </mat-pages>

Documentation

Please checkout the full documentation here or follow the official tutorial


Run Demo App Locally

$ git clone https://github.com/angular-material-extensions/pages.git
  • link the @angular-material-extensions/pages package
$ gulp link
  • build the library
$ gulp build
  • navigate to the demo app directory
$ cd demo
  • install the dependencies
$ npm i
  • run/start/serve the app
$ npm run start

or

$ ng serve --open
  • the app is now hosted on http://localhost:4200/

Where are @angular-material-extensions/pages being used ? Here are some examples

Other Angular Libraries


Support


License

Copyright (c) 2018 Anthony Nahas. Licensed under the MIT License (MIT)

You can’t perform that action at this time.