Software Engineering

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

An advanced use case of Angular ngTemplateLayout

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'

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:

The else clause is pointing to a template that has the name progress-bar. The name was assigned to it via a template reference, using the #progress-bar syntax.

Project Setup

If you don’t have Angular CLI already on your machine, then let’s start installing it by following these instructions. The next step is to create the project with this command:

ng new ng-dynamic-layout
cd ng-dynamic-layout

The ng new command prompts you for information about features to include in the initial app. Press y for “Would you like to add Angular routing?” and choose SCSS as stylesheet format, then press Enter.

• Install Angular Material, Angular Flex Layout, and Angular Forms:

npm install @angular/material
npm install @angular/cdk
npm install @angular/flex-layout

• Import Angular theme by adding this line to src/style.scss:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

• Generate BaseModule:

ng generate module shared/base-module

• Generate a new component in it, dynamic-layout:

ng generate component shared/base-module/dynamic-layout --export

• Generate ContactsModule:

ng generate module modules/contacts

• Generate the following components in it:

ng generate module modules/contacts/containers/contact-container

ng generate module modules/contacts/presenters/contact

ng generate module modules/contacts/presenters/contact-list

ng generate module modules/contacts/presenters/contact-update/contact-form

ng generate module modules/contacts/presenters/contact-update/contact-update-dialog --type=dialog

• Update routing in app-routing.module.ts:

const routes: Routes = [
  { path: '', redirectTo: 'contacts', pathMatch: 'full' },
  { path: 'contacts', component: ContactContainerComponent }
];

Dive Into Details

All right, time to dive into the good stuff now. Our main presenter in ContactsModule is ContactComponent, which is the place to specify the values for two dynamic templates — “list” and “update” — using multi-slot content projection.

The dynamic-layout tag wraps the content in the component, and depending on the value of layoutStyle, the DynamicLayoutComponent will manage how and where to render the update template:

The TypeScript part, contact.component.ts:

As you may have noticed, ContactComponent is extending BasePresenter, a parent component that takes care of handling create/open/remove for the appropriate update view and redirects the user to the list or update pages:

Similar to BasePresenter, I have used BaseContainer and BaseList parent components and delegated the common functionalities to them, which is helpful to avoid duplicating code:

Now it’s time to reveal how I’ve designed DynamicLayoutComponent. The TypeScript part does not have any logic except some input fields and event emitters to communicate with the hosting component:

dynamic-layout.component.html is our main game territory. It’s the place where I’ve added the logic to attach the right content to the right template via ng-content select="[list]" and ng-content select="[update]". I’ve specified also the placeholders to render each template with ng-container *ngTemplateOutlet="update" and ng-container *ngTemplateOutlet="list":

Last but not least is to show you how the parent StoreService looks. It’s a BehaviorSubject-based service that’s playing the role of a store at the same time. It’s the class that all modules’ store services are inheriting from as well:

The whole application is available in Github here. Check the app yourself and click around.

Final Thoughts

Angular content projection and dynamic template are very useful features to build reusable components and achieve a clean architecture. We have seen how ng-content and ng-template directives work, and how they can improve the UX design and solve problems that we face the most with enterprise applications.

Moving many functions to a central place by benefiting from Typescript/Angular inheritance allowed me to get rid of a lot of boilerplate code and facilitate maintenance in the future. The solution that I have presented is not the only one to build the end application. Feel free to give feedback about it or share how you have resolved a similar challenge.

Thanks for reading.

🧠💡 I write about engineering, technology, and leadership for a community of smart, curious people. Join my free email newsletter for exclusive access or sign up for Medium here.

You can check my video course on Udemy: How to Identify, Diagnose, and Fix Memory Leaks in Web Apps.