Repository files navigation

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

Do you need an illustration for your explanations and tutorials ? Or maybe an alternative way of pagination ?Are you usingangular to build wonderful pwa ?You favorite front-end framework isangular 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 eachstep 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 issuehere

If did you this project, supportangular-material-extensionsby starring ⭐ and sharing it 📢

• Demo
• Dependencies
• Peer Dependencies
• Additional Requirements - material (Include a theme)
• Additional Requirements - material icons
• Installation
• Usage
• Documentation
• Run Demo App Locally
• Other Angular Libraries
• Support
• License

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

• Angular (requires) tested with V9

• if you are still using angular v5 or lower, please use the following version1.2.1

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

• angular animations v7.x
• angular material v7.x
• angular cdk v7.x

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 useangular schematics like e.g:

ng add @angular/material

• angular material theme

• The easiest way to import material design icons is to provide a link in yourindex.html file like below:

<linkhref="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

2. Import them in yourangular.json file

"styles": ["styles.css","../node_modules/material-design-icons/iconfont/material-icons.css"      ],

Install above dependencies vianpm.

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

npm install --save @angular-material-extensions/pages

Note:If you are usingSystemJS, 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 slightlydifferent 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]})exportclassAppModule{}

Other modules in your application can simply importMatPagesModule:

import{MatPagesModule}from'@angular-material-extensions/pages';@NgModule({declarations:[OtherComponent, ...],imports:[MatPagesModule, ...],})exportclassOtherModule{}

The easiest way is to add

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

to youstyles.css files

learn more

The easiest way is to add

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

to youindex.html files

learn more

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 elementswhich 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>

Please checkout the full documentationhereor follow the officialtutorial

• clone this repo by running

$ 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 onhttp://localhost:4200/

• ngx-auth-firebaseui
• @angular-material-extensions/pages
• @angular-material-extensions/password-strength
• @angular-material-extensions/contacts
• @angular-material-extensions/faq
• @angular-material-extensions/combination-generator

• ngx-auth-firebaseui
• ngx-linkifyjs
• @firebaseui/ng-bootstrap
• @angular-material-extensions/password-strength
• @angular-material-extensions/link-preview
• @angular-material-extensions/google-maps-autocomplete
• @angular-material-extensions/contacts
• @angular-material-extensions/jumbotron
• @angular-material-extensions/faq
• @angular-material-extensions/fab-menu
• @angular-material-extensions/select-country
• @angular-material-extensions/combination-generator

• Drop an email to:Anthony Nahas and I will help you
• or open an appropriateissue
• let us chat onGitter

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