Introduction

cuba Angular Theme is pure angular theme, Yes! you read correct, it's No Jquery angular admin theme including all feature and functionality with ease of integration for your project.cuba theme document will help you to understand angular from scratch to making perfect real time dream application.

Follow the documentation carefully for solving your issues in minutes, Apart from that if you don't find when you following the docs you can raise a support ticket from pixelstrap.freshdesk.com

• Angular-10
• Bootstrap-4
• SASS

Yes! again No Jquery dependency.

Features

• Angular, No Jquery Dependency
• Created with Angular CLI 10
• 6 Attractive Dashboard
• Attractive Charts using Google Charts, Chartist
• Map using Google map and Leaflet
• Editors
• Knowledge Base
• Job Search
• 8 Workable Application
  • E-commerce App with integration of Paypal and Stripe
  • Chat Application
  • To-do
  • Firebase To-do
  • Bookmark
  • Email
  • Calender
  • Attractive Gallery
• Sidebar variation (Default, Compact, Icon)
• Color Variation (Light and Dark Layout)
• RTL Support
• Error pages

Credits

• node.js
• Angular CLI
• Deployment
• Angular Bootstrap
• Perfect Scrollbar
• Toaster
• Tour
• Rating
• Alert
• Range Bar
• Image Cropper
• File Upload
• Date Picker
• Select
• Typeahead
• Smart Table
• Google Charts
• apex Charts
• ngx-Charts
• Chartist
• Google Map
• Leaflet Map
• Editor
• CK Editor
• ACE Editor
• NGX Editor
• Simple Mde Editor
• Calender
• Gallery
• Slider
• Firebase

Getting started

Welcome to Angular! Angular helps you build modern applications for the web, mobile, or desktop.

For getting started an Angular application you needs two things as Prerequisites.

Prerequisites

Before you begin, make sure your development environment includes Node and an npm package manager.

Node.js

Download latest version of node.js from nodejs.org.

• Install Node.js using downloaded file
• To check your node version, run node -v in a terminal/console window.

Npm package manager

Angular CLI, and Angular apps depend on features and functionality provided by libraries that are available as npm packages. To download and install npm packages, you must have an npm package manager. This Quick Start uses the npm client command line interface, which is installed with Node.js by default. To check that you have the npm client installed, run npm -v in a terminal/console window.

For better understanding Angular we suggest you to once go through official documentation of Angular from Angular Docs

Angular setup

Installing Angular CLI

You use the Angular CLI to create projects, generate application and library code, and perform a variety of ongoing development tasks as it is a progressive framework for building user interfaces.

Install the Angular CLI globally.

To install the CLI using npm, open a terminal/console window and enter the following command:

npm install -g @angular/cli 

Create Initial application

• 1 . Run the CLI command ng new and provide the name my-app, as shown here:

ng new my-app

• 2. The angular new command prompts you for information about features to include in the initial app project. Accept the defaults by pressing the Enter or Return key.

Serve Application

• 1. Go to the workspace folder (my-app).

cd my-app

• 2. Launch the server by using the CLI command ng serve

ng serve

cuba setup

If you have already download and install node.js and Angular CLI then ignore prerequisites accordingly.

Prerequisites

Node.js

Download latest version of node.js from nodejs.org.

• Install Node.js using downloaded file
• To check your node version, run node -v in a terminal/console window.

Angular CLI

Install Angular CLI Using:

npm install -g @angular/cli

Setup an cuba theme by

• 1) Download and extract an cuba themes from themeforest
• 2) Extract it and then go in to theme folder.

cd theme

• 3) Import all dependency by installing npm command

npm install

• 4) Now you are in stage to successfully run cuba using below command:

ng serve

ng build

Routing

Your complete route structure is place at module.routing

Suppose you are creating a new module (For creating a new module refer create new module ) then you have to add new routes for that modules.

• Import that component in module.routing

  
  /* Dashboards */
  import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  import { DefaultComponent } from './default/default.component';
  

• Use that component name with path, name, and data attribute in routes array in module-routing file

  
    const routes: Routes = 
  [
      {
        path: '',
        children: 
        [
          {
            path: 'default',
            component: DefaultComponent
          },
        ],
      }
  ];
    @NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
    })
    export class DashboardRoutingModule { }
  

Customize or Replace Menu Sidebar

Suppose you want to change in your menu sidebar or want to add new menu in your menu section then you just need to open nav.service.ts

    
{
      
"title": "Dashboard", "icon": "home", "type": "sub", "badgeType": "primary", "badgeValue": "6", "active": false, "children": [
      
{ "path": "/dashboard/default", "title": "Default", "type": "link" },
      
]
      
}
  
  

Variables :

Path : Here you have to give path name same as you have given in nav.service.ts

title : Title is the name that you can see on frontside so here you can give attractive title to showcase your menu item

type : It denote how you want to open your particular routes means on same page, or on new page on live application. Means suppose you want to open "ecommerce" dashboard on new page then write "extTabLink" in type attribute. Here we have four type attribute:

• link : It simply link with particular routes without loading your page.
• sub : It stop to route your page to next. In most case it use when our menu have children item.
• extLink : It change route with reloading a page (Work like href)
• extTabLink : It change routes and taking us on new tab.

Add Modules

Suppose if you want to create a new Module then you just need to run below code

ng generate module <module name>

Add Components

Suppose if you want to create a new component then you just need to run below code

ng generate component <component name>
                    

Style customization

Suppose you want to customize color and font as per your project then you can change it by:

• Theme Color

  Suppose you want to customize your theme primary and secondary color:

  
    @import "theme/variables";
    $primary-color: #0288d1;
    $secondary-color :#26c6da; 
          

  Then you have to go in assets >> scss >> color >> color-1.scss and then place your theme primary color in $primary-color and your secondary color in $secondary-color and then import that scss in your app.scss in assets >> scss >> app.scss

• Variable customization of complete theme

  Suppose you want to change color and size of card-body, Alert, Badge, Form input, breadcrumb,buttons, footer, sidebar and many more then you just need to change that particular color from _variable.scss in assets >> scss >> theme >> _variable.scss

• Google Font

  You can change font of your theme from index.html

  
  <link rel="icon" href="<%= BASE_URL %>favicon.png">
  <link href="https://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400,500,600,700,800,900" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
  

Theme Customize

Layouts

We have provided a bunch of page layouts and menu layouts that can be implemented with just a options change to body!

For creating your dream layout open customizer by click on setting icon

You can change your theme by clicking particular setting

Then you just need to click on configuration button

Configuration popup will be open then just click on copy json button which will copy configuration of theme which you want

Now go to our theme >> src >> shared >> services >> layout.service.ts and then just replace with your configuration.

 public config = { 
      
 settings: { 
      
    layout_type: 'ltr', 
      
    sidebar: { 
      
       type: 'compact-wrapper', 
      
       body_type: 'sidebar-icon' 
      
    }, 
      
    sidebar_setting: 'default-sidebar', 
      
    sidebar_background_setting: '' 
      
 }, 
      
 color: { 
      
    layout_version: 'light', 
      
    color: 'color-1', 
      
    primary_color: '#158df7', 
      
    secondary_color: '#fb2e63', 
      
    mix_background_layout: 'default', 
      
 }, 
      
 router_animation: 'fadeIn' 
      
}
      

Please refer the below table for corresponding classes. it is just for your inforamation you do not need to bother about this it's dynamically take particular classes according to your needs.

Theme options

We have some inbuilt themes for sidebar that can be switched with just a class change

  
<span class="badge badge-primary">Primary</span>
  
<span class="badge badge-secondary">Secondary</span>
  
<span class="badge badge-success">Success</span>
  
<span class="badge badge-info">Info</span>
  
<span class="badge badge-warning">Warning</span>
  
<span class="badge badge-danger">Danger</span>
  
<span class="badge badge-light">Light</span>
  
<span class="badge badge-dark">Dark</span>
    

  
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
  
<div class="progress-bar bg-primary" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  
<div class="progress-bar bg-secondary" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
  
<div class="progress-bar bg-success" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
  
<div class="progress-bar bg-info" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
</div>
                                

<div class="alert alert-primary dark" role="alert">This is a info alert—check it out!</div>
<div class="alert alert-secondary dark" role="alert">This is a light alert—check it out!</div>
<div class="alert alert-success dark" role="alert">This is a success alert—check it out!</div>
<div class="alert alert-info dark" role="alert">This is a danger alert—check it out!</div>
<div class="alert alert-warning dark" role="alert">This is a secondary alert—check it out!</div>
<div class="alert alert-danger dark" role="alert">This is a warning alert—check it out!</div>
<div class="alert alert-light dark" role="alert">This is a dark alert—check it out!</div>
<div class="alert alert-dark dark" role="alert">This is a dark alert—check it out!</div>
                                

<button type="button" class="btn btn-primary example-popover mr-1" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?"> Click to toggle popover</button>

<a tabindex="0" class="example-popover btn btn-secondary" role="button" data-toggle="popover" data-trigger="focus" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
<button type="button" data-trigger="hover" class="example-popover btn btn-success" data-container="body" data-toggle="popover" data-placement="bottom" title="Popover title" data-offset="-20px -20px" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." >On Hover Tooltip</button>
                              

• Tooltip
• Dropdown
• Tabs
• According
• Box shadow

<button type="button" class="example-popover btn btn-primary" placement="top" ngbTooltip="Popover title">Hover Me</button>
                              

<div ngbDropdown class="d-inline-block" placement="bottom">
<button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle >Dropdown Button</button>
<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
<button class="dropdown-item">Action</button>
<button class="dropdown-item">Another Action</button>
<button class="dropdown-item">Something Else Here</button>
</div>
</div>
                                      

<ngb-tabset>
<ngb-tab title="Home">
<ng-template ngbTabContent>
<p class="mb-0 m-t-30">Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting,remaining essentially unchanged. It was popularised in the
1960s with the release of Letraset sheets containing Lorem Ipsum passages,and more
recently with desktop publishing software like Aldus PageMaker including versions of
Lorem Ipsum</p>
</ng-template>
</ngb-tab>
<ngb-tab>
....
</ngb-tab>
<ngb-tab title="Disabled" [disabled]="true">
....
</ngb-tab>
</ngb-tabset>
                                    

  
<div class="card">
        
<ngb-accordion [closeOthers]="true" activeIds="static-1">
        
<ngb-panel id="static-1" title="Collapsible Group Item #1">
        
<ng-template ngbPanelContent>
        
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf
        
moon officia
        
aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf
        
moon tempor,
        
sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim
        
keffiyeh helvetica,
        
craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
        
Leggings
        
occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them
        
accusamus
        
labore sustainable VHS.
        
</ng-template>
        
</ngb-panel>
        
<ngb-panel id="static-2">
        
<ng-template ngbPanelTitle>
        
<span>Collapsible Group Item #1</span>
        
</ng-template>
        
<ng-template ngbPanelContent>
        
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf
        
moon officia
        
aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf
        
moon tempor,
        
sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim
        
keffiyeh helvetica,
        
craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
        
Leggings
        
occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them
        
accusamus
        
labore sustainable VHS.
        
</ng-template>
        
</ngb-panel>
        
<ngb-panel id="static-3" title="Collapsible Group Item #3" >
        
<ng-template ngbPanelContent>
        
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf
        
moon officia
        
aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf
        
moon tempor,
        
sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim
        
keffiyeh helvetica,
        
craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
        
Leggings
        
occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them
        
accusamus
        
labore sustainable VHS.
        
</ng-template>
        
</ngb-panel>
        
</ngb-accordion>
        
</div>
                                      

<div class="shadow-lg p-25 shadow-showcase text-center">

<h6 class="m-0 f-18">Larger shadow</h5>

</div>

  <h6 class="sub-title mb-5 mt-5">Regular shadow</h6>

<div class="shadow shadow-showcase p-25 text-center">

  <h6 class="m-0 f-18">Regular shadow</h5>

</div>

  <h6 class="sub-title mb-5 mt-5">small shadow</h6>

<div class="shadow-sm shadow-showcase p-25 text-center mb-5">

  <h6 class="m-0 f-18">Small shadow</h5>

</div>
                                        

Apps

E-commerce

You can directly use complete E-commerce app to manage your E-commerce with readymade functionality of Add to cart,Quickview, and Checkout with Stripe as well as Paypal. Apart from that if you want it to use it in your frontend application then you just need to change your json with your API data and you get complete workable E-commerce for your frontend.

Chat

In Chat application we provide complete chat designing with basic feature like chat with a people.

Gallery

Supplemental

Present your amazing ideas and images using our smooth and attractive gallery

To-D0

Now it's time to Decrease your burden by listing your daily task in our To-do app and feel relax.

To-D0 with Firebase

Now it's time to Decrease your burden by listing your important task in our To-do app and feel relax.

Email

Use our Email application design to build complete email app

Bookmark

You can Bookmark your Favioute application and pages using bookmark app so you can reach to your favioute app quickly.

ng add angular-calendar

<mwl-calendar-month-view *ngSwitchCase="CalendarView.Month" [viewDate]="viewDate" [events]="events" 
  [refresh]="refresh" [activeDayIsOpen]="activeDayIsOpen" (dayClicked)="dayClicked($event.day)" 
  (eventClicked)="handleEvent('Clicked', $event.event)" (eventTimesChanged)="eventTimesChanged($event)">
</mwl-calendar-month-view>

  import {
  Component,ChangeDetectionStrategy,ViewChild,TemplateRef,} from '@angular/core';
  import {startOfDay,endOfDay,subDays,addDays,endOfMonth,isSameDay,isSameMonth,addHours} from 'date-fns';
  import { Subject } from 'rxjs';
  import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
  import {CalendarEvent,CalendarEventAction,CalendarEventTimesChangedEvent,CalendarView} from 'angular-calendar';
  
  const colors: any = {
  red: {
  primary: '#ad2121',
  secondary: '#FAE3E3',
  },
  blue: {
  primary: '#1e90ff',
  secondary: '#D1E8FF',
  },
  yellow: {
  primary: '#e3bc08',
  secondary: '#FDF1BA',
  },
  };
  
  @Component({
  selector: 'mwl-demo-component',
  changeDetection: ChangeDetectionStrategy.OnPush,
  styleUrls: ['styles.css'],
  templateUrl: 'template.html',
  })
  export class DemoComponent {
  @ViewChild('modalContent', { static: true }) modalContent: TemplateRef;
  
    view: CalendarView = CalendarView.Month;
  
    CalendarView = CalendarView;
  
    viewDate: Date = new Date();
  
    modalData: {
    action: string;
    event: CalendarEvent;
    };
  
    actions: CalendarEventAction[] = [
    {
    label: '',
    a11yLabel: 'Edit',
    onClick: ({ event }: { event: CalendarEvent }): void => {
    this.handleEvent('Edited', event);
    },
    },
    {
    label: '',
    a11yLabel: 'Delete',
    onClick: ({ event }: { event: CalendarEvent }): void => {
    this.events = this.events.filter((iEvent) => iEvent !== event);
    this.handleEvent('Deleted', event);
    },
    },
    ];
  
    refresh: Subject = new Subject();
  
      events: CalendarEvent[] = [
      {
      start: subDays(startOfDay(new Date()), 1),
      end: addDays(new Date(), 1),
      title: 'A 3 day event',
      color: colors.red,
      actions: this.actions,
      allDay: true,
      resizable: {
      beforeStart: true,
      afterEnd: true,
      },
      draggable: true,
      },
      {
      start: startOfDay(new Date()),
      title: 'An event with no end date',
      color: colors.yellow,
      actions: this.actions,
      },
      {
      start: subDays(endOfMonth(new Date()), 3),
      end: addDays(endOfMonth(new Date()), 3),
      title: 'A long event that spans 2 months',
      color: colors.blue,
      allDay: true,
      },
      {
      start: addHours(startOfDay(new Date()), 2),
      end: addHours(new Date(), 2),
      title: 'A draggable and resizable event',
      color: colors.yellow,
      actions: this.actions,
      resizable: {
      beforeStart: true,
      afterEnd: true,
      },
      draggable: true,
      },
      ];
  
      activeDayIsOpen: boolean = true;
  
      constructor(private modal: NgbModal) {}
  
      dayClicked({ date, events }: { date: Date; events: CalendarEvent[] }): void {
      if (isSameMonth(date, this.viewDate)) {
      if (
      (isSameDay(this.viewDate, date) && this.activeDayIsOpen === true) ||
      events.length === 0
      ) {
      this.activeDayIsOpen = false;
      } else {
      this.activeDayIsOpen = true;
      }
      this.viewDate = date;
      }
      }
  
      eventTimesChanged({
      event,
      newStart,
      newEnd,
      }: CalendarEventTimesChangedEvent): void {
      this.events = this.events.map((iEvent) => {
      if (iEvent === event) {
      return {
      ...event,
      start: newStart,
      end: newEnd,
      };
      }
      return iEvent;
      });
      this.handleEvent('Dropped or resized', event);
      }
  
      handleEvent(action: string, event: CalendarEvent): void {
      this.modalData = { event, action };
      this.modal.open(this.modalContent, { size: 'lg' });
      }
  
      addEvent(): void {
      this.events = [
      ...this.events,
      {
      title: 'New event',
      start: startOfDay(new Date()),
      end: endOfDay(new Date()),
      color: colors.red,
      draggable: true,
      resizable: {
      beforeStart: true,
      afterEnd: true,
      },
      },
      ];
      }
  
      deleteEvent(eventToDelete: CalendarEvent) {
      this.events = this.events.filter((event) => event !== eventToDelete);
      }
  
      setView(view: CalendarView) {
      this.view = view;
      }
  
      closeOpenMonthViewDay() {
      this.activeDayIsOpen = false;
      }
      }

                                

Firebase

Basically we use firebase for:

There are also many other use of firebase that you can find from reference which we have attach below.

Prerequisites

You must have the following prerequisites for this tutorial:

Let's follow below step to secure your application

How to remove the firebase from cuba theme

• 1. Remove src -> environments -> enviroment.ts file setup.

  

• 2. Remove all the dependacies from the app -> app.module.ts

  

• 3. remove shared -> services -> auth.service.ts file

• 4. remove services and guards from providers from app -> app.module.ts

  

• 5. Remove shared -> guard -> admin.guard.ts and shared -> guard -> SecureInnerPagesGuard.guard.ts

• 6. Remove [canActive] method from app -> app.routing.ts file.

• 7. Remove app -> auth component.

Thank You

• Answering your questions, problems regarding theme with best to solving before 24 working hours,once you generate a ticket.
• Solution of Reported Bug
• Update you with latest version of theme

Apart from that, if you needs any extra / customization work then also you can get in touch with our experts by raising ticket to help you in customize with affordable extra budget.

Once again thank you for purchasing one of our Templates , if you like our Templates please rate us

Best Regards

Pixelstrap