EdByrnee/Readme.md

## Readme.md

      
    Raw
  

              Readme.md
            
          
    Angular Material Dev Cheatsheet

Pre-development

Update the angular cli
ng update @angular/cli @angular/core
New project, install material
ng new projectname --style=scss --routing=true
ng add @angular/material
⚡ Speedy Development Packages

Schematics
npm install --save edbyrnee-mat-schematics
Components
npm install --save tfg-components
Rollup the install commands
ng update @angular/cli @angular/core && ng new projectname --style=scss --routing=true && cd projectname && ng add @angular/material && npm install --save edbyrnee-mat-schematics && npm install --save tfg-components
🌐 Main scss

`.page{
padding: 24px;
}
.content{
}
.fabs{
position: fixed;
bottom: 32px;
right: 12px;
}
.dialog-bg{
background: rgba(9,9,9,0.7);
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
.dialog{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}`
⚡ Quick common functionality app (CRUD)

Navigation functionality
Add angular material navigation (sidenav and navbar)
ng generate @angular/material:navigation navigation
Add a custom sidenav
??
Login functionality
Add a http intercept
schematics edbyrnee-mat-schematics:tfg-http-intercept
Add an auth service
schematics edbyrnee-mat-schematics:tfg-auth-service
CRUD object functionality
Create a page
schematics edbyrnee-mat-schematics:tfg-page --path users/users-list
Create a service
edbyrnee-mat-schematics:tfg-data-service
List some objects
schematics edbyrnee-mat-schematics:tfgdatatable --path=output/users/users-list --name=UsersList --columns=id*n,user_fullname*n,user_email*n