Homebrew

This the 2nd part of a 2-part post about Angular Directives. Here we focus on Structure -or Structural- Directives and also, we continue with the project of the 1st part, and we provide a step-by-step example with code, for a Custom Structural Directive.

The concept of the ‘Directive’ comes from the early versions of Angular (e.g., AngularJS 1.X) The concept covers almost all the basic building blocks of Angular, including Components. Angular provides ‘ready-made’ Directives that we can use them directly in our templates. However, here we will focus on Custom Directives, with examples to both, Attribute and Structural Directives. In this post we give a step-by-step example with code, for a Custom Attribute Directive.

An Angular directive selector can have various syntax formats, following the syntax of a typical HTML element. This fact, gives us enough flexibility to apply a custom directive to any part of an HTML element. In this post we will show some fundamental syntaxes, as well as some of their variations.

Like many other languages, Typescript offers a built in Array sort() method. However, most of the times we have to use and pass our own comparison function. This is the case, especially when we have to order arrays of objects, and ordering should be based on specific object property. Moreover, we have also to take into account the default mutability of arrays, if we have to preserve the initial arrangement of the elements in an array.