Introduction

SaaS Theme is an Angular admin template, which is based on the Angular 8+, NgRx and ready-to-use REST API.

SaaS Theme uses unique UI components, created for Angular applications, which allows it to be easily customized so that you can build your own app quickly.

SaaS Theme is built on NgRx store - RxJS powered state management for Angular applications, inspired by Redux. Store is a controlled state container designed to help write powerful, consistent applications on top of Angular.

All styles are fully developed with SCSS and easy to understand and customize.

Technologies

  • Angular
  • Angular CLI
  • Bootstrap
  • Npm
  • Sass
  • CSS3 Animations
  • Typescript
  • Google fonts

Getting started

This template is built with angular-cli and requires Node(v10.15.0+) and NPM(v6.4.1+) to be installed.

Installing prerequisites

Node.js and NPM: You can download Node.js from https://nodejs.org. NPM comes bundled with Node.js

angular-cli: You can install angular-cli by executing from your terminal npm install -g @angular/cli. More details can be found here https://github.com/angular/angular-cli

Installing npm packages

Before you start, you'll need to install all of the required packages and dependencies. Open folder with theme in terminal and run npm install.

Then run ng serve to start dev server. By default, it will run at http://localhost:4200/.

Customization

Main app's settings

You can change the main app's settings at src/environments/settings.ts.

Sass settings

All style files can be found at src/assets/sass. For changing styles of the app, you can go to _variables.scss, which contains all color schemas and main parameters of the app. Main scss file is located in src/assets/sass/style.scss.

Routing and main menu

Routing

Router file located insrc/app/routing/routing.module.ts.

For adding a new routing path, add new path with bound to it component to ROUTES or DEFAULT_ROUTES array. Example:

...
{ path: 'your-routing-path', component: ComponentName }
...

Also, the routing module contains several routers array for different layouts, if you need a specified path to specific layout.

First, create the routers array that should be bound to your layout:


const YOUR_LAYOUT_ROUTES: Routes = [
 { path: '404', component: PageNotFoundComponent},
 { path: '500', component: PageInternalErrorComponent}
];

And add this array to ROUTES array defining your layout component and router path:


export const ROUTES: Routes = [
{
 path: 'your-layout-path',
 component: YourLayoutComponent,
 children: YOUR_LAYOUT_ROUTES
}];



Main menu

Main menu configuration file located in src/assets/data/menu.json. You can customize the main menu here.

Menu item interface can be found at src/app/interfaces/menu.ts


Main menu item contains next parameters:

Parameter Description
icon Name of material icon (parameter is required). Icons list can be found here
routing Routing path of item
title Title of item (parameter is required)
active State of menu item
filters List of filters that can be applied
divider If true, menu item will have divider item above
desktop If true, item will be displayed only at desktop and tablet resolutions

Menu filters are applied to query params of the page, and can be obtained using Angular Router api. More info can be found here. Filter interface provided bellow:


export interface IFilter {
  active?: boolean;
  title: string;
  value: string;
  color: string;
}

  
Parameter Description
active If true, filter will be used
title Text that will be displayed at menu
value Value that will be provided as filter to query parameter
color Color of circle badge before filter text at menu

{
  "title": "Tasks",
  "icon": "view_agenda_outline",
  "routing": "tasks",
  "filters": [
   {
     "title": "Active",
     "value": "Active",
     "color": "#FFB946"
   },
   {
     "title": "Completed",
     "value": "Completed",
     "color": "#2ED47A"
   },
   {
     "title": "Ended",
     "value": "Ended",
     "color": "#F7685B"
   }
  ]
}

Menu item with 3 filters

 
{
  "title": "Dashboard",
  "icon": "dashboard_outline",
  "routing": "dashboard"
}

Menu item without filters

UI components

IMPORTANT: For the full list of UI components, please view the live demo and select "UI elements" on the main nav.

Badge

Small count and labeling component

Example usage:


<tc-badge>Badge text</tc-badge>

Components parameters

Parameter Type Description
View string Set one of the predefined styles for the badge. Possible options: purple, yellow, green, red, darkBlue.

Button

Button component contain various options in styling. Such as align, color, backround color and more. Also contains several predifined buttons styles

Example usage:


<button tc-button>Button text</button>

Components parameters:

Parameter Type Description
block boolean If true, button takes up all available space
disabled boolean If true, button is disabled
view string Set one predefined color for the button. Possible options: default, error.
type string Set one of predefined styles for the button. Possible options: accent, secondary, tertiary.

Circle badge

Small labeling component

Example usage:


<tc-circle-badge [color]="'#109CF1'">Circle badge label</tc-circle-badge>

Component parameters:

Parameter Type Description
color string Custom circle badge color
view string Set one of predefined color option to badge. Possible options: purple, green, yellow, red
size string Set badge size to one of predefined sizes. Possible options: sm, md, lg. Default: md
custom size string Custom badge size. Install badge diameter in px

Permission select

Example usage:


<tc-select [options]="selectOptions" [value]="user.permission"></tc-select>

Component parameters:

Parameter Type Description
value string Initial selected value
options ISelectOption[] Array of options that will be displayed in select. ISelectOption interface van be found below
 
export interface ISelectOption {
  text: string;
  value: string;
  view: string;
}
 
Parameter Description
text Text value that will be displayed as option title
value value that will be emitted to when option selected
view View that will be applied to select when option will be selected. Possible options: gray, darkBlue, yellow.

Material components

Project uses next material components:

  • Card
  • Checkbox
  • Dialog
  • Input
  • Icons
  • Menu
  • Select
  • Tabs
  • Textarea

Documentation for all of these components can be found at official documentation

Chat

Angular chat ui

Example usage:


<app-chat></app-chat>

Chat component works with the following data types:


export interface IChatResponse {
  id: string;
  avatar?: string;
  title?: string;
  membersIds: string[];
  messages: IMessage[];
}

export interface IChat {
  id: string;
  avatar?: string;
  title?: string;
  members: IUser[];
  messages: IMessage[];
}

export interface IMessage {
  text: string;
  date: string;
  sender: string;
  status: MessageStatus;
}

export interface IUser {
  id: string;
  name: string;
  avatar: string;
  permission?: string;
  firstName?: string;
  role?: string;
  lastName?: string;
  email?: string;
  phone?: string;
  city?: string;
  state?: string;
  country?: string;
  company?: string;
}

All necessary chat data comes from the chat service. Chat services makes http request to receive all data. Url can be changed in chat.service.ts file. All data provided as observables.

Questions? Contact [email protected]