@genesis-frontend/docs NPM

GENESIS - Never write same thing again

Ready to use Component and Modules Library for Angular 2+

Features

UX Modules
Security Module

Development

npm install
npm run build:commons
npm run build:ux

Usage

Client: - ng new client - Install UX dependencies

cd client && npm install  @angular/animations @angular/cdk @angular/material hammerjs ng-material-multilevel-menu material-design-icons @angular/flex-layout

Install state management - it's needed for Security Module

npm install @ngrx/store @ngrx/entity @ngrx/effects --save

install @genesis-frontend/frontend

npm i @genesis-frontend/frontend --save

Make your main NgModule look like:

import { ModuleWithProviders, NgModule } from '@angular/core';
import { FlexLayoutModule } from '@angular/flex-layout';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule, Routes } from '@angular/router';
import { UxModule } from '@genesis-frontend/ux';
import { EffectsModule } from '@ngrx/effects';
import { StoreModule } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { environment } from '../environments/environment';
import { AppComponent } from './app.component';
export const routes: Routes = [
  {
    path: 'security',
    loadChildren: './securityLoader.module#SecurityLoader'
  },
  { path: '**', redirectTo: 'security' }
];


const ModuleRouting: ModuleWithProviders = RouterModule.forRoot(routes);
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    UxModule,
    ModuleRouting,
    FlexLayoutModule,
    StoreModule.forRoot({}),
    EffectsModule.forRoot([]),
    StoreDevtoolsModule.instrument({
      maxAge: 25, // Retains last 25 states
      logOnly: environment.production, // Restrict extension to log-only mode
    }),
    BrowserAnimationsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Add file called securityLoader.module.ts with following content:

import { NgModule } from '@angular/core';
import { SecurityModule } from '@genesis-frontend/security';

@NgModule({
  imports: [
    SecurityModule
  ]
})
export class SecurityLoader { }

Add styles to your angular json

            "styles": [
              "node_modules/@genesis-frontend/frontend/ux/_theme.scss",
            ],