DEV Community: Anjan Kumar

Binary Clock JS

Anjan Kumar — Tue, 13 Jul 2021 19:31:29 +0000

I have developed a library for generating binary clock on a canvas tag as well as on a terminal window

checkout and let me know your ideas

Package Link
Demo Link

Screenshots

Keycloak Integration in Angular Application

Anjan Kumar — Thu, 25 Jun 2020 05:54:06 +0000

What is Keycloak?

An Open Source Identity and Access Management for Modern Applications and Services.
One of the opensource implementation of OpenID protocol.
Simple Identity Layer on top of OAuth2.0 protocol

Why do we need Keycloak in Angular?

To secure our application from unauthorized access
To identify who is the user of the application, to show the relevant content & authorized content.

Prerequisites

Angular 6/+ Application

Steps to Integrate Keycloak in Angular Application

Install Keycloak JS package
1. npm i --save keycloak-js
Install Keycloak Angular package
1. npm i --save keycloak-angular
Keycloak Server Configuration
Keycloak Initialization
1. Create a file AppInit.ts in the project src directory
Integrating into AppModule (Refer the image below these points)
1. Import KeycloakAngularModule in AppModule
2. Register Provider KeyloackService
3. Register Provider of type APP_INITIALIZER with initializer we defined in AppInit.ts
4. Register Provider AuthService (You can find the AuthService implementation below)
AuthService

AppModule
Guard configuration
1. Create a Guard ng new g auth
2. Change the definition of the class as below, notice the extends
3. Routing Module Configuration, Use the AuthGuard for routes that you want to restrict access, Assign required roles for each route in data attribute, roles parameter as an array.
Start the application ng s, then you will have the login screen provided by the Keycloak, log in with the correct user to access your application who has the roles that are assigned in the routing configuration

SSH Connection Shortcut in Windows

Anjan Kumar — Tue, 23 Jun 2020 10:27:35 +0000

In general, I use Ubuntu/ other Linux variants for the development machine. I recently switched to Windows 10 to do some documentation
In Windows 10 there are a lot more improvements than earlier, we can directly use ssh command in Command Prompt to connect server.
I frequently used to connect servers so many times a day, it is very difficult to run the same command again and again as the command history doesn't persist between sessions. So I found a simple way to create a shortcut for SSH Connection without any software installation.

Steps

Right Click on Desktop New => Shortcut
Popup Dialog will be displayed asking for the location of the file
- Enter C:\Windows\System32\cmd.exe /k ssh -i path\to\key.pem username@ipaddress
- Save it with a name

Angular Tree Table

Anjan Kumar — Mon, 22 Jun 2020 11:58:53 +0000

An angular plugin that will help you to display the hierarchical table data in a expand/ collapsible manner with a lot of other options

Prerequisites

Node JS >= 9

Angular >= 8

npm i jquery — Dependency for Bootstrap

npm i popper.js —To show the Column Visibility popover

npm i bootstrap — To show the Column Visibility popover and design

npm i file-saver —To store the API exported or generated file

npm i xlsx —To generate Excel while not using server-side processing

npm i moment —To sort date columns while not using server side processing

Installation

npm i jquery popper.js bootstrap file-saver xlsx moment angular-tree-table --save

Updating `angular.json`

Adding jQuery, Popper JS, Bootstrap CSS, and JS -
Add the following lines in scripts array under build section

"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"

Add the following lines in styles array under build section

node_modules/bootstrap/dist/css/bootstrap.min.css

Integrating into Angular Application

import AngularTreeTableModule in app.module.ts.

Configuration in Component

Declare the below variables for table initialization

tableData: TreeTableData = null; //Table Data Holder
tableConfig = new TreeTableDataConfig(); //Table Configuration
tableHeaders: TreeTableHeaderObject[] = []; //Table Headers and Property Binding

Declare the below methods to populate dummy data into the table

populateDummyData() {
    const data = [];
    for (let i = 0; i < 120; i++) {
      const row = new TreeTableRow(i + '', { sno: i+1, name: 'John '+(i+1), age: i+1. address: {dno: '1-23'}}, false, null);
      data.push(row);
    }
    this.tableData = new TreeTableData(this.tableConfig);
    this.populateHeaders();
    this.tableData.data = data;
  }
  populateHeaders() {
    this.tableHeaders.splice(0, this.tableHeaders.length);
    this.tableHeaders.push(new TreeTableHeaderObject('Sno', 'sno', null, true));
    this.tableHeaders.push(new TreeTableHeaderObject('Name', 'name', null, true));
    this.tableHeaders.push(new TreeTableHeaderObject('Age', 'age', null, true));
    this.tableHeaders.push(new TreeTableHeaderObject('User Details', '=CONCAT(Name: |||name|||<br/>|||Age: |||age)', null, true));
    this.tableHeaders.push(new TreeTableHeaderObject('D.no', 'address.dno', null, true));
    this.tableData.headers = this.tableHeaders;
  }

Adding View Element in Component View

Add the below tag in Component HTML View

<angular-tree-table [tableData]=”tableData”></angular-tree-table>

With this, you will get the view of basic Table with given data

Basic Tree Table Screenshot

Expandable Table View

To configure the row as an expandable, we need to configure the table as below

tableConfig = {
  showExpandArrows: true, // Showing Arrows each possible row
  showExpandAllArrows: true // Expand all button
};

Update the populateDummyData method as below to add Children to row

**populateDummyData**() {
    const data = [];
    for (let i = 0; i < 120; i++) {
      const row = new TreeTableRow(i + '', { sno: i+1, name: 'John '+(i+1), age: i+1}, false, null);
      if (i % 10 !== 0) {
        row.expandable = true;
        const subTableData = new TreeTableData(this.tableConfig); //We can add new config object if required
        const subData = [];
        for (let j = 0; j < (10 - i % 10); j++) {
          const subRow = new TreeTableRow(j + '', { sno: j + 1, name: 'Paul ' + (j + 1), age: j + 1}, false, null);
          subData.push(subRow);
        }
        subTableData.headers = this.tableHeaders; //Using the same headers as parent table, we can use separate if required
        subTableData.data = subData;
        row.children = subTableData;
      }
      data.push(row);
    }
    this.tableData = new TreeTableData(this.tableConfig);
    this.populateHeaders();
    this.tableData.data = data;
  }

Expandable Table Screenshot

Column Visibility Options

columnVisibility: true, // To show columns visibility options on table
columnVisibilityDropDown: true // To show columns visibility options on table as a popover

Column Visibility Options Demo — Popover and Buttons

Other Configuration Options

There are so many options, most of them are self-explanatory

tableConfig = {
      context: null, // Context for click actions
      extraInfos: [], // Show data above the table
      showTableHeaders: true, // To show/ hide headers
      columnVisibility: false, // To show columns visibility options on table
      columnVisibilityDropDown: false, // To show columns visibility options on table as popover
      visibleColumnFiltersVisibility: false,
      visibleColumnFilters: {},
      showExpandArrows: false,
      fullClassName: 'stacktable table-bordered large-only table table-sm',
      sortAscClassName: 'col-sort col-sort-asc',
      sortDescClassName: 'col-sort col-sort-desc',
      sortNothingClassName: 'col-sort col-sort-nothing',
      customClassName: null,
      showExpandAllArrows: false,
      showExpandAllEmptyChildren: false,
      sortedColumn: {},
      showPageLengthDropdown: true,
      pageSizes: [10, 25, 50, 100],
      level: 0,
      columnFilters: {},
      rowClickablesContext: null,
      rowClickables: {},
      commonSearch: true,
      excelExportButton: false,
      excelExportFileName: 'ExportFile',
      excelExportButtonText: 'Excel Export',
      excelExportAllChildren: true,
      excelExportOnlyExpanded: false,
      events: {
          shouldRowExpand: null,
          rowExpanded: null,
          shouldRowCollapse: null,
          rowCollapsed: null
      }
  }

DEMO:

AngularTreeTable Sample

https://anjnkmr.github.io/angular-tree-table

CODE:

https://github.com/anjnkmr/angular-tree-table

Medium Link

https://medium.com/@anjnkmr/angular-tree-table-bb9312c9720

DEV Community: Anjan Kumar

Binary Clock JS

Screenshots

Keycloak Integration in Angular Application

What is Keycloak?

Why do we need Keycloak in Angular?

Prerequisites

Steps to Integrate Keycloak in Angular Application

SSH Connection Shortcut in Windows

Steps

Angular Tree Table

Prerequisites

Installation

Updating angular.json

Integrating into Angular Application

Configuration in Component

Adding View Element in Component View

Expandable Table View

Column Visibility Options

Other Configuration Options

DEMO:

AngularTreeTable Sample

CODE:

Medium Link

Updating `angular.json`