MatFortyTwo

The answer to everything (well... almost) that's Angular Material

Description

MatFortyTwo is a boilerplate for Angular Material that promotes a design with two separate navigation stacks. One at root level and one (with title and sidenav) accessible only after having logged in. It also packs a lot of perks to help you kickstart your Angular project in a matter of minutes!

Angular CLI Version: 8.0.1
Angular Material Version: 8.0.0

Perks

• Navigation Flow and guarded access for Pages
• Script to generate root/sidenav page
• Theming
• Complete authorization flow with Token
• Lazy Loaded Pages
• Pre-built responsive Sidenav Component and Login Page
• Linting with pre-commit check
• Many more coming soon...

You can just focus on the content of your application! If you use the built-in scripts for page generation, everything else will be taken care of for you!

Script Usage

This will generate a new component (PageNamePageComponent) with routing in src/app/pages/page-name

!!!Use kebab-case for page names!!!

# GENERATE A ROOT PAGE
npm run genpage -- -r page-name

# GENERATE A SIDENAV PAGE    
npm run genpage -- -n page-name

# GENERATE A PAGE THAT'S BOTH ROOT AND SIDENAV
npm run genpage -- -rn page-name

# GENERATE A CHILD SIDENAV PAGE
npm run genpage -- -c page-name

# GENERATE A SIDENAV PAGE WITH SPECIFIC ICON NAME (mat-icon)
# (The icon will be in the sidenav next to the tile of the page)
npm run genpage -- -n page-name -i home

If you want to edit further, you can find the generated routes in:
src/app/app-routing.module.ts - Root Page
src/app/nav-routing.ts - SideNav Page

About Child Sidenav Pages

Child Sidenav Pages are pages that are meant to be accessible only through navigation from a sidenav page. They will not appear in the list in the sidenav menu and will show a back button in the top bar that will send you to the parent page when clicked. They will also automatically highlight the parent item in the sidenav menu, even when accessed directly through URL.

Since children pages are always relative to a parent page, some additional configuration will be needed after running the script. The child route needs to be defined in the parent page's routing module. The data property for this new route needs to contain a title and a "isChild" attribute set to true.

Let's have a look at a practical example:
We have a sidenav page called "home-page" and we want a child page named "child-page" that we can access from "home-page" instead of the sidenav menu.

First, we run the script for child sidenav pages

npm run genpage -- -c child

Now that the page has been generated, we can see that it is not present in the sidenav menu list ( just as we expected ).

Next step is to add the child route in the "home-page" routing module

This is how the routes in your home-page-routing.module should look like:

const routes: Routes = [
    {
        path: '',
        data: { shouldReuse: true, key: 'home' },
        component: HomePageComponent,
    },
]

Simply add the new child route to this file like this:

const routes: Routes = [
    {
        path: '',
        data: { shouldReuse: true, key: 'home' },
        component: HomePageComponent,
    },
    {
        path: 'child',
        loadChildren: () =>
            import('../child-page/child-page.module').then(
                m => m.ChildPageModule,
            ),
        data: { title: 'Child', isChild: true },
    },
]

Now, if you navigate to YOUR_NAV_URL /home/child you should see a page with the title "Child", a back button that will redirect you to the home page and the child component being correctly rendered in the content container below.

NB: It is of course possible to define a page that's the child of a child, but it's essential to avoid to create any loop to previous pages because that will break your application.
It's also not necessary to define the isChild attribute for children at a deeper level, as this information will be passed through by the first one.

Theming

Simply go to src/variables.scss and change the values for font, primary, accent or warn color.

Screenshots

Login Page

Sidenav Page

Different Theme

variables.scss

- $my-app-primary: mat-palette($mat-red);
+ $my-app-primary: mat-palette($mat-blue);