What is Ng Super Sechematics Collection

It is a custom schematics collection, which allow you to generate scaffolded bunch of code, to reduce the efforts and time in development.

Table of Contents

• Installation
• Schematics
• Usage
• Output File Example
• Output Code

Installation

To install the component

npm i ng-super -s

Schematics

| Name | Description | | -------------- | ----------------------------------------------------------------------------------------------------------| | super-module | Generates Module, Module's Route, API Config, URL Resolvers, NGRX files for (CRUD) operations and filter, contains actions, reducers, effects, selectors and state, Service for (CRUD) operations. | | super-store | Generates NGRX files for (CRUD) operations and filter, contains actions, reducers, effects, selectors and state. |

Usage

Super Module

To use Super Module

 ng g ng-super:sm entity-name
 ng g ng-super:super-module entity-name

Super Store

to use super store

 ng g ng-super:ss entity-name
 ng g ng-super:super-store entity-name

This is extended to @schematics/angular, if you change the defaultCollection in angular.json to package you can use it without ng-super:

Output Files Example

Suppose we want to create new module called user-registration, you can run the command using the following

ng g ng-super:sm student-registration

the output of the files will be

CREATE src/app/student-registration/student-registration-routing.module.ts (272 bytes) CREATE src/app/student-registration/student-registration.module.ts (684 bytes) CREATE src/app/student-registration/configs/student-registration-api.config.ts (217 bytes) CREATE src/app/student-registration/resolvers/student-registration-details.resolver.ts (1118 bytes) CREATE src/app/student-registration/resolvers/student-registration-list.resolver.ts (1094 bytes) CREATE src/app/student-registration/services/student-registration.service.ts (942 bytes) CREATE src/app/student-registration/store/student-registration.actions.ts (5966 bytes) CREATE src/app/student-registration/store/student-registration.effects.ts (1733 bytes) CREATE src/app/student-registration/store/student-registration.reducers.ts (2787 bytes) CREATE src/app/student-registration/store/student-registration.selectors.ts (989 bytes) CREATE src/app/student-registration/store/student-registration.state.ts (307 bytes)

Output Code

Entity Module

In case you are disabling the store

Without Store

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { StudentRegistrationRoutingModule } from './student-registration-routing.module';

@NgModule({
  declarations: [],
  imports:[
    CommonModule,
    StudentRegistrationRoutingModule,
  ],
  exports:[],
  providers:[]
})
export class StudentRegistrationModule {}

With Store

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { StudentRegistrationRoutingModule } from './student-registration-routing.module';
import { StudentRegistrationReducers } from './store/student-registration.reducers';
import { StudentRegistrationEffects } from './store/student-registration.effects';

@NgModule({
  declarations: [],
  imports:[
    CommonModule,
    StudentRegistrationRoutingModule,
    StoreModule.forFeature('studentRegistration', StudentRegistrationReducers),
    EffectsModule.forFeature([StudentRegistrationEffects]),  ],
  exports:[],
  providers:[]
})
export class StudentRegistrationModule {}

Entity Routing Module

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class StudentRegistrationRoutingModule { }

Entity API's Configs

import { Injectable } from "@angular/core";

@Injectable({
  providedIn: 'root'
})
export class StudentRegistrationApiConfig {
  constructor() { }

  STUDENT_REGISTRATION = (id?: any): string => `/${id}`;
}

Entity Service

import { Injectable } from "@angular/core";
import { StudentRegistrationApiConfig } from '../configs/student-registration-api.config';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class StudentRegistrationService {
  constructor(private http:HttpClient,private api:StudentRegistrationApiConfig) {

  }

  getStudentRegistrationsList(payload?: any){
    return this.http.get(this.api.STUDENT_REGISTRATION());
  }

  getStudentRegistrationDetails(id:any){
    return this.http.get(this.api.STUDENT_REGISTRATION(id));
  }

  saveStudentRegistration(payload:any) {
    return this.http.post(this.api.STUDENT_REGISTRATION(),payload);
  }

  updateStudentRegistration(payload:any) {
    return this.http.put(this.api.STUDENT_REGISTRATION(),payload);
  }

  deleteStudentRegistration(id:any){
    return this.http.delete(this.api.STUDENT_REGISTRATION(id));
  }
}