Open source library for angular apps to illustrate custom material pages content with steps (ideal for tutorials and explanations purposes)
This Github project has been transferred to the angular material extensions monorepo angular-material-extensions/components
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!
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 :star: and sharing it :loudspeaker:
View all the directives and components in action at https://angular-material-extensions.github.io/pages
1.2.1
This project has been renamed from @angular-material-extensions/pages to @angular-material-extensions/pages
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
index.html
file like below:<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
npm i -s material-design-icons
angular.json
file"styles": [
"styles.css",
"../node_modules/material-design-icons/iconfont/material-icons.css"
],
Install above dependencies via npm.
Now install @angular-material-extensions/pages
via:
npm install --save @angular-material-extensions/pages
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 {
}
The easiest way is to add
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
to you styles.css
files
The easiest way is to add
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
to you index.html
files
This library consists of 4 essential components.
mat-pages
the main container that hold the pages incl. the outlook view and the content
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)
mat-page-outlook
the outlook view of a page. This can contain a custom component, custom layout or just a title.
mat-page-content
this is the content view of the page. This can be anything!!
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>
Please checkout the full documentation here or follow the official tutorial
$ git clone https://github.com/angular-material-extensions/pages.git
$ gulp link
$ gulp build
$ cd demo
$ npm i
$ npm run start
or
$ ng serve --open
http://localhost:4200/
Copyright (c) 2018 Anthony Nahas. Licensed under the MIT License (MIT)