Can Activate Route Guard for User Authentication Angular 8 | angular log...

Table Dropdown Filter with jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function() {
    function addRemoveClass(theRows) {
        theRows.removeClass("odd even");
        theRows.filter(":odd").addClass("odd");
        theRows.filter(":even").addClass("even");
    }
    var rows = $("table#myTable tr:not(:first-child)");
    addRemoveClass(rows);
    $("#dropdownField").on("change", function() {
        var selected = this.value;
        if (selected != "All") {
            rows.filter("[position=" + selected + "]").show();
            rows.not("[position=" + selected + "]").hide();
            var visibleRows = rows.filter("[position=" + selected + "]");
            addRemoveClass(visibleRows);
        } else {
            rows.show();
           addRemoveClass(rows);
        }
    });
});

</script>

app.component.html

<div class="dropdownList">
  Filter By Name
  <select id="dropdownField">
      <option value="All" selected>All</option>
      <option value="Student">Student</option>
      <option value="Assistant">Assistant</option>
   
  </select>

</div>
<table id="myTable">
  <tr id="headerRow">
      <td>First Name</td>
       <td>Age</td>
      <td>Position</td>
  </tr>

  <tr position="Student">
      <td>John</td>
       <td>25</td>
      <td>Student</td>
  </tr>

 
  <tr position="Professor">
      <td>Olivia</td>
       <td>25</td>
      <td>Professor</td>
  </tr>

  <tr position="Professor">
      <td>Ava</td>
       <td>21</td>
      <td>Professor</td>
  </tr>

  <tr position="Student">
      <td>Sophia</td>
       <td>20</td>
      <td>Student</td>
  </tr>

</table>

styles.css
body{
  font-family: Arial, Helvetica, sans-serif; font-size:28px;
}
#myTable{
  width:100%;
  border-collapse:collapse;
  }
  #headerRow {
    background: #2700ff;
    color: white;
    font-weight: bold;
}
  #myTable td{
  padding:5px;
  border:1px solid #00a5e4;
  text-align:left;
  }
  .dropdownList {
  padding-bottom:10px;
  font-weight:bold;
  }
  #dropdownField {
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 16px;
    height: 30px;
    width: 200px;
    color: white;
    background-color: #2700ff;
}
.odd {
  background: #cceaff;
}
.even {
  background: #99e3ff;
}

app.component.ts
<div class="icon-bar">
<a href="#" class="facebook"><i class="fa fa-facebook"></i></a> 
 <a href="#" class="twitter"><i class="fa fa-twitter"></i></a> 
 <a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
</div>
    <header><h3><span style="color: yellow; font-size: 65px;">Angular Font Awesome</span> Sticky Social Side Bar</h3></header>

    <div class="content">

   <p>The Sticky social bar will stick to the screen when you scroll.</p>
    <p>
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
   </p>
   <p>
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
   </p>
  <p>
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
   </p>
   <p>
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
   </p>
  <p>
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
   </p>
  <p>
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
   </p>
</div>

styles.css

body {

  margin: 0;

  height: 1800px;

  background: #000;

  color: #FFF;

}

.icon-bar {

  position: fixed;

  top: 50%;

  -webkit-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  transform: translateY(-50%);

}

header{

  position: fixed; width: 100%;

  top: -52px;

}

header h3 {

  background: #0400ff;

  padding: 18px;

  font-size: 47px;

  color: #00ffe0;

}

.icon-bar a {

  display: block;

  text-align: center;

  padding: 16px;

  transition: all 0.3s ease;

  color: white;

  font-size:50px;

}

.icon-bar a:hover {

  background-color: #ff6b01;

}

.facebook {

  background:#0541be;

  color: white;

}

.twitter {

  background:#0091ff;

  color: white;

}

.linkedin {

  background:#005780;

  color: white;

  font-size: 37px;

}

.content {

  font-size: 30px;

  width: 80%;

  text-align: justify;

  float: right;

  margin-top: 20px;

  right: 8%!important;

  font-family: sans-serif;

  z-index: -111;

  position: relative;

}

Install Packages

npm i angular-font-awesome

angular.cli.json
  "styles": [
        "styles.css",
        "../node_modules/font-awesome/css/font-awesome.css"

      ],

Angular 8+ with ngx-charts

app.component.html
----------------------------------------------
    <div style="display: inline-block">
    <ngx-charts-area-chart
      [view]="view"
      [scheme]="colorScheme"
      [results]="multi"
      [gradient]="gradient"
      [xAxis]="showXAxis"
      [yAxis]="showYAxis"
      [legend]="showLegend"
      [showXAxisLabel]="showXAxisLabel"
      [showYAxisLabel]="showYAxisLabel"
      [xAxisLabel]="xAxisLabel"
      [yAxisLabel]="yAxisLabel"
      [autoScale]="autoScale"
      (select)="onSelect($event)">
    </ngx-charts-area-chart>
    </div>

app.component.ts
----------------------------------------------
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

public multi = [
  {
    "name": "India",
    "series": [
      {
        "name": "2009",
        "value": 7500000
      },
      {
        "name": "2010",
        "value": 8948000
      }
    ]
  },

  {
    "name": "USA",
    "series": [
      {
        "name": "2009",
        "value": 7874000
      },
      {
        "name": "2010",
        "value": 8276000
      }
    ]
  },
  {
    "name": "Singapur",
    "series": [
      {
        "name": "2009",
        "value": 5004002
      },
      {
        "name": "2010",
        "value": 5804000
      }
    ]
  }
];
 view: any[] = [700, 400];
  showXAxis = true;
  showYAxis = true;
  gradient = false;
  showLegend = true;
  showXAxisLabel = true;
  xAxisLabel = 'Number';
  showYAxisLabel = true;
  yAxisLabel = 'data';
  timeline = true;
   colorScheme = {
    domain: ['#E91E63', '#CDDC39', '#3F51B5', '#AAAAAA']
  };}

app.module.ts
-----------------------------------------------------------
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgxChartsModule } from "@swimlane/ngx-charts";
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxChartsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Install

To use ngx-charts in your project install it via npm:

npm i @swimlane/ngx-charts --save

How to use Bar chart in angular 8 | Angular Bar chart | Dashboard in Ang...

How to use Line Charts in angular 8 | Angular Line Charts | Dashboard in...

�� Angular route guards | Activate Route Guards in Angular 7 / 8 | Auth G...

auth.guard.ts

import { Injectable } from '@angular/core';
import { CanActivate, Router} from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(private router:Router)
{}

  canActivate(){

    if (localStorage.getItem('isLoggedin'))
    {
      return true;
    }

    this.router.navigate(['/login']);
    return false;
    
  }
  
}

app-routing.module.ts

import { NgModule } from '@angular/core';

import { Routes, RouterModule } from '@angular/router';

import { AuthGuard } from './auth.guard';

const routes: Routes = [

  {

    path:'', loadChildren:() => import ('./layout/layout.module').then(m=> m.LayoutModule),canActivate:[

      AuthGuard

    ]},

    {

      path:'login', loadChildren:() => import('./login/login.module').then(m=>m.LoginModule)

    }

];

@NgModule({

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule]

})

export class AppRoutingModule { }

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 { AuthGuard } from './auth.guard';

@NgModule({

  declarations: [

    AppComponent,

  ],

  imports: [

    BrowserModule,

    AppRoutingModule

  ],

  providers: [AuthGuard],

  bootstrap: [AppComponent]

})

export class AppModule { }

layout.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LayoutComponent } from './layout.component';

const routes: Routes = [
  {
    path:'',
    component:LayoutComponent,
    children:[

      {
        path:'', redirectTo:'dashboard', pathMatch:'prefix'
      },
      {
        path:'dashboard', loadChildren:() => import('./dashboard/dashboard.module').then(m=>m.DashboardModule)

      }

    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

export class LayoutRoutingModule { }

layout.component.ts

<app-header></app-header>
<router-outlet></router-outlet>

Lazy Loading in Angular | Lazy Loading Modules in Angular | Angular 8 La...

For now our project structure should look like this.

Adding features to our Application

app-routing.module.ts

import { NgModule } from '@angular/core';

import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [

{ path:'home', loadChildren:() => import('./home/home.module').then(m=> m.HomeModule) },

{ path:'about', loadChildren:() => import('./about/about.module').then(m=> m.AboutModule)},

{ path:'services', loadChildren:() => import('./services/services.module').then(m=> m.ServicesModule)},

{ path:'demo1', loadChildren:() => import('./demo1/demo1.module').then(m=> m.Demo1Module)},

{ path:'demo2', loadChildren:() => import('./demo2/demo2.module').then(m=> m.Demo2Module)},

];

@NgModule({

imports: [RouterModule.forRoot(routes)],

exports: [RouterModule]

})

export class AppRoutingModule { }

And our app.component.html like this.

<nav class="navigation">

  <div class="container">

    <a [routerLink] ="['/home']">Home</a>

    <a [routerLink] ="['/about']">About Us</a>

    

    <div class="dropdown">

      <button class="dropbtn">Services 

        <i class="fa fa-caret-down"></i>

      </button>

      <div class="dropdown-content">

        <a [routerLink] ="['/services']">Services</a>

        <a [routerLink] ="['/demo1']">Demo1</a>

        <a [routerLink] ="['/demo2']">Demo2</a>

      </div>

    </div> 

  </div>

  </nav>

<div class="container">

<router-outlet></router-outlet>

</div>

How to use Chart.js

In this tutorials..How  to integrate chart Js in Angular 8.Here is Command to use Chart Js in Angular

Install the library

First, you'll need to install the Chart.js library:

npm install chart.js --save

Next, import the module in your Component:

import { Chart } from 'chart.js';

Configuring the chart

app.component.ts

import { Component, OnInit } from '@angular/core';

import {Chart} from 'chart.js';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit {

 PieChart=[];

  ngOnInit()

 {

   this.PieChart = new Chart ('pieChart', {

   type:'pie',

   data:{ 

     labels:["Blue", "Green", "Pink"],

     datasets:[{

       label: 'Vote Now',

       data:[101,102,103],

       backgroundColor:[

         'rgba(40,23,244,0.9)',

         'rgba(192,255,0,0.9)',

         'rgba(239,23,240,0.9)',

       ], }] },

   options:{ title:{ Text:"Bar Chart",

     display:true },

     scales:{  yAxes:[{ ticks:{ begainAtZero:true

         }  }]   }  } }); }}

app.component.html

<h1 align="center">Ujjwal Technical Tips</h1>

<div>

  <canvas id="pieChart"></canvas>

</div>

<router-outlet></router-outlet>

Output

Here is Video Links 

Subscribe On YouTube 

🎯 Subscribe for Daily Tutorials → https://bit.ly/2tRrYGX 🔔 Stay updated!

NgSelect with Single/ Multiple Selection and Search Filter

Create a new Angular project

Using Ng CLI tool we will create a new Angular project by running below command in terminal:

$ ng new ng-select-demo

Install & Configure ng-select

After creating an Angular project next we will install ng-select page.

Step 1) Run the following command in terminal to install ng-select:

$ npm install --save @ng-select/ng-select

Step 2) To use ng-select component, we need to import NgSelectModule & FormsModule in app.module.ts file:

// 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 { NgSelectModule } from '@ng-select/ng-select';

import { FormsModule } from '@angular/forms';

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    AppRoutingModule,

    NgSelectModule,

    FormsModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

Step 3) Finally, add a theme to style our awesome ng-select component.

We already have three themes available to select from. Import any of the following in the style.css file:

@import "~@ng-select/ng-select/themes/default.theme.css";







Use ng-select Component

To create a select component add the ng-select component as shown below:

<ng-select [items]="items"

               bindLabel="name"

               placeholder="Select item"

               appendTo="body"

               multiple="true"

               [(ngModel)]="selected">

    </ng-select>

with component class content: // app.component.ts

import { Component } from '@angular/core';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  items = [

    {id: 1, name: 'Python'},

    {id: 2, name: 'Node Js'},

    {id: 3, name: 'Java'},

    {id: 4, name: 'PHP', disabled: true},

    {id: 5, name: 'Django'},

    {id: 6, name: 'Angular'},

    {id: 7, name: 'Vue'},

    {id: 8, name: 'ReactJs'},

  ];

  selected = [

    {id: 2, name: 'Node Js'},

    {id: 8, name: 'ReactJs'}

  ];

}

There are some required and optional properties:

items: Array or object of local or remote content to populate as select options.

bindLabel: The property of object which we want to show as a label in select box.

placeholder: Text shown to the user when nothing is selected.

appendTo: By default, the options wrapper is appended to the ng-select element but it can be added to other elements using this property.

multiple: Single or multiple options can be selected by setting true or false