Skip to main content

Posts

Showing posts from March, 2019

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.

Is Typescript a functional language

The answer to this question is both Yes and No. Similar to many other popular programming languages like Java, Typescript is also trying to combine best of both worlds for its users. Typescript is a multi-paradigm programming language and it is has influences from Object Oriented Programming as well as fucntional programming paradigm. One of the most important concept of functional paradigm is that the languages following this paradigm ensure that the applications builts using their type system are free of side-effects. Since Typescript interoperate with Javascript, it has lost some of its freedom and unlike pure functional languages like Haskell it cannot guarantee that our applications will be free from side-effects. Languages like Haskell ensure this through their type system. We can however use FP techniques to improve our type safety. For example look at the following code snippet findNumber (numbers: Number[], input: number): number { if(numbers.length == 0) { throw

Web components

Introduction Did you ever came across a situation when you created a really nice UI component for an application and wanted to use it in another application but both application were using an entirly different framework due to which it was difficult for you to port the component from one application to the other.  Web components are set of web APIs that allows you to create custom, reusable components for web applications. These custom components add in the HTML vacabulary and can be used in any Javascript library or framework. So they let developers easily extend HTML with new elements. Magic behind the elements So how are we as developers are enable to create new custom elements and use them anywhere we want. If you run your developer console and run following window.customElements You will find a bunch of properties and mathods. I am sure you have a clue about how you can extend your browser's html vacabulary. Defining a new HTML element Custom el