Skip to main content

Dynamic three column layout using Structural Directive in Angular 7 and Material UI based application


Recently I came across a requirement in which I had to implement a multi-column layout with Dynamic Data. At several places I had to present the data into two columns and at some other places in three or even four columns. But one thing was common which was my input. My input was always an array of some kind of objects.

The application I was writing was an Angular7 based dashboard application with lots of different ways of presenting data. I used Material UI for theming and fontaewsome for icons.

I had to present data in column layout similar to the following



In some other places I had to break data into 3 or 4 columns. Plus the layout was different at all places. For example as in the following screenshot.


There were several other places where I had to do the same but use different UI elements, colors and designs.

My only option for all such screen was to either write a recursive template for each of them or use a nested loop e.g a nested *ngFor all these screens. I found myself repeating a code like the following


<div class="col col-md-1" ngfor="let sublistIndex of [[0, list.length/2+1], [(list.length/2)+1, list.length]]">
<mat-accordion ngfor="let item of list.slice(sublistIndex[0],sublistIndex[1]);">
 <mat-expansion-panel>
   <mat-expansion-panel-header class="heading">
       {{item.title}}
   </mat-expansion-panel-header>
 </mat-expansion-panel>
</mat-accordion>
I had a different template for every place but the first line of code was essentially providing me indices to break the list into sublists. I always had to equally divide the list into sublists for all columns. In cases where number of items in list can be divided fully by number of columns, without any remainder I had to display equal number of items in all column and where there was a remainder the last column should hold extra items.

I had options to write code into my controller and repeat for every component or find a generic way to do this. I ended up with an Structural directive called *sublist. Following is the implementation of directive.

import {Directive, Input, TemplateRef, ViewContainerRef, DoCheck } from '@angular/core';

@Directive({
  selector: '[sublist][sublistOf][sublistNumberOfColumns]'
})
export class SublistDirective implements DoCheck {
  private list: any;
  private isDirty = false;
  private numberOfColumns = 1;

  @Input()
  set sublistOf(sublistOf: any) {
    this.list = sublistOf;
    this.isDirty = true;
  }

  @Input()
  set sublistNumberOfColumns (sublistNmberOfColumns: number) {
    this.numberOfColumns = sublistNmberOfColumns;
  }

  constructor(private container: ViewContainerRef,
              private template: TemplateRef) { }

  ngDoCheck(): void {
    if (this.isDirty) {
      this.isDirty = false;
      this.container.clear();
      const itemsInSublists = Math.floor(this.list.length / this.numberOfColumns);
      for (let i = 0, j = 0; i < this.numberOfColumns; i++) {
        const subList = i === this.numberOfColumns - 1 ? this.list.slice (j) : this.list.slice(j, itemsInSublists + j) ;
        this.container.createEmbeddedView(this.template, {$implicit: subList});
        j = j + itemsInSublists;
      }
    }
  }
}
So now I don't have to repeat my code anywhere and I just have to add one directive in my html anywhere, where I have to break the list to display in columns

<div class="col col-md-1" *sublist="let sublist of list; numberOfColumns: '2'">
<mat-accordion ngfor="let item of sublist">
      <mat-expansion-panel>
          <mat-expansion-panel-header class="heading">
              {{item.title}}
          </mat-expansion-panel-header>
        </mat-expansion-panel>
      </mat-accordion>
</div>

Comments

Post a Comment

Popular posts from this blog

Html5 Canvas Drawing -- Draw dotted or dashed line

This post is for those who want to use html5 canvas for drawing. The canvas API now has built in methods to create lines with dashes. The method is called setLineDash. Following is the code sample to create dashed line. var canvas = document . getElementById ( "canvas" ); var ctx = canvas . getContext ( "2d" ); ctx . setLineDash ([ 5 , 3 ]); /*Dash width and spaces between dashes.*/ ctx . beginPath (); ctx . moveTo ( 0 , 100 ); ctx . lineTo ( 400 , 100 ); ctx . stroke (); If you want to draw lines having a custom style there is no methos in the API. But fortunately there is a way to achieve this. Following is a description about how I achieved this. You can set the stroke pattern on canvas context. Stroke pattern can be created using any image. You create image for your custom pattern and set strokeStyle of the context like the following: var linePattern; imageToUsedAsPattern.onload = function() { linePattern = context.createPattern(imageToU...
Post a Comment
Read more

Grouping Exports in Javascript code

As a Javascript developer, you will come across many occassions when you will have to export many functions, variables or other items from one file and import them in different files. You may end up with a code like the following export const function1 = () => { /*something here */ } ; export const function2 = () => { /*something here */ } ; export const function3 = () => { /*something here */ } ; export const function4 = () => { /*something here */ } ; export const function5 = () => { /*something here */ } ; export const function6 = () => { /*something here */ } ; export const function7 = () => { /*something here */ } ; And in the file you want to import you will be importing like the following import { function1, function2, function3, function5, function6, function7 } from './path_to_the_script' You can improve it using * if you want to import all the functions. import * as Functions from './path_to_the_script' This is a better way of imp...
Post a Comment
Read more

Angular Directives

Word Direcitve means something that serves to direct or guide towards an action or goal. The purpose of Directives is similar in Angular too. Directives are basically markers for DOM elements and are used to either create new HTML elements or extend behavior of already present elements. There are three types of Directives Component Directive Strucutral Directive Attribute Directive To create a directive in Angular2, you have to follow these steps Create a regular javascript class and decorate it with @Directive decorator import { Directive } from '@angular/core' ; @Directive ({ selector : "[disableOnClick]" , }) class DisableOnClick { @ HostListener ( 'click' , [ '$event.target' ]) onClick ( element ) { element.disabled= "disabled" } } Declare it in your module declaraion file e.g app.module.ts import { NgModule } from '@angular/core' ; import { DisbaleOnClick } from './...
Post a Comment
Read more