ng-responsive-spa-lib v0.0.2

NgResponsiveSpaLib

A SASS UI framework for rapid development of responsive Single Page Applications. Uses Angular Material and Angular FlexLayout.

This framework can be used to streamline development of responsive layout and dynamic menu and forms.

Installation

The library is available as npm package, so all you need to do is run the following command:

 npm install --save ng-responsive-spa-lib;

This command will create a record in your package.json file and install the package into the npm modules folder.

Getting Started

First thing you need to do is to import the ng-responsive-spa-lib module into your app module.

import { NgResponsiveSpaLibModule } from 'ng-responsive-spa-lib';

// ...
@NgModule({
  imports: [
    // ...
    
    NgResponsiveSpaLibModule,
    
    // ...
  ],
  declarations: [ ... ]
})
// ...

Configure Responsive Header and Menu

To configure the header and menu we must import NgResponsiveSpaLibService and FrameworkConfigSettings in app.component.ts file.

import { NgResponsiveSpaLibService } from 'ng-responsive-spa-lib';
import { FrameworkConfigSettings } from 'ng-responsive-spa-lib';

We we are ready to configure the header and menu by passing the config object to the service. The config object can contain three properties: title, menuItems, and socialIcons.

constructor(configService: NgResponsiveSpaLibService) {
    const frameworkConfig: FrameworkConfigSettings = {
      title: "Title",
      menuItems: [
        {
            text: 'MenuItem1',
            route: '/menuItem1',
            icon: 'iconName'
        },
        {
            text: 'MenuItem2',
            route: '/menuItem2',
            icon: 'iconName',
            submenu: [
                { 
                    text: 'SubmenuItem1',
                    route: '/menuItem2/submenu1/view',
                    icon: 'iconName'
                },
                { 
                    text: 'SubmenuItem1',
                    route: '/menuItem2/submenu2/view',
                    icon: 'iconName'
                },
            ]
        }
      ],
      socialIcons: [
        {imageFile: 'assets/link/to/file.svg', alt: 'Facebook', link: 'http://www.facebook.com'},
        {imageFile: 'assets/link/to/file.svg', alt: 'Instagram', link: 'http://www.instagram.com'},
        {imageFile: 'assets/link/to/file.svg', alt: 'Youtube', link: 'http://www.youtube.com'}
      ]
    };
    configService.configure(frameworkConfig);
  }

Config Object

Menu Item Config Object

Optional config to create responsive menu with ability to add sub menu. Currently submenu items cannot have submenu items. | Property | Description | | --- | --- | | text | Accepts string that will be used as the menu item label | | route | Accepts string representing route path of menu item| | icon | Accepts path string of icon file. Optional config to display icon next to menu item | | submenu | Accepts an array of menu item objects that will pop up when parent menu item is highlighted |

Social Icons Config Object

Optional config to display social icons on the right side of the header that will redirect user to configured route.

Add Framework Component to Template

In app.component.html:

<rsl-ng-responsive-spa-lib></rsl-ng-responsive-spa-lib>

Sign In / Register Components

To configure the signin and register components user must create a service that extends UserApi and provide UserApi as this service. Below UserService represents the newly created service.

import { NgResponsiveSpaLibModule, UserApi } from 'ng-responsive-spa-lib';
// ...
@NgModule({
  imports: [ ... ],
  declarations: [ ... ],
  providers: [{ provide: UserApi, useExisting: UserService }],
})
// ...

This is an example of what the service would look like:

@Injectable({
  providedIn: 'root'
})
export class UserService implements UserApi {
  isLoggedIn = true;
  constructor() { }

  signIn(username: string, password: string, rememberMe: boolean): Observable<boolean> {
    ... // code that handles signIn and returns boolean observable 
  }

  signOut(): Observable<boolean> {
    ... // code that handles signOut and returns boolean observable 
  }

  changePassword(username: string, oldPassword: string, newPassword: string): Observable<boolean> {
    ... // code that handles changePassword and returns boolean observable 
  }

  register(userInfo: UserInfo): Observable<boolean> {
    ... // code that handles register and returns boolean observable
  }

}

Dynamic Forms

The dynamic form component rsl-dynamic-form takes three inputs and has two outputs. The three operations available are: view, edit, and create.

If using dynamic forms we must configure the component route to accept an operations param:

App Routing Module

{ path: 'profile/:operation', component: SampleFormComponent},
{ path: 'profile', redirectTo: 'sampleComponent/view', pathMatch: 'full'},

Template:

<rsl-dynamic-form
    [viewModel]="model"
    [formFields]="fields"
    [operation]="operation$ | async"
    (update)="update($event)"
    (create)="create($event)">
</rsl-dynamic-form>

Component

export SampleFormComponent implements OnInit {

  model;
  operation$: Observable<string>;
  fields = fieldsConfig;

  constructor(
    private dataService: AppDataService,
    private router: Router,
    private route: ActivatedRoute) { }

  ngOnInit() {
    // fetching operation observable from url
    this.operation$ = this.route.params.pipe(map(p => p.operation));
    
    // fetching the form model provided that its not a create operation
    this.dataService.getData().subscribe(data => this.model = data);
  }

  update = (data) => {
    // Handle update operation
    // In this case we are navigating back to the view mode
    this.router.navigate(['../view'], { relativeTo: this.route });
  }

  create = (data) => {
      // Handle create operation
  }

}

Inputs/Outputs

Form Fields Config Object

Example:

export const formFields = [
  {
    key: 'id',
    type: 'string',
    label: 'ID',
    validations: [Validators.required],
    errorMsgs: { 'required': 'You must enter a value'}
  },
  {
    key: 'firstName',
    type: 'string',
    label: 'First Name',
    validations: [Validators.required],
    errorMsgs: { 'required': 'You must enter a value'}
  },
  {
    key: 'lastName',
    type: 'string',
    label: 'Last Name',
    validations: [Validators.required],
    errorMsgs: { 'required': 'You must enter a value'}
  },
  {
    key: 'userName',
    type: 'string',
    label: 'User Name',
    validations: [Validators.required]
  },
  {
    key: 'email',
    type: 'string',
    label: 'Email',
    validations: [Validators.required, Validators.email],
    errorMsgs: { 'required': 'You must enter a value', 'email': 'Not a valid email'}
  },
  {
    key: 'password',
    type: 'string',
    label: 'Password',
    validations: [Validators.required]
  },
];