The Angular Material Baum Project

A strongly opinionated Angular Application Schematic using NgRx, Angular Flex Layout and Angular Material.

The Showroom

See the result of this project in action:

• The application on https://angular-mat-baum.web.app
• The source code on https://github.com/baumblatt/angular-mat-baum-showroom

Getting started with the Baum schematics

Create a new Angular project without an application and add angular-mat-baum to generate your Baum App.

ng new my-baum-wks --create-application=false
cd my-baum-wks
ng add angular-mat-baum my-baum-app
ng serve --open=true

Go further with your Baum App, create a future module, a second slice, two containers, one dialog and one `bottom-sheet.

cd projects/my-baum-app/src/app
ng g angular-mat-baum:module fruits --slice=juices
cd fruits
ng g angular-mat-baum:slice candies
ng g angular-mat-baum:component containers/juices --type=container --route=juices
ng g angular-mat-baum:component containers/candies --type=container --route=candies
ng g angular-mat-baum:component components/juices-detail --type=dialog
ng g angular-mat-baum:component components/cadies-detail --type=bottom-sheet

Compatibility Table

| CLI | Typescript | Baum | |:--------|:----------:|:-----------------:| | 10.0.x | ~3.9.5 | 1.0.0-beta.1-13 |
| 10.1.x | ~4.0.2 | 1.0.0-beta.14-17 | | 11.x | ~4.0.2 | 1.0.0-beta.18 | | 12.x | ~4.3.2 | 12.0.0-beta.19 | | 13.1.1 | ~4.5.2 | 13.0.0-beta.20-23 | | 14.2.13 | ~4.7.2 | 14.0.0-beta.24-25 |

Please, choose the Angular Baum version as compatibility table above.

The angular-mat-baum Schematics

Add

Add the library to your project, this schematic will install dependencies and run Application schematic.

how to use:

ng add angular-mat-baum [app-name]

Application

Create an Angular application in angular-mat-baum opinionated style.

This schematic will create an application with 4 modules (App, Core, Shared, Material), A layout component with Material SideNav and Angular Flex Layout, Light and Dark Material themes, NgRx Store configured with Router State and DevTools and a few actions and effects like Loading and Snack Bars.

how to use:

ng g angular-mat-baum:app [app-name]

Flavors:

| Option | Description | |:----------|:-------------------------------------------------------------| | name | The name of the your application. | | prefix | A prefix to apply to generated selectors. | | skipTests | When true, does not create spec.ts test files for the app. |

Component

Creates a new component definition in the given or default project.

The component could be a container that will have the module store injected on your constructor, an Angular Material dialog, an Angular Material bottom sheet or just a simple component. All type of component will have an Angular Material scss theme imported under correspond module.

Optionally a route to the component could be created with route options, available for types component ou container.

Flavors:

| Option | Description | |:-------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------| | name | The name of the component. | | path | The path at which to create the component file, relative to the current workspace. Default is a folder with the same name as the component in the project root.. | | project | The name of the project. | | viewEncapsulation | The view encapsulation strategy to use in the new component. | | prefix | The prefix to apply to the generated component selector. | | type | Define each kind of component to be created, use component, container, dialog or bottom-sheet. | | skipTests | When true, does not create spec.ts test files for the app. | | selector | The HTML selector to use for this component. | | skipSelector | Specifies if the component should have a selector or not. | | module | The declaring NgModule. | | export | When true, the declaring NgModule exports this component. | | route | The route path for the component in the feature module router. | | lintFix | When true, applies lint fixes after generating the component. |

how to use:

ng g angular-mat-baum:component component-name [--type container|component|dialog|bottom-sheet]

Module

Create a feature module in angular-mat-baum opinionated style.

This module will have an equivalent router module, a NgRx feature store, an entry component of type container, an Angular Material scss theme file that will be imported on Core module style and will be used to import the module components.

Optionally the module store can be created with a store slice using the same option name, please see slice schematic for more details.

how to use:

ng g angular-mat-baum:module module-name

Flavors:

| Option | Description | |:----------|:--------------------------------------------------------------------------| | name | The name of the NgModule. | | path | The path at which to create the NgModule, relative to the workspace root. | | project | The name of the project. | | lintFix | When true, applies lint fixes after generating the module. | | slice | When present, create a slice of the Store with this name. |

Slice

Creates a new Store slice in angular-mat-baum opinionated style.

A Slice Store is a set of actions, effects, reducers and selectors that will tied under an action reducer map entry of the feature module state.

how to use:

ng g angular-mat-baum:slice [slice-name] [--name slice-name]

Flavors:

| Option | Description | |:----------|:-------------------------------------------------------------------------------------------------------| | name | The name of the slice of the store feature. | | entity | The state of the slice will implemented using ngrx@entity. Could be the entity name or interface path. | | path | The path used to find the NgModule, relative to the workspace root. | | project | The name of the project. |