Skip to content

Latest commit

 

History

History
158 lines (117 loc) · 8.24 KB

README.md

File metadata and controls

158 lines (117 loc) · 8.24 KB
Raw

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:

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.