Endless 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.Endless 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
DependanciesYes! again No Jquery dependency.
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.
Before you begin, make sure your development environment includes Node and an npm package manager.
Download latest version of node.js from nodejs.org. v16.10.0
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 an Angular from angular.io
You use the Angular CLI to create projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.
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
ng new my-app
cd my-app
ng serve --open
If you have already download and install node.js and Angular CLI then ignore prerequisites accordingly.
Download latest version of node.js from v16.10.0 nodejs.org.
Install Angular CLI Using:
npm install -g @angular/cli
cd theme-folder
npm install
ng serve
npm install
npm install node-sass --save-dev
Here we represent Angular Folder Structure and Style Customize
We have provided a bunch of page layouts and menu layouts that can be implemented with just a options change to body! Please refer the below table for corresponding classes.
Layout | Options |
---|---|
Boxed Layout | Class: box-layout |
RTL Layout | Class: rtl |
Light layout | - |
Dark Page-body | Attribute: main-theme-layout="main-theme-layout-2" |
Dark Page-body & Sidebar | Attribute: main-theme-layout="main-theme-layout-3" |
Dark Layout | Attribute: main-theme-layout="main-theme-layout-4" |
We have some inbuilt themes for sidebar that can be switched with just a class change
Sidebar | Options |
---|---|
Default Sidebar layout | Attribute: native-default |
native scroll | Attribute: native-scroll |
Bordered Navigation | Attribute: navigation-bordered |
Right Side icons | Attribute: navigation-rightside |
Background Image | Attribute: native-image-bg |
Dark Sidebar layout | Attribute: main-theme-layout="main-theme-layout-1" |
We have some inbuilt themes for header that can be switched with just a class change
Header | semilight-bg-color |
---|---|
Light version | bg-default |
Primary version | bg-Primary |
secondary version | bg-secondary |
danger version | bg-danger |
success version | bg-success |
info version | bg-info |
npm install @ngx-translate/core @ngx-translate/http-loader rxjs --save
The @ngx-translate/core contains the core routines for the translation: The TranslateService and some pipes.
The @ngx-translate/http-loader loads the translation files from your webserver.
Now you have to init the translation TranslateModule in your app.module.ts:
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
// import ngx-translate and the http loader
import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import {HttpClient, HttpClientModule} from '@angular/common/http';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
// configure the imports
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
// required for AOT compilation
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http);
}
app.component.html:
<ul class="language-dropdown onhover-show-div p-20">
<li><a href="javascript:void(0)" data-lng="en" (click)="changeLanguage('en')"><i
class="flag-icon flag-icon-is"></i> English</a></li>
<li><a href="javascript:void(0)" data-lng="es" (click)="changeLanguage('es')"><i
class="flag-icon flag-icon-um"></i> German</a></li>
<ul>
Add TranslateService in app.component.ts:
import {Component} from '@angular/core';
import {TranslateService} from '@ngx-translate/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
constructor(private translate: TranslateService) {
translate.setDefaultLang('en');
}
public changeLanguage(lang){
this.translate.use(lang)
}
}
So by doing this you set the default language of your application using translate.setDefaultLang('en'). In a real app you can of course load language from the user's settings.
Reloading the app now shows an error in the browser console:
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:4200/assets/i18n/en.json
Now we have to make json file accroding to language which we want:Now use variable with translate any where in your HTML structureEach language is stored in a separate .json file. Let's create the JSON file for the English translation: assets/i18n/en.json.
{
"title": "Translation demo",
"text": "This is a simple demonstration app for ngx-translate"
}
To switch language you'll first have to add other language Json file. Let's create a German translation for the demo: assets/i18n/de.json
{
"title": "Übersetzungs-Demo",
"text": "Dies ist eine einfache Applikation um die Funktionen von ngx-transalte zu demonstrieren."
}
Now use variable with translate any where in your HTML structure
<!-- translation: translation pipe -->
<h1>{{ 'title' | translate }}</h1>
<!-- translation: directive (key as attribute)-->
<p [translate]="'demo.text'"></p>
<!-- translation: directive (key as content of element) -->
<p translate>demo.text</p>
General HTML structure is the same throughout the template. Here is the header structure.
<div class="page-main-header">
<div class="main-header-right row">
<div class="main-header-left d-lg-none">
........
</div>
<div class="nav-right col p-0">
........
</div>
</div>
</div>
Generate endless content area using following structure.
<div class="page-body">
<div class="container-fluid">
........
</div>
<!-- Container-fluid starts-->
<div class="container-fluid">
.......
</div>
<!-- Container-fluid Ends-->
</div>
Footer structure to complete endless structure.
<footer class="footer">
<div class="container-fluid">
.............
</div>
</footer>
<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 tag-pills-sm-mb">Dark</span>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
</div>
<div class="progress">
<div class="progress-bar bg-primary" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
</div>
<div class="progress">
<div class="progress-bar bg-secondary" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
</div>
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
</div>
<div class="progress">
<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>
</div>
<h6> class="p-t-20 p-b-20">To use java script you have to add the following script tag</h6>
<div class="card-body">
<!--popover js-->
<script src="../assets/js/popover-custom.js">
</script>
<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>
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
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
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
<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>
This is an Angular wrapper library for the Perfect Scrollbar. To use this library you should get familiar with the Perfect Scrollbar documentation as well since this documentation only explains details specific to this wrapper.
npm install ngx-perfect-scrollbar --save
<perfect-scrollbar style="max-width: 600px; max-height: 400px;" [config]="config">
<div>Scrollable content< </div>
</perfect-scrollbar>
import { PerfectScrollbarConfigInterface} from 'ngx-perfect-scrollbar';
export class ScrollableComponent implements OnInit
{
constructor() { }
ngOnInit() { }
public config: PerfectScrollbarConfigInterface =
{
suppressScrollX: false,
wheelPropagation: false,
useBothWheelAxes : true
};
}
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
import { PERFECT_SCROLLBAR_CONFIG } from 'ngx-perfect-scrollbar';
import { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';
const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
suppressScrollX: true
};
@NgModule({
...
imports: [
...
PerfectScrollbarModule
...
],
providers: [
{
provide: PERFECT_SCROLLBAR_CONFIG,
useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG
}
]
})
A beautiful, responsive, customizable, accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies.
npm install --save sweetalert2
<div class="card-body btn-showcase">
<button type="button" class="btn btn-primary" (click)="basicAlert()">Basic</button>
</div>
// ES6 Modules or TypeScript
import Swal from 'sweetalert2'
// CommonJS
const Swal = require('sweetalert2')
...
//method call
basicAlert()
{
Swal.fire('Any fool can use a computer')
}
npm i ng2-dragula
<div class="card-body btn-showcase">
<button type="button" class="btn btn-primary" (click)="basicAlert()">Basic</button>
</div>
import { DragulaModule } from 'ng2-dragula';
@NgModule({
imports: [
DragulaModule.forRoot()
]
})
This is an Angular wrapper library for the Dropzone. To use this library you should get familiar with the Dropzone documentation as well since this documentation only explains details specific to this wrapper.
npm i ngx-dropzone-wrapper
<div class="card-body">
<div class="dropzone dropzone-primary" [dropzone]="config1" (error)="onUploadError($event)" (success)="onUploadSuccess($event)">
<div class="dz-message needsclick">
............
</div>
</div>
</div>
import { DropzoneConfigInterface } from 'ngx-dropzone-wrapper';
public config1: DropzoneConfigInterface = {
clickable: true,
maxFiles: 1,
autoReset: null,
errorReset: null,
cancelReset: null
import { DropzoneModule } from 'ngx-dropzone-wrapper';
import { DROPZONE_CONFIG } from 'ngx-dropzone-wrapper';
import { DropzoneConfigInterface } from 'ngx-dropzone-wrapper';
@NgModule({
imports: [
DropzoneModule
]
providers: [
{
provide: DROPZONE_CONFIG,
useValue: DEFAULT_DROPZONE_CONFIG
}
]
})
npm install ngx-toastr --save
Add css in app.csspage.
@import '~ngx-toastr/toastr.css';
<div class="card-body btn-showcase">
<button type="button" class="btn btn-warning" (click)="warning()">Warning</button>
</div>
import { ToastrService } from 'ngx-toastr';
@Component({...})
export class YourComponent {
constructor(private toastr: ToastrService) {}
showSuccess() {
this.toastr.success('Hello world!', 'Toastr fun!');
}
}
import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr';
@NgModule({
imports: [
CommonModule,
BrowserAnimationsModule, // required animations module
ToastrModule.forRoot() // ToastrModule added
],
bootstrap: [App],
declarations: [App]
})
ngx-owl-carousel-o is built for Angular >=6.0.0. It doesn't use jQuery.
npm i ngx-owl-carousel-o
<div>Some tags before</div>
<owl-carousel-o [options]="customOptions">
<ng-template carouselSlide>Slide 1</ng-template>
<ng-template carouselSlide>Slide 2</ng-template>
<ng-template carouselSlide>Slide 3</ng-template>
</owl-carousel-o>
@Component({
selector: '....',
templateUrl: 'carousel-holder.component.html'
})
export class CarouselHolderComponent {
customOptions: any = {
loop: true,
mouseDrag: false,
touchDrag: false,
pullDrag: false,
dots: false,
navSpeed: 700,
navText: ['', ''],
responsive: {
0: {
items: 1
},
400: {
items: 2
},
740: {
items: 3
},
940: {
items: 4
}
},
nav: true
}
}
import { CarouselModule } from 'ngx-owl-carousel-o';
@NgModule({
imports: [ CarouselModule ],
declarations: [ CarouselHolderComponent ]
})
Self-contained, mobile friendly slider component for Angular 5+ based on angularjs-slider.
npm i ng5-slider
<ng5-slider [(value)]="value" [options]="options">lt;/ng5-slider>
import { Options } from 'ng5-slider';
...
@Component({...})
export class AppComponent {
value: number = 100;
options: Options = {
loor: 0,
floor: 0,
ceil: 200
};
}
import { Ng5SliderModule } from 'ng5-slider';
...
@NgModule({
imports: [
...
Ng5SliderModule,
...
],
...
})
export class AppModule {}
A recommended way to install ng2-file-upload is through npm package manager using the following command:
npm i ng2-file-upload --save
<input type="file" ng2FileSelect [uploader]="uploader" multiple />
import { FileUploader } from 'ng2-file-upload';
@Component({
...
providers: [... HintService ... ],
...
})
class AppComponent {
public uploader:FileUploader = new FileUploader({
url: URL,
isHTML5: true});
public hasBaseDropZoneOver:boolean = false;
public hasAnotherDropZoneOver:boolean = false;
public fileOverBase(e:any):void {
this.hasBaseDropZoneOver = e;
}
public fileOverAnother(e:any):void {
this.hasAnotherDropZoneOver = e;
}
}
import { FileUploadModule } from 'ng2-file-upload/ng2-file-upload';
@NgModule({
...
imports: [
...
FileUploadModule
...
]
]
npm install @angular/google-maps --save
<!-- this creates a google map on the page with the given lat/lng from -->
<google-map width="100%" height="450px" [zoom]="zoom">
<map-marker *ngFor="let marker of markers" [position]="marker.position" [label]="marker.label">
</map-marker>
</google-map>
import { Component, OnInit } from '@angular/core';
import { GoogleMap } from '@angular/google-maps';
@Component({
selector: 'app-google-map',
templateUrl: './google-map.component.html',
styleUrls: ['./google-map.component.scss']
})
export class GoogleMapComponent implements OnInit {
public markers: any[];
public zoom: number;
constructor() {
this.markers = [];
this.zoom = 2;
}
ngOnInit() {
this.markers.push({
position: {
lat: 35.717,
lng: 139.731
},
label: {
color: "black",
text: "Madrid"
},
Option:{
draggable: true,
animation: google.maps.Animation.DROP,
}
});
}
import { GoogleMapsModule } from "@angular/google-maps";
@NgModule({
...
imports: [
...
GoogleMapsModule,
],
providers: [],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class Module { }
Leaflet packages for Angular.io. Provides flexible and extensible components for integrating Leaflet v0.7.x and v1.x into Angular.io projects. Supports Angular v7, Ahead-of-Time compilation (AOT), and use in Angular-CLI based projects.
npm install leaflet
npm install @asymmetrik/ngx-leaflet
<div style="height: 300px;" leaflet [leafletOptions]="options">
</div>
//import file in angular.on
import * as L from 'leaflet';
export class LeafletMapComponent implements OnInit {
//First map options
options = {
layers: [
tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18, attribution: '...' })
],
zoom: 5,
center: latLng(46.879966, -121.726909)
};
}
//import file in angular.json
{
"styles": [
"styles.css",
"./node_modules/leaflet/dist/leaflet.css"
],
}
import { AgmCoreModule } from '@agm/core';
@NgModule({
...
imports: [
...
AgmCoreModule.forRoot({
apiKey: 'YOUR_KEY'
})
],
providers: [],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class Module { }
The CKEditor component for angular(2.x+)
npm i @ckeditor/ckeditor5-angular
<ckeditor [editor]="editor" [config]="config" [data]="data"></ckeditor>
// app.component.ts
@Component({
selector: 'app',
templateUrl: 'app.component.html'
})
export class AppComponent implements OnInit {
public editorValue: string = '';
ngOnInit() { }
}
// app.component.ts
@Component({
selector: 'app',
templateUrl: 'app.component.html'
})
export class AppComponent implements OnInit {
public editorValue: string = '';
ngOnInit() { }
}
A simple native wysiwyg editor for Angular 6+, 7+, 8+
npm install @kolkov/angular-editor --save
<angular-editor [(ngModel)]="htmlContent" [config]="config"></angular-editor>
import { AngularEditorConfig } from '@kolkov/angular-editor';
editorConfig: AngularEditorConfig = {
editable: true,
spellcheck: true,
height: '25rem',
minHeight: '5rem',
placeholder: 'Enter text here...',
translate: 'no',
uploadUrl: 'v1/images', // if needed
customClasses: [ // optional
{
name: "quote",
class: "quote",
},
{
name: 'redText',
class: 'redText'
},
{
name: "titleText",
class: "titleText",
tag: "h1",
},
]
};
// app.module.ts
import { AngularEditorModule } from '@kolkov/angular-editor';
@NgModule({
imports: [
// ...
AngularEditorModule
],
// ...
})
export class AppModule {
}
This project contains a functional module with a wizard component and some supportive components and directives for Angular version 5 or later.
npm i angular-archwizard
<aw-wizard>
<aw-wizard-step stepTitle="Title of step 1">
Content of Step 1
<button type="button" awNextStep>Next Step</button>
<button type="button" [awGoToStep]="{stepIndex: 2}">Go directly to third
Step</button>
</aw-wizard-step>
<aw-wizard-step stepTitle="Title of step 2" awOptionalStep>
Content of Step 2
<button type="button" awPreviousStep>Go to previous
step</button>
<button type="button" awNextStep>Go to next step</button>
</aw-wizard-step>
<aw-wizard-step stepTitle="Title of step 3">
Content of Step 3
<button type="button" awPreviousStep>Previous Step</button>
<button type="button" (click)="finishFunction()">Finish</button>
</aw-wizard-step>
</aw-wizard>
import { ArchwizardModule } from 'angular-archwizard'
@NgModule({
...
imports: [
...
ArchwizardModule
],
})
export class Module { }
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-xl-6">
<div class="card">
<div class="card-header">
<h5>Basic Card</h5>
</div>
<div class="card-body">
<p class="mb-0"> 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. 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. </p>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-xl-6">
<div class="card ">
<div class="card-header b-l-primary">
<h5>Border left</h5>
</div>
<div class="card-body">
<p>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. 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.</p>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xl-6 xl-100 col-lg-12">
<div class="card">
<div class="card-header">
<h5 class="pull-left">Simple Tab</h5>
</div>
<div class="card-body">
<ngb-tabset type="pills" class="tabbed-card">
<ngb-tab title="Home" class="pull-right nav nav-pills nav-primary">
<ng-template ngbTabContent class="tab-content">
<div class="tab-pane fade show">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum is simply dummy text of the printing and typesetting industry. 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>
</div>
</ng-template>
</ngb-tab>
<ngb-tab>
<ng-template ngbTabTitle class="pull-right nav nav-pills nav-primary">Profile</ng-template>
<ng-template ngbTabContent class="tab-content">
<div class="tab-pane fade show">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. dummy
text of the printing and typesetting industry. 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>
</div>
</ng-template>
</ngb-tab>
<ngb-tab title="Contact" ngbTabTitle class="pull-right nav nav-pills nav-primary">
<ng-template ngbTabContent class="tab-content">
<div class="tab-pane fade show">
<p>
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>
</div>
</ng-template>
</ngb-tab>
</ngb-tabset>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row ui-sortable" [dragula]='"drag-card"'>
<div class="col-sm-12 col-xl-6">
<div class="card">
<div class="card-header">
<h5>Basic Card</h5>
</div>
<div class="card-body">
<p> 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. 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. </p>
</div>
</div>
</div>
<div class="col-sm-12 col-xl-6">
<div class="card b-r-0">
<div class="card-header">
<h5>Flat Card</h5>
</div>
<div class="card-body">
<p> 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. 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. </p>
</div>
</div>
</div>
</div>
</div>
npm i --save ng-chartist chartist
<x-chartist
[type]="type"
[data]="data"
[options]="options"
[events]="events"
></x-chartist>
export var chart4: Chart = {
type: 'Line',
data: {
labels: [1, 2, 3, 4, 5, 6, 7, 8],
series: [
[1, 2, 3, 1, -2, 0, 1, 0],
[-2, -1, -2, -1, -2.5, -1, -2, -1],
[0, 0, 0, 1, 2, 2.5, 2, 1],
[2.5, 2, 1, 0.5, 1, 0.5, -1, -2.5]
]
},
options: {
high: 3,
low: -3,
showArea: true,
showLine: false,
showPoint: false,
fullWidth: true,
axisX: {
showLabel: fvalse,
showGrid: false
},
height:450,
}
};
import { ChartistModule } from 'ng-chartist';
@NgModule({
...
imports: [
...
ChartistModule
],
})
export class Module { }
npm i ng2-charts
<canvas baseChart class="chart" [datasets]="barChartData" [labels]="barChartLabels"
[options]="barChartOptions" [legend]="barChartLegend"
[type]="barChartType" (chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
export var barChartOptions: any = {
scaleShowVerticalLines: false,
responsive: true
};
export var barChartLabels: string[] = ["January", "February", "March", "April", "May",
"June", "July"];
export var barChartType = 'bar';
export var barChartLegend = false;
export var barChartData: any[] = [
{ data: [35, 59, 80, 81, 56, 55, 40], label: 'Series A' },
{ data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' }
];
export var barChartColors: Array = [
{
backgroundColor: '#4466f2',
borderColor: "rgba(30, 166, 236, 0.8)",
borderWidth: 1,
},
{
backgroundColor: '#1ea6ec',
borderColor: "rgba(68, 102, 242, 0.8)",
borderWidth: 1,
},
];
import { ChartsModule } from 'ng2-charts';
@NgModule({
...
imports: [
...
ChartsModule
],
})
export class Module { }
npm i ng2-google-charts
<google-chart [data]="areaChart1"></google-chart>
export var areaChart1: any = {
chartType: 'AreaChart',
dataTable: [
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
],
options: {
title: 'Company Performance',v
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0},
width:'100%',
height: 400,
colors: ["#4466f2", "#1ea6ec"]
},
};
import { Ng2GoogleChartsModule } from 'ng2-google-charts';
@NgModule({
...
imports: [
...
Ng2GoogleChartsModule
],
})
export class Module { }
npm i @swimlane/ngx-graph
<ngx-charts-bar-vertical [scheme]="barChartColorScheme" [results]="barChartsingle"
[gradient]="barChartGradient" [xAxis]="barChartShowXAxis" [yAxis]="barChartShowYAxis"
[legend]="barChartShowLegend" [showXAxisLabel]="barChartShowXAxisLabel"
[showYAxisLabel]="barChartShowYAxisLabel" [xAxisLabel]="barChartXAxisLabel"
[showGridLines]="showGridLines" [yAxisLabel]="barChartYAxisLabel" [roundEdges]="false"
(select)="onSelect($event)">
</ngx-charts-bar-vertical>
export var barChartView: any[] = [550, 400];
// options
export var barChartShowXAxis = true;
export var barChartShowYAxis = true;
export var barChartGradient = true;
export var barChartShowLegend = false;
export var barChartShowXAxisLabel = true;
export var barChartXAxisLabel = 'Country';
export var barChartShowYAxisLabel = true;
export var barChartYAxisLabel = 'Population';
export var roundEdges: boolean = true;
export var barChartshowGridLines= false;
export var barChartColorScheme = {
domain: ["#007bff", "#ff9f40", "#ff5370", "#1ea6ec"]
};
import { NgxChartsModule } from '@swimlane/ngx-charts';
@NgModule({
...
imports: [
...
NgxChartsModule
],
})
export class Module { }
Simple table extension with sorting, filtering, paging... for Angular apps.
npm install @ng-bootstrap/ng-bootstrap
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Country</th>
<th scope="col">Area</th>
<th scope="col">Population</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let country of countries; index as i">
<th scope="row">{{ i + 1 }}</th>
<td>
<img [src]="'https://upload.wikimedia.org/wikipedia/commons/' + country.flag" class="mr-2" style="width: 20px">
{{ country.name }}
</td>
<td>{{ country.area | number }}</td>
<td>{{ country.population | number }}</td>
</tr>
</tbody>
</table>
import { Component } from '@angular/core';
interface Country {
name: string;
flag: string;
area: number;
population: number;
}
const COUNTRIES: Country[] = [
{
name: 'Russia',
flag: 'f/f3/Flag_of_Russia.svg',
area: 17075200,
population: 146989754
},
{
name: 'Canada',
flag: 'c/cf/Flag_of_Canada.svg',
area: 9976140,
population: 36624199
},
{
name: 'United States',
flag: 'a/a4/Flag_of_the_United_States.svg',
area: 9629091,
population: 324459463
},
{
name: 'China',
flag: 'f/fa/Flag_of_the_People%27s_Republic_of_China.svg',
area: 9596960,
population: 1409517397
}
];
@Component({
selector: 'ngbd-table-basic',
templateUrl: './table-basic.html'
})
export class NgbdTableBasic {
countries = COUNTRIES;
}
npm install --save angular-calendar date-fns
Add following import statement in your app.module.ts and then use calender app as per your wish.
import { CalendarModule, DateAdapter } from 'angular-calendar';
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
import { FlatpickrModule } from 'angularx-flatpickr';
imports: [
...
CalendarModule.forRoot({
provide: DateAdapter,
useFactory: adapterFactory
}),
FlatpickrModule.forRoot()
]
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.