Introduction

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

Dependancies
  • Angular10+
  • bootstrap-4
  • SASS
  • Yes! again No Jquery dependency.

    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 an Angular from angular.io

    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 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
                           
                          
    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 ng 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, with the --open option.
  • ng serve --open
                           
                          

    Endless 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 Endless theme by
    • 1) Download and extract an endless themes from themeforest
    • 2) Extract it and then go in to particular folder in which theme is there.
    • cd  theme-folder
                             
                            
    • 3) Import all dependency by installing npm command
    • npm install
                             
                            
    • 4) Now you are in stage to successfully run endless using below command:
    • ng serve
                             
                            

    Common Issues:

    A common issue which user face during setup
    • 1) If you had not doing "npm i" command for installing all depencies and directly run "ng serve" command you may have following error
    • Solution:
      npm install
                               
                              
    • 2) when running command using "ng serve" you may get sass error as below:
    • Solution:
      npm install node-sass --save-dev 
                               
                              

    Folder Structured

    Here we represent Angular Folder Structure and Style Customize

    • Endless Admin
      • e2e
      • node_modules
      • src
        • app
          • app-component.ts
          • app.component.html
          • app-routing.module.ts
          • app.component.scss
          • app.module.ts
        • Assets
          • Ajax
          • Css
          • Fonts
          • Images
          • virtual_images
          • Js
          • Json
          • Scss
          • Video
        • environments
          • environment.ts
        • fevicon.ico
        • index.html
        • main.ts
        • polyfills.ts
        • style.css
      • angular.json
      • package.json
      • tsconfig.json

    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! 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"
    Theme options

    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"
    Header options

    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

    Ngx-Translate

    Installing and usage
                                  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:
    The JSON translation file

    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>

    HTML Structured

    Header Structured

    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>
    Content Structured

    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 Structured

    Footer structure to complete endless structure.

                                  <footer class="footer">

    <div class="container-fluid">
    .............
    </div>

    </footer>
    Basic UI Elements
    PrimarySecondarySuccessInfoWarningDangerLightDark
                                    <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>
    Dismissible popover
                                    <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>

    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>
    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.
    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.
    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 aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
                                    
    <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>
    Larger shadow
    Larger shadow
    Regular shadow
    Regular shadow
    small shadow
    Small shadow
                                      <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>

    Components

    Advance UI Elements
    Scrollbar

    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.

    Installing and usage
                                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
    };
    }
    To use java script you have to add the following script tag
                                    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
    }
    ]
    })
    Sweet Alert

    A beautiful, responsive, customizable, accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies.

    Installing and usage
                                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')
    }
    Drag And Drop
    Installing and usage
                                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()
    ]
    })
    DropZone

    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.

    Installing and usage
                                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
    }
    ]
    })
    Toastr
    Installing and usage
                            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]
    })
    Owl-Carousel
    Installing and usage

    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 ]
    })
    Range Slider
    Installing and usage

    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 {}
    Tour
    Installing and usage
                            npm i angular-custom-tour
     
                            
                                <!-- Bluring element insert on top of the page-->
    <tour-overlay></tour-overlay>

    <!-- start TOUR -->
    <button name="button" (click)="startTour()"> START!</button>

    <!-- Each step could be placed at ANYWHERE -->
    <div class="i-want-highlight-this" id="highlight-me"> WOW!</div>

    <tour-step selector="highlight-me" order="3" position="right" title="title string">
    <!-- ANY HTML HERE NOTE: ONLY selector attribute is required! others is up to you -->

    </tour-step>
                                import { HintService } from 'angular-custom-tour'

    @Component({
    ...
    providers: [... HintService ... ],
    ...
    })

    class AppComponent {

    constructor(public hintService: HintService){ }

    startTour() {
    this.hintService.initialize();
    }

    }
                                import { HintModule } from 'angular-custom-tour'

    @NgModule({
    ...
    imports: [
    ...
    HintModule // Put here
    ...
    ]
    ...
    ]
    Upload
    Installing and usage
    Easy to use Angular2 directives for files upload

    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
    ...
    ] ]

    Map

    Google Map

    Angular Google Maps (short name: AGM) gets shipped via the Node Package Manager (NPM). Run the following command to add it to your new project:

    Installing and usage
                              npm install @agm/core --save
                              
                                  <!-- this creates a google map on the page with the given lat/lng from -->
    <!-- the component as the initial center of the map: -->
    <agm-map [latitude]="lat" [longitude]="lng">
    <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
    </agm-map>
    To use java script you have to add the following script tag
                                  import { Component } from '@angular/core';
    @Component({
    ....
    })
    export class AppComponent {
    title: string = 'My first AGM project';
    lat: number = 51.678418;
    lng: number = 7.809007;
    }
    To use java script you have to add the following script tag
                                  agm-map {
    height: 300px;
    }
    To use java script you have to add the following script tag
                                  import { AgmCoreModule } from '@agm/core';
    
    @NgModule({
    ...
    imports: [
    ...
    AgmCoreModule.forRoot({
    apiKey: 'YOUR_KEY'
    })
    ],
    providers: [],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ]
    })
    export class Module { }
    Ngx-leaflet

    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 v10, Ahead-of-Time compilation (AOT), and use in Angular-CLI based projects.

    Installing and usage
                              npm install leaflet
    npm install @asymmetrik/ngx-leaflet
                                  <div style="height: 300px;" leaflet [leafletOptions]="options">
    </div>
                                    
    To use java script you have to add the following script tag
                                  //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)
    };
    }
    To use java script you have to add the following script tag
                                  //import file in angular.json 
    {
    "styles": [
    "styles.css",
    "./node_modules/leaflet/dist/leaflet.css"
    ],
    }
    To use java script you have to add the following script tag
                                  import { AgmCoreModule } from '@agm/core';
    @NgModule({
    ...
    imports: [
    ...
    AgmCoreModule.forRoot({
    apiKey: 'YOUR_KEY'
    })
    ],
    providers: [],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ]
    })
    export class Module { }

    Editors

    ngx-ckeditor

    The CKEditor component for angular(2.x+)

    Installing and usage
                              npm i -S ngx-ckeditor
                              

                                  <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() { }
    }
    To use java script you have to add the following script tag
                                  // app.module.ts

    import { CKEditorModule } from 'ngx-ckeditor';

    @NgModule({
    imports: [
    // ...
    CKEditorModule
    ],
    // ...
    })
    export class AppModule {...}
    ngx-editor
    Installing and usage
                              npm install ngx-editor --save
                              

                                  <app-ngx-editor [placeholder]="'Enter text here...'" [spellcheck]="true" [(ngModel)]="htmlContent"></app-ngx-editor>
    
                                  // app.component.ts
    @Component({
    selector: 'app',
    templateUrl: 'app.component.html'
    })

    export class AppComponent implements OnInit {

    ngOnInit() { }
    }
    To use java script you have to add the following script tag
                                  // app.module.ts

    import { NgxEditorModule } from 'ngx-editor';

    @NgModule({
    imports: [
    // ...
    NgxEditorModule
    ],
    // ...
    })
    export class AppModule {
    }
    Kolkov Editors

    A simple native wysiwyg editor for Angular 6+, 7+, 8+

    Installing and usage
                              npm install @kolkov/angular-editor --save
                              

                                  <angular-editor [placeholder]="'Enter text here...'" [(ngModel)]="htmlContent"></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",
    },
    ]
    };
    To use java script you have to add the following script tag
                                  // app.module.ts

    import { AngularEditorModule } from '@kolkov/angular-editor';

    @NgModule({
    imports: [
    // ...
    AngularEditorModule
    ],
    // ...
    })
    export class AppModule {
    }

    Timeline

    angular-vertical-timeline

    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 v10, Ahead-of-Time compilation (AOT), and use in Angular-CLI based projects.

    Installing and usage
                              npm install angular-vertical-timeline --save
                              

                                  <!-- Add the timeline -->
    <vertical-timeline>
    <!-- Add some cards to the timeline. It works with *ngFor too -->
    <!-- If no value is passed for the date, the current time is used. -->
    <vertical-timeline-card>
    <h1>Today</h1>
    </vertical-timeline-card>
    <!-- tomorrow = new Date(2017, 9, 20, 14,34); -->
    <vertical-timeline-card [dateValue]="tomorrow">
    <h1>Tomorrow</h1>
    </vertical-timeline-card>
    </vertical-timeline>
    To use java script you have to add the following script tag
                                  //import file in styles.scss 
    @import "~angular-vertical-timeline/dist/vertical-timeline.css";
    To use java script you have to add the following script tag
        import { VerticalTimelineModule } from 'angular-vertical-timeline';

    @NgModule({
    ...
    imports: [
    ...
    VerticalTimelineModule
    ],
    providers: [],
    bootstrap: [ AppComponent ]
    })
    export class Module { }

    Forms

    Angular-archwizard

    This project contains a functional module with a wizard component and some supportive components and directives for Angular version 5 or later.

    Installing and usage
                              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 { }

    Cards

                                
    <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>

    Charts

    Ng-chartist
    Installing and usage
                              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 { }
    Ng2-charts
    Installing and usage
                                  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>
                                        
                                      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 { }
    Ng2-google-charts
    Installing and usage
                                  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 { }
    Ngx-charts
    Installing and usage
                                  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 { }

    Tables

    NGX-DataTable

    Simple table extension with sorting, filtering, paging... for Angular apps.

    Installing and usage
                                npm i ngx-datatable --save
                                
                                    
    <ngx-datatable class="bootstrap" [rows]="rows" [loadingIndicator]="loadingIndicator"
    [columns]="columns" [columnMode]="'force'" [headerHeight]="40" [summaryRow]="true"
    [summaryPosition]="'bottom'" [footerHeight]="40" [rowHeight]="'auto'"
    [reorderable]="reorderable">
    </ngx-datatable>
                                    import { Component, OnInit } from '@angular/core';
        @Component({
          selector: 'app-basic',
          templateUrl: './basic.component.html',
          styleUrls: ['./basic.component.scss']
        })
        export class BasicNgxDatatableComponent {
        
          rows = [];
          loadingIndicator: boolean = true;
          reorderable: boolean = true;
        
          columns = [
            { prop: 'name' },
            { name: 'Gender' },
            { name: 'Company' }
          ];
        
          constructor() {
            this.fetch((data) => {
              this.rows = data;
              setTimeout(() => { this.loadingIndicator = false; }, 1500);
            });
          }
        
          fetch(cb) {
            const req = new XMLHttpRequest();
            req.open('GET', 'assets/data/tables/company.json');
        
            req.onload = () => {
              cb(JSON.parse(req.response));
            };
        
            req.send();
          }
        
          import { NgModule } from '@angular/core';
        import { CommonModule } from '@angular/common';
        import { NgxDatatableModule } from '@swimlane/ngx-datatable';
        @NgModule({
          declarations: [],
          imports: [
            CommonModule,
            NgxDatatableModule
          ]
        })
        export class TablesModule { }
        
    Smart Table
    Installing and usage
                                npm install --save ng2-smart-table
                                
                                    
    <div class="table-responsive">
    <ng2-smart-table [settings]="settings" [source]="data"></ng2-smart-table>
    </div>
                                    import { Component } from '@angular/core';
    
        @Component({
          selector: 'app-smart-table',
          templateUrl: './smart-table.component.html',
          styleUrls: ['./smart-table.component.scss']
        })
        export class SmartTableComponent {
        
          public settings = {
            columns: {
              id: {
                title: 'ID'
              },
              name: {
                title: 'Full Name'
              },
              username: {
                title: 'User Name'
              },
              email: {
                title: 'Email'
              }
            }
          };
        
          public data = [
            {
              id: 1,
              name: "Leanne Graham",
              username: "Bret",
              email: "Sincere@april.biz"
            },
            {
              id: 2,
              name: "Ervin Howell",
              username: "Antonette",
              email: "Shanna@melissa.tv"
            },
            {
              id: 3,
              name: "Nicholas DuBuque",
              username: "Nicholas.Stanton",
              email: "Rey.Padberg@rosamond.biz"
            }
          ];
        
        }
        
              import { NgModule } from '@angular/core';
        import { CommonModule } from '@angular/common';
        import { Ng2SmartTableModule } from 'ng2-smart-table';
        @NgModule({
          declarations: [],
          imports: [
            CommonModule,
            Ng2SmartTableModule
          ]
        })
        export class TablesModule { }          
           
        

    Apps

    E-commerce
    Chat
    To-D0
    To-D0 with Firebase
    Email
    Bookmark
    Contact with firebase
    Calender
    Installing and usage
                                    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()
      ]
                                  
    Others
    There are many others application in endless which is help you in improve your knowledge and solve your issues.
  • Knowledge Base
  • Job Search
  • Learning
  • Social App
  • Firebase

    Basically we use firebase for:
  • Email and password authentication with Firebase,
  • Social authentication with Firebase and Google,
  • Password recovery,
  • Verification emails,
  • Storing and accessing the authentication state using the browser's localStorage and Angular Observables
  • 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:

  • Recent versions of Node.js and NPM. You can install them from their official website,
  • Angular CLI v10 installed (npm install @angular/cli -g)
  • Let's follow below step to secure your application
    • Step 1:
      • 1.setup firebase project in firebase console.

        click on Get Started button

      • 2. Add new project

        create new project

        Accept the controler-terms and click on Create Project

      • 3. Go to Develop > Authentication

      • 4. Get config object for your web app

        To get the config object for a Firebase Web App:

        >> Click the Settings icon, then select Project settings.

        >> Go to the web app

        >> In Your apps card, select the nickname of the app for which you need a config object.

        >> Select Config from the Firebase SDK snippet pane.

        >> Copy the config object snippet, then add it to your app's HTML.

        copy config add on config.txt

      • 5.Next, you'll need to enable Email authentication from the authentication > Sign-in method tab:

      • 6.go to sign in method

        Make disble toggle to enable, and save changes

      • 7.Go to the authentication > Users tab then click on the Add user button and genarate email and password:

    • Step 2:
      Installing AngularFire2
      •                                       npm install firebase @angular/fire --save
                                         
                                          
      • 2. Go to app -> app.module.ts file

      • 3. Add config.txt content on src -> environments -> enviroment.ts file

      • 4. Create login component

                                            ng g c login
                                       
                                        
      • 5. Create auth service.

                                            ng g s auth/auth.service
                                       
                                        

        once you create auth.service then adding following imports:

                                            import { Router } from  "@angular/router";
              import { auth } from  'firebase/app';
              import { AngularFireAuth } from  "@angular/fire/auth";
                                       
                                        
      • 6 .Next, Add user interface in auth.service

                                              export interface User {
              uid: string;
              email: string;
              displayName: string;
              photoURL: string;
              emailVerified: boolean;
            }          
                                         
                                          
      • 7.Next, inject the Firebase authentication service and the router via the service's constructor in auth.service:

                                          @Injectable({
                providedIn:  'root'
            })
            export  class  AuthService {
                user:  User;
                constructor(public  afAuth:  AngularFireAuth, public  router:  Router) { }
            }   
                                     
                                      
      • 8. Next, in the constructor of auth.service , we subscribe to the authentication state; if the user is logged in, we add the user's data to the browser's local storage; otherwise we store a null user:

                                            this.afAuth.authState.subscribe(user => {
              if (user){
                this.user = user;
                localStorage.setItem('user', JSON.stringify(this.user));
              } else {
                localStorage.setItem('user', null);
              }
            })
                                       
                                        
      • 9. Create a login method in auth.service

                                            async login(email: string, password: string) {
              var result = await this.afAuth.auth.signInWithEmailAndPassword(email, password)
              this.router.navigate(['Add_path']);
            }
                                              
                                       
                                        
      • 10. And then create a logout method in auth.service

                                              async logout(){
              await this.afAuth.auth.signOut();
              localStorage.removeItem('user');
              this.router.navigate(['Add_path']);
            }   
                                         
                                          
      • 11. Then create isLoggedIn() for check if the user is logged in or not in auth.service:

                                                get isLoggedIn(): boolean {
                const  user  =  JSON.parse(localStorage.getItem('user'));
                return  user  !==  null;
            }
                                            
      • 12. Finally, add loginWithGoogle() method in auth.service that will be used to authenticate users with Google

                                                  async  loginWithGoogle(){
              await  this.afAuth.auth.signInWithPopup(new auth.GoogleAuthProvider())
              this.router.navigate(['Add_path']);
          }
                                             
                                              
    • Step 3:
      • 1.generate guard use following command :

                                            ng g guard admin/admin
                                        

        Add services and guards provider in app -> app.module.ts

        From the code, you see that a guard is simply a service that implements the CanActivate interface and overrides the canActivate() method. In this case, it always returns true which means access will be always granted to the user when this guard is applied to a route.

        This method to only allow access if the user is logged in. First, you need to import AuthService and inject it via the AdminGuard service and next you need to call the isLoggedIn property in the canActivate() method to check if the user is logged in and return true or false; The canActivate() method will return true if the user is logged in or false otherwise.

      • 2. Go to routing.module.ts file and update it accordingly

    How to remove the firebase from endless 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

    Basically Our team will support in
  • 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

    Hand crafted & made with