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.