Introduction

Healthcare is an Angular admin template, which is based on the Angular 11+, Bootstrap 5+, NgRx and ready to use REST API.

Healthcare use unique UI components, created special for Angular application, which allows it to be easily customized so that you can build your own app quickly.

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

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

It is really appropriate template for Doctors, Dentists, Hospitals, Health clinics, Surgeons and medical organization. It is purpose oriented design with a responsive layout and special features such as wonderful clinic dashboards, appointment manager and appointment forms, doctors list and doctor profile, department management, patients list and patient profile, payment manager, and many more. But this template can be used for all type of web applications like custom admin panel, project management system, admin dashboard, application backend, CMS, or CRM.

Technologies

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

Core features

  • Unlimited navbar colors
  • 5 different layouts
  • Data tables
  • Vertical/horizontal navbar
  • Fully Responsive Layout
  • Light/dark sidebar
  • Light/dark topbar
  • Easy to customize
  • 3 icon packs
  • Employee management
  • And many moreā€¦

Medicine features

  • Clinic dashboards
  • Appointments management
  • Add/edit appointment
  • Doctors management
  • Add/edit doctor
  • Doctor profile
  • Departments management
  • Patients management
  • Add/edit patient
  • Payments management
  • Add/edit payment
  • Add/edit payment
  • Authorization process
  • Invoices management
  • Events timeline
  • Events calendar

Unique UI Angular components

  • Alert
  • Autocomplete
  • Avatar
  • Badge
  • Button
  • Card
  • Checkbox
  • Contact
  • Dropdown
  • Form description
  • Form group
  • Form label
  • Icon
  • Input
  • Modal window
  • Pagination
  • Radio
  • Rating
  • Select
  • Switcher
  • Table
  • Textarea
  • Vertical timeline

All pages

  • Medicine
    • Dashboard
    • Appointments
    • Doctors
    • Doctor profile
    • Departments
    • Department
    • Patients
    • Patient profile
    • Payments
  • UI Kit
    • Components
      • Alerts
      • Autocompletes
      • Badges
      • Buttons
      • Cards
      • Checkboxes
      • Contacts
      • Inputs
      • Modal windows
      • Radio buttons
      • Ratings
      • Selects
      • Switchers
      • Textareas
      • Vertical timeline
    • Icons
      • Icons options
      • Icofont icons
      • Simple line icons
    • Typography
    • Tables
      • Simple
      • Ant design
      • Sorting
      • Search
      • Filtering
      • Pagination
    • Forms
      • Elements
      • Layouts
      • Validation
    • Charts
      • Ng2 charts
      • Ngx charts
      • Ngx echarts
    • Maps
      • Google map
      • Leaflet map
      • World map
  • Apps
    • Service pages
      • Invoices
      • Pricing
      • Edit account
      • User profile
      • Events timeline
      • Events calendar
    • Sessions
      • Sign in
      • Sign up
      • 404
      • 500

Getting started

This template is built with angular-cli and requires Node(v12.18.1+) and NPM(v6.14.5+) 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 start you'll need to install 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 main app's settings in 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, as it 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 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 routing module contains several routers array for different layouts, if you need to specify path to a specific layout.

Firstly create a routers array, the one that you want to 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 main menu from here.

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


Main menu item contains next parameters:

Parameter Description
Title Title of menu item (parameter is required)
Routing Routing path of item
Icon Class name of items icon
Active State of menu item
Sub Array of subitems of the item

{
  "title": "Dashboard",
  "icon": "icofont-dashboard-web",
  "sub": [
    {
      "title": "Dashboard 1",
      "routing" : "dashboard1"
    },
    {
      "title": "Dashboard 2",
      "routing" : "dashboard2"
    },
    {
      "title": "Dashboard 3",
      "routing" : "dashboard3"
    }
  ]
}

Menu item with 3 sub items

 
{
  "title" : "Users",
  "icon"  : "icofont-ui-user",
  "routing" : "users"
}

Menu item without sub items

UI components

Autocomplete

Input control with dropdown list with suggested results.


<tc-autocomplete
  [placeholder]="'Placeholder of the input'"
  [data]="menuItems" [key]="'title'"
><tc-autocomplete>

Autocomplete parameters:

Parameter Type Description
data Array<any> Objects or string array from which suggested results will be taken. If provided as object array require 'key' parameter
key string Speciefied field of object from which suggested results will be taken.
listColor string Set dropdown list text-color
listBg string Set list background color
listAccentColor string Set highlight color of suggesed part

Also tc-autocomplete component extend tc-input component, and all tc-input parameters are available for using with tc-autocomplete.

Badge

Small count and labeling component

Example usage:


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

Components parameters

Parameter Type Description
View string Set one of predefined styles for badge. Posible options : default, accent, success, warning, info, error.
Size string Define badge component size

Button

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

Example usage:


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

Components parameters:

Parameter Type Description
block boolean If true button take all available space
disabled boolean If true button is disabled
outline boolean If true button becomes outline
gradient boolean If true button can have custom gradient as background
icon-animation boolean Enable icon animation
align string Button text align
size string Button component size
view string Set one of predefined styles for button. Posible options : default, accent, success, warning, info, error.
shape number | string Set border-radius for button
tcLineStyle string Set border-style for button

Card

Card is content container with various options in design and content placement.

Example usage:


<tc-card [title]="'Standart Card With Title'">
 Text that will be displayed in card content.
</tc-card>

Components parameters:

Parameter Type Description
title string Set card title
align string Set text align to card content and title
img string Path to img that will be added above content
bgImg string Path to img that will be card background
bgColor string Set color of card background
borderColor string Set one of predefined styles for card. Posible options : default, accent, success, warning, info, error.
borderWidth number Set width of card border in pixels
overflow boolean If true overflow is visible
padding number Set the padding of card content in pixels
view string Set one of predefined card styles

Checkbox

Checkbox usage example:


<tc-checkbox>Checkbox label</tc-checkbox>

Components parameters

Parameter Type Description
label string Set label of checkbox
disabled boolean If true checkbox is disabled
value boolean Initial value of checkbox
bgColor string | string[] Set background color of checkbox. If given as array also aply parameters to hover, focus and disabled in this order: 1) hover 2) focus 3) disabled
color string | string[] Set color of checkbox mar. If given as array, then also apply parameters to hover, focus and disabled in this order: 1) hover 2) focus 3) disabled
labelColor string | string[] Set the color of checkboxes label. If given as array also aply parameters to hover, focus and disabled in this order: 1) hover 2) focus 3) disabled

Contact

Contact component helps to briefly display user information. This component requires user data as parameter. Data must be provided in folowing format:


export interface IUser {
 img: string, 
 name: string,
 role: string,
 email: string, 
 phone: string,
 location: string
}

Example usage:


<tc-contact [user]="user"></tc-contact>

Dropdown

Dropdown is toggleable menu that is used to display list or another content

Usage example:


<tc-dropdown class="item" [close]="closeDropdown">
 <tc-dropdown-button>
 <button> Button or other component to trigger drodown</button>
 </tc-dropdown-button>

 <tc-dropdown-content>
 // Content of dropdown
</tc-dropdown-content>
 </tc-dropdown>

Inside this component must be called tc-dropdown-button and tc-dropdown-content. First for triggering dropdown, second as container for dropdown content

Dropdown parameters:

Parameter Type Description
Opened EventEmitter<boolean> Emmitter to chan</element-selector>

tc-dropdown-content parameters:

Parameter Type Description
overlay boolean If true make dropwon apear over above the content
offset number[] Array of dropdown list ofsets
animation string Apply animation to dropdown list apearing
align string Set text align to dropdown content
width number | string Set width of dropdown content
maxWidth number | string Set max-width of dropdown conntent
maxHeight number | string Set max-height of dropdown content
bg string Set background-color of the dropdown content.

Form description

Component that provide description to form elements

Usage example:

 
<tc-input [placeholder]="'With description'"></tc-input>

<tc-form-description>Input description</tc-form-description>

Form group

Component that helps to group form elements.

Usage example:

 
<tc-form-group>
  <tc-input></tc-input>
</tc-form-group>

Form label

Component that provide label to form elements

Usage example:

 
<tc-form-label>Input label</tc-form-label>
<tc-input [placeholder]="'With label'"></tc-input>

Vertical timeline

Usage example:


<tc-v-timeline [data]="data" ></tc-v-timeline>

All timeline data must be passed into tc-v-timeline as data parameter and implement interface ITimelineBox:


export interface ITimelineBox {
  sectionLabel: string;
  sectionData: ITimeline[];
}

export interface ITimeline {
  date: string;
  content: string;
  title: string;
  icon?: string;
  iconBg?: string;
  iconColor?: string;
}

Timeline component parameters:

Parameter Type Description
align string Set align of timeline items
data ITimelineBox[] Data that will be displayed on timeline

Icon

Usage example


<tc-icon
  [iconClass]="'icofont-notification'"
  [tcFontSize]="20"
></tc-icon>

tc-icon parameters:

Parameter Type Description
iconClass string Set class for icon
padding string | number Set padding fro icon

Input

Usage example:


	<tc-input [innerValue]="'Value'"></tc-input>

Input parameters :

Parameter Type Description
type string Speciefied type of data that user wll be able to enter
name string Set name of the input
placeholder string Set placeholder of the input
charLimiting number Set maximum numbers of chars
prefix string | string[] Set prefix of the input text
sufix string | string[] Set suffix value of input text
prefixIcon string | string[] Set class for prefix icon. Icon apear if this parameter is set.
suffixIcon string | string[] Set class for suffix icon. Icon apear if this parameter is set.
size string Set size of the input. Posible options: 'sm', 'lg'
required boolean If true make input required
autosize boolean If true make input automaticaly change it's size if needed
innnerValue string Set inner value of the input
bgColor string | string[] Set background color of the input. If given as array apply each parameter on default state, on hovered,on focus,on disabled state in next order: 1) default, 2)hover, 3) focus, 4) disabled
borderColor string | string[] Set border-color of the input. If given as array apply each parameter on default state, on hovered,on focus,on disabled state in next order: 1) default, 2)hover, 3) focus, 4) disabled
color string | string[] Set text-color of the input. If given as array apply each parameter on default state, on hovered,on focus,on disabled state in next order: 1) default, 2)hover, 3) focus, 4) disabled

Radio button

Usage example:


<tc-radio>
 <tc-radio-option [name]="'radio1'" [value]="'val1'"></tc-radio-option>
 <tc-radio-option [name]="'radio1'" [checked]="true" [value]="'val2'"></tc-radio-option>
</tc-radio>

To display options inside radio component you need to pass tc-radio-option component.

Parameters of tc-radio :

Parameter Type Description
direction string Set direction of radio buttons

tc-radio-option parameters:

Parameter Type Description
checked boolean If true set radio button to checked
disabled boolean If true set radio button disabled
name string Set name of radio button to it's value
label string Label of radio button
value string Value of radio option
bgColor string | string[] Set backgroudn color of radio button. If given as array apply each parameter on default state, on hovered,on focus,on disabled state in next order: 1) default, 2)hover, 3) focus, 4) disabled
color string | string[] Set color of radio button. If given as array apply each parameter on default state,on hovered,on focus,on disabled state in next order: 1) default, 2)hover, 3) focus, 4) disabled
labelColor string | string[] Set color of radio button label. If given as array apply each parameter on default state, on hovered,on focus,on disabled state in next order: 1) default, 2)hover, 3) focus, 4) disabled

Select

Usage example:


<tc-select [placeholder]="'Select placeholder'" [options]="data" ></tc-select>

All options must passed as data parameter and implement following interface :


export interface IOption {
  value: string;
  label: string;
  disabled?: boolean;
}

tc-select parameters :

Parameter Type Description
color string Set text color of select box
bg string Set background color of select box
borderColor string Set border-color of select box
shape number | string Set border-radius of select box
listColor string Set text color of dropdown list
listBg string Set background color of dropdown list
listBorderColor string Set border-color of dropdown list
listShape number | string Set border-radius of dropdown list
options Array<IOption > List of options that will be displayed in dropdown list
multiple boolean If true enable multi select
allowClear boolean If true makes button 'clear' visible select. Button 'clear', can be enabled only in single select
disabled boolean If true makes select disabled
placeholder string Placeholder message that will be displayed in select box
notFoundMsg string Message that will be displayed in dropdown list if there is no options to select

Switcher

Usage example:


<tc-switcher>Checkbox label</tc-switcher>

Parameters of component

Parameter Type Description
disabled boolean If true set switcher to disabled
label string Label of the switcher
name string Name of the switcher
value boolean Initial value of switcher
bgColor string | string[] Set backgroudn color of switcher. If given as array apply each parameter on default state, on hovered,on focus,on disabled state in next order: 1) default, 2)hover, 3) focus, 4) disabled
color string | string[] Set color of switcher. If given as array apply each parameter on default state,on hovered,on focus,on disabled state in next order: 1) default, 2)hover, 3) focus, 4) disabled
labelColor string | string[] Set color of switcher button label. If given as array apply each parameter on default state, on hovered,on focus,on disabled state in next order: 1) default, 2)hover, 3) focus, 4) disabled

Table

Usage example


<tc-table [rows]="rows" [config]="config">
 <tc-column [columnTitle]="'#'" [columnName]="'number'"> </tc-column>
 <tc-column [columnTitle]="'Person'" [columnName]="'person'"></tc-column>
 <tc-column [columnTitle]="'Phone'" [columnName]="'phone'"[enableSorting]="true">
 <ng-template #tableBodyTemplate let-value> <span class="nowrap"> {{ value }}</span> </ng-template>
 </tc-column>
</tc-table>

Table require data to be passed as rows parameter. Data example:


{
 "number": "1",
 "img": "",
 "person": "Ronald Hilbert",
 "position": "developer",
 "phone" : 	"+22 887 110 4587",
 "email" : "robhilbert@company.com"
},
{
 "number": "2",
 "img": "",
 "person": "Angela Simpson",
 "position": "digital artist",
 "phone" : 	"+22 886 112 4887",
 "email" : "angelasimpson@company.com"
}

Also table contain config object to manage sorting and filtering. By default sorting and filtering is enabled in table, but must be speciefied for each column. If you want to override this setting just pass new config as parametr. Table config structure is given below :


export interface ITableConfig {
 sorting?: boolean;
 filtering: {
  filterString?: string;
  filtering?: boolean;
 }
}

Table parameters:

Parameter Type Description
rows Array<any> Array with table data
config ITableConfig Global setting of table
pagination boolean If true enable pagination in table
itemsPerPage number Number of items that will be displayed on one page if pagination is enabled
bordered boolean If true add borders to all sides and cells
striped boolean If true add zebra-striping to rows
hovered boolean If true enable hover state on table rows
search boolean If true enable search in table and display input above the table
borderColor string Set border color of table
borderStyle string Set border-style of the table
contentBgColor string Set background color of table content
contentColor string Set text color of table content
headerBgColor string Set backgroud color of table header
headerColor string Set text color of table header
headerAlign string Set text align to header of the table
rowAlign string Set text align to content of the table

To display data at table you need to pass tc-column component with columnName parameter or custom data template

tc-column parameters :

Parameter Type Description
columnTitle string Displayed title of the column
columnName string Name of the value that will be taken from table data and displayed in column
enableFiltering boolean If true enable filtering in this column
enableSorting boolean If true enable sorting of this column

If you want to display non-text data or data not from data array just pass custom template into tc-column :


<tc-column [columnTitle]="'Your column name'" >
  <ng-template #tableBodyTemplate > // Your value or component ;</ng-template>
</tc-column>

In this case use #tableBodyTemplate for table body and #headerBodyTemplate for custom header.

If you want to modify or use data from cell or row define cell or row value in ng-template. To do so just define variable: let-variable, if you just define value it automatically get value from the cell or you can use let-variable="row" to define variable to row value and be able to acces data from others columns :



// Use let-value to get value of cell, in this case 'columnName' must be passed
<tc-column [columnTitle]="'Your column name'" [columnName]="ColumnName" >
  <ng-template #tableBodyTemplate let-value >  <button> {{ value }} </button> </ng-template> 
</tc-column>


// Use let-row="row" to get row value, then you able to acces values from other columns
<tc-column [columnTitle]="'Your column name'" >
  <ng-template #tableBodyTemplate let-row="row" > {{ row['columnName'] * row['anotherColumnName'] }} </ng-template>
</tc-column>


Textarea

Multiline input control

Usage example:


 <tc-textarea [placeholder]="'With placeholder'"></tc-textarea>

Textarea parameters:

Parameter Type Description
name string Set name of textarea
placeholder string Placeholder of text area
charLimiter number | ITextareLimiter Set maximum char number
required boolean If true make textarea required
innerValue string Set innerValue of textarea

UI directives

bg-color directive

Usage example:


<element-selector [tcBgColor]="'your color'"> </element-selector>

bg-color directive parameters :

Parameter Type Description
tcBgColor string | string[] Set bg color of the element. If given as array apply alternately each parameter for default and hover state.

border-color directive

Usage example :


<element-selector [tcBorderColor]="'your color'"> </element-selector>

border-color directive parameters :

Parameter Type Description
tcborderColor string | string[] Set border color of the element. If given as array apply alternately each parameter for default and hover state.

border-style directive

Usage example :


<element-selector [tcBorderStyle]="'dashed'"> </element-selector>

border-style directive parameters :

Parameter Type Description
tcborderstyle string | string[] Set border style of the element. If given as array apply alternately each parameter for default and hover state.

color directive

Usage example:


<element-selector [tcColor]="'your color'"> </element-selector>

color directive parameters :

Parameter Type Description
tcColor string | string[] Set text color of the element. If given as array apply alternately each parameter for default and hover state.

font-size directive

Usage example:


<element-selector [tcFontSize]="'12px'"> </element-selector>

font-size directive parameters :

Parameter Type Description
tcFontSize string | number Set font size of the element

gradient directive

Usage example :


<element-selector [tcGradient]="['first color','second color']"></element-selector>

gradient directive parameters :

Parameter Type Description
tcGradient string[] Apply gradient background to element.

shape directive

Usage example:


<element-selector [tcShape]="15">  </element-selector>

shape directive parameters :

Parameter Type Description
tcShape number | string Set element border-radius .