npm i ngx-treeview

<ngx-treeview [config]="config" [items]="items" (selectedChange)="onSelectedChange($event)" (filterChange)="onFilterChange($event)">
</ngx-treeview>

import { Component, OnInit } from '@angular/core';
import { TreeviewConfig, TreeviewItem } from 'ngx-treeview';
import { TreeViewService } from 'src/app/shared/services/advance/tree-view/tree-view.service';
                    
@Component({
selector: 'app-tree-view',
templateUrl: './tree-view.component.html',
styleUrls: ['./tree-view.component.scss']
})
export class TreeViewComponent implements OnInit {
public config =TreeviewConfig.create(
{
hasAllCheckBox: false,
hasFilter: false,
hasCollapseExpand: false,
decoupleChildFromParent: false,
maxHeight: 500
})
public items: TreeviewItem[];
constructor( private service: TreeViewService) { }

ngOnInit(): void {
this.items = this.service.getItems();
}

}

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

}

}

npm install @ng-bootstrap/ng-bootstrap

<ngb-rating [(rate)]="currentRate"></ngb-rating>

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 ngx-image-cropper

<image-cropper [imageChangedEvent]="imageChangedEvent" [maintainAspectRatio]="true"
[containWithinAspectRatio]="containWithinAspectRatio" [aspectRatio]="4 / 3" [resizeToWidth]="256"
[cropperMinWidth]="128" [onlyScaleDown]="true" [roundCropper]="false" [canvasRotation]="canvasRotation"
[transform]="transform" [alignImage]="'left'" [style.display]="showCropper ? null : 'none'" format="png"
(imageCropped)="imageCropped($event)" (imageLoaded)="imageLoaded()" (cropperReady)="cropperReady($event)"
(loadImageFailed)="loadImageFailed()" >

import { Component, OnInit } from '@angular/core';
import { ImageTransform, ImageCroppedEvent, base64ToFile, Dimensions } from 'ngx-image-cropper';

@Component({
selector: 'app-image-croper',
templateUrl: './image-croper.component.html',
styleUrls: ['./image-croper.component.scss']
})
export class ImageCroperComponent {
imageChangedEvent: any = '';
croppedImage: any = '';
canvasRotation = 0;
rotation = 0;
scale = 1;
showCropper = false;
containWithinAspectRatio = false;
transform: ImageTransform = {};

fileChangeEvent(event: any): void {
this.imageChangedEvent = event;
}

imageCropped(event: ImageCroppedEvent) {
this.croppedImage = event.base64;
console.log(event, base64ToFile(event.base64));
}

imageLoaded() {
this.showCropper = true;
console.log('Image loaded');
}

cropperReady(sourceImageDimensions: Dimensions) {
console.log('Cropper ready', sourceImageDimensions);
}

loadImageFailed() {
console.log('Load failed');
}

rotateLeft() {
this.canvasRotation--;
this.flipAfterRotate();
}

rotateRight() {
this.canvasRotation++;
this.flipAfterRotate();
}

private flipAfterRotate() {
const flippedH = this.transform.flipH;
const flippedV = this.transform.flipV;
this.transform = {
...this.transform,
flipH: flippedV,
flipV: flippedH
};
}


flipHorizontal() {
this.transform = {
...this.transform,
flipH: !this.transform.flipH
};
}

flipVertical() {
this.transform = {
...this.transform,
flipV: !this.transform.flipV
};
}

resetImage() {
this.scale = 1;
this.rotation = 0;
this.canvasRotation = 0;
this.transform = {};
}

zoomOut() {
this.scale -= .1;
this.transform = {
...this.transform,
scale: this.scale
};
}

zoomIn() {
this.scale += .1;
this.transform = {
...this.transform,
scale: this.scale
};
}

toggleContainWithinAspectRatio() {
this.containWithinAspectRatio = !this.containWithinAspectRatio;
}

updateRotation() {
this.transform = {
...this.transform,
rotate: this.rotation
};
}
}

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

}

npm i @ng-select/ng-select

<ng-select [items]="people" bindLabel="name" bindValue="id" [(ngModel)]="selectedPersonId"></ng-select >

import { Component, OnInit } from '@angular/core';
import { DataService, Person } from '../data.service';

@Component({
selector: 'data-source-array-example',
templateUrl: './data-source-array-example.component.html',
styleUrls: ['./data-source-array-example.component.scss']
})
export class DataSourceArrayExampleComponent implements OnInit {

people: Person[] = [];
selectedPersonId = '5a15b13c36e7a7f00cf0d7cb';

selectedSimpleItem = 'Two';
simpleItems = [];

constructor(private dataService: DataService) {
}

ngOnInit() {
this.dataService.getPeople().subscribe(items => this.people = items);
this.simpleItems = [true, 'Two', 3];
}
}

npm install @ng-bootstrap/ng-bootstrap

<input id="typeahead-basic" type="text" class="form-control" [(ngModel)]="model" [ngbTypeahead]="search" />

import {Component} from '@angular/core';
import {Observable} from 'rxjs';
import {debounceTime, distinctUntilChanged, map} from 'rxjs/operators';

const states = ['Alabama', 'Alaska', 'American Samoa', 'Arizona', 'Arkansas', 'California', 'Colorado',
'Connecticut', 'Delaware', 'District Of Columbia', 'Federated States Of Micronesia', 'Florida', 'Georgia',
'Guam', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine',
'Marshall Islands', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana',
'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
'Northern Mariana Islands', 'Ohio', 'Oklahoma', 'Oregon', 'Palau', 'Pennsylvania', 'Puerto Rico', 'Rhode Island',
'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virgin Islands', 'Virginia',
'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];

@Component({
selector: 'ngbd-typeahead-basic',
templateUrl: './typeahead-basic.html',
styles: [`.form-control { width: 300px; }`]
})
export class NgbdTypeaheadBasic {
public model: any;

search = (text$: Observable) =>
  text$.pipe(
  debounceTime(200),
  distinctUntilChanged(),
  map(term => term.length < 2 ? [] : states.filter(v=> v.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10))
    )
 
    }

npm i ng2-charts

<canvas baseChart class="chart" [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions"
[colors]="barChartColors" [legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>

import { Component, ViewEncapsulation } from '@angular/core';
import * as chartData from '../../../shared/data/chart/chartjs';

@Component({
selector: 'app-chartjs',
templateUrl: './chartjs.component.html',
styleUrls: ['./chartjs.component.scss'],
encapsulation:ViewEncapsulation.None
})
export class ChartjsComponent {

constructor() { }

// barChart
public barChartOptions = {
scaleShowVerticalLines: false,
responsive: true
};
// events
public chartClicked(e:any):void { }

public chartHovered(e:any):void { }

npm i ng-chartist

<x-chartist [type]="type" [data]="data" [options]="options" [events]="events"></x-chartist>

// bar-chart.component.ts
import {
IBarChartOptions,
IChartistAnimationOptions,
IChartistData
} from 'chartist';
import { ChartEvent, ChartType } from 'ng-chartist';

@Component({
selector: 'app-bar-chart',
template: `
<x-chartist [type]="type" [data]="data" [options]="options" [events]="events"></x-chartist>
`
]
})
export class BarChartComponent {
type: ChartType = 'Bar';
data: IChartistData = {
labels: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
series: [
[5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8],
[3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4]
]
};

options: IBarChartOptions = {
axisX: {
showGrid: false
},
height: 300
};

events: ChartEvent = {
draw: (data) => {
if (data.type === 'bar') {
data.element.animate({
y2: {
  dur: '0.5s',
  from: data.y1,
  to: data.y2,
  easing: 'easeOutQuad'
  }
  });
  }
  }
  };
  }

npm i @swimlane/ngx-charts

<ngx-charts-pie-chart [view]="view" [scheme]="colorScheme" [results]="single" [gradient]="gradient"
  [legend]="showLegend" [legendPosition]="legendPosition" [labels]="showLabels" [doughnut]="isDoughnut"
  (select)="onSelect($event)" (activate)="onActivate($event)" (deactivate)="onDeactivate($event)">
</ngx-charts-pie-chart>

import { Component, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxChartsModule } from '@swimlane/ngx-charts';
import { single } from './data';

@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
single: any[];
view: any[] = [700, 400];

// options
gradient: boolean = true;
showLegend: boolean = true;
showLabels: boolean = true;
isDoughnut: boolean = false;
legendPosition: string = 'below';

colorScheme = {
domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
};

constructor() {
Object.assign(this, { single });
}

onSelect(data): void {
console.log('Item clicked', JSON.parse(JSON.stringify(data)));
}

onActivate(data): void {
console.log('Activate', JSON.parse(JSON.stringify(data)));
}

onDeactivate(data): void {
console.log('Deactivate', JSON.parse(JSON.stringify(data)));
}
}

npm i ng-apexcharts

<apx-chart [series]="chartOptions.series" [chart]="chartOptions.chart" [xaxis]="chartOptions.xaxis"
  [stroke]="chartOptions.stroke" [tooltip]="chartOptions.tooltip" [dataLabels]="chartOptions.dataLabels"></apx-chart>

import { Component, ViewChild } from "@angular/core";
import {
ChartComponent,
ApexAxisChartSeries,
ApexChart,
ApexXAxis,
ApexDataLabels,
ApexTooltip,
ApexStroke
} from "ng-apexcharts";
export type ChartOptions = {
series: ApexAxisChartSeries;
chart: ApexChart;
xaxis: ApexXAxis;
stroke: ApexStroke;
tooltip: ApexTooltip;
dataLabels: ApexDataLabels;
};
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
@ViewChild("chart") chart: ChartComponent;
public chartOptions: Partial;
constructor() {
this.chartOptions = {
series: [
{
name: "series1",
data: [31, 40, 28, 51, 42, 109, 100]
},
{
name: "series2",
data: [11, 32, 45, 32, 34, 52, 41]
}
],
chart: {
height: 350,
type: "area"
},
dataLabels: {
enabled: false
},
stroke: {
curve: "smooth"
},
xaxis: {
type: "datetime",
categories: [
"2018-09-19T00:00:00.000Z",
"2018-09-19T01:30:00.000Z",
"2018-09-19T02:30:00.000Z",
"2018-09-19T03:30:00.000Z",
"2018-09-19T04:30:00.000Z",
"2018-09-19T05:30:00.000Z",
"2018-09-19T06:30:00.000Z"
]
},
tooltip: {
x: {
format: "dd/MM/yy HH:mm"
}
}
};
}
public generateData(baseval, count, yrange) {
var i = 0;
var series = [];
while (i < count) { var x=Math.floor(Math.random() * (750 - 1 + 1)) + 1; var y=Math.floor(Math.random() * (yrange.max
- yrange.min + 1)) + yrange.min; var z=Math.floor(Math.random() * (75 - 15 + 1)) + 15; series.push([x, y, z]);
baseval +=86400000; i++; } return series; } }

npm i @asymmetrik/ngx-leaflet

<div style="height: 300px;" leaflet [leafletOptions]="options"></div>

import { Component, OnInit } from '@angular/core';
import * as L from 'leaflet';
import { HttpClient } from "@angular/common/http";

@Component({
selector: 'app-leaflet-map',
templateUrl: './leaflet-map.component.html',
styleUrls: ['./leaflet-map.component.scss']
})
export class LeafletMapComponent implements OnInit {

constructor(private http: HttpClient) { }
 
//First map options
options1 = {
layers: [
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' })
],
zoom: 5,
center: L.latLng(46.879966, -121.726909)
};
}

npm i @ckeditor/ckeditor5-angular

<ck-editor name="editor1" [(ngModel)]="editorValue" skin="moono-lisa" language="en" [fullPage]="true"></ck-editor>

// app.component.ts

@Component({

selector: 'app',

templateUrl: 'app.component.html'

})



export class AppComponent implements OnInit {



public editorValue: string = '';



ngOnInit() { }

}

npm i ng2-ace-editor

<ace-editor [(text)]="text" #editor style="height:150px;"></ace-editor>

import { Component, OnInit, ViewChild } from '@angular/core';
import * as text from '../../../shared/data/editor/editor'

@Component({
selector: 'app-ace-editor',
templateUrl: './ace-editor.component.html',
styleUrls: ['./ace-editor.component.scss']
})
export class AceEditorComponent implements OnInit {

@ViewChild('editor') editor;

public text = text.text;
public text2 = text.text2;
public text3 = text.text3;
public text4 = text.text4;


ngAfterViewInit() {
this.editor.setTheme("eclipse");
}
ngOnInit(): void {
}
}