Software Engineering

Angular Dynamic Templates: How to Build an App With 3 Layout Styles

An advanced use case of Angular ngTemplateLayout

Photo by Halacious on Unsplash

Angular offers very powerful features that support a wide variety of advanced use cases. Today we are going to learn how to design and implement an Angular app that supports three layout styles:

• Open update view in a dialog
• Open update view in a new page with arrowBack to go back to the previous page where all items are listed
• Open multiple update views in multiple tabs

To switch between the three layouts, all we need to do is to change the value of a variable layoutStyle. It’s as simple as that. The default value is 'dialog'.

layoutStyle = 'dialog' | 'tabs' | 'newPage'

Layout style 1: Contact update in a dialog

Layout style 2: Contact update in a new tab

Layout style 3: Contact update in a new page with go-back button

We will use the container-presenter design pattern and benefit from components inheritance, content projection, and some of the cool features of Angular Core and Angular template system (ng-template, ng-container, ngTemplateOutlet) to achieve our goal. Let’s start by introducing the ng-template directive that allows a flexible layout system.

ng-template Directive

Angular is already using ng-template under the hood in many of the structural directives like ngIf, ngFor, and ngSwitch. The content of this tag contains part of a template that can be composed together with other templates in order to form the final component template. Here is a simple use case: