Transclusion Solution

by Bill Girten and Steven Scroczynski

tl; dr; Use Angular 6 Transclusion to make your code flexible and keep it DRY (don’t repeat yourself).

As developers, we often hear about the benefits of reusing code. We strive not to build one-off solutions that are ultimately abandoned or thrown away. Let’s face it: if you’re going to spend time crafting a solution, you want to make it count. You want to make it light, fast, bullet-proof, and endure the test of time.

Thus, we are faced with a hard decision. Make it flexible, or nail it down to a durable, reusable block. Many times, in our effort to create a DRY architecture, we end up sacrificing flexibility. As the application changes (due to enhancements and modifications), encroaching limitations make us wonder: How in the heck did things get so chaotic?!?

What is Transclusion?

Essentially, transclusion in Angular is taking an existing Component and injecting it into a template at a specific entry point — thus, creating another Component dynamically. With this feature you can replace several dialog Components with one dialog service that generates many dialog components on-the-fly.

Why use it?

Consider this:

The original application required that you develop a three-step Material Stepper component where each step contained its own form. You spent hours/days/weeks hot in your pursuit of a slick-looking stepper component — only to find out that the stakeholder wants a four-step component. So now you have to go back to your code and jam in yet another form. Without transclusion this would be a painful exercise potentially contributing to a long-term house of cards.

Let’s leverage Transclusion quickly

In this article, we’ll show how to use Angular 6 Transclusion to easily make components reusable and flexible. We’ll code up two components, each one being a separate step in a horizontal stepper — which will be the inner content of the app.

Fig. 1 — Transclusion App concept

Let’s Roll!

Install the preliminaries (if needed)

npm i -g typescript

npm i -g @angular/cli

Clone the GitHub repo.

bgirten/transclusion-app

We’ll be needing Material.

npm install — save @angular/material @angular/cdk

After Angular generates the project’s assets, serve up the app.

ng serve

Launch the app — http://localhost:4200

Fig. 2 — Transclusion App rendered

Transclude the page components into the stepper dynamically

Fig. 3 — Basic template where components will be injected

Additionally, we use a dynamic component, with the <dynamic-component> tag, where related instance variables are exposed for various usages. To do this, we created an interface that identifies the transcluded component. The implementation of the dynamic interface is simple.

Fig.4 — dynamic interface used in transclusion process

Inject the page components

The dynamic interface will resolve the component class and create its instance.

Fig.5 — ViewChild component used for creation of component reference

Also, notice the the payload is ultimately passed from the stepper into each page component’s instance.

If you need to add more steps to the stepper component, you simply include that additional component in the array that was established in the app component. It’s that simple!

Note: It is important (and necessary!) to include any transcluded components in the entryComponents section of the relation module — in this case, app.module.ts.

Before we go…

Hopefully, this article and related example repository will give you a quick start on leveraging the power of Angular’s Transclusion. Our current project at the office harnesses this feature for re-usability since the same forms data can be transcluded into a Create dialog as well as a sidenav Edit component. Sweet!

Let your imagination run wild and keep it DRY.