Angular Tips | Use Projection technique for improve your components reusability

Reusability is one of the pillars of software engineering and an important indicator that informs us of, among others, the quality of the architecture of a module, component, system …

Angular proposes an architecture based on Web Components with the aim of improving the quality of the project, the reuse of code blocks, modularization …

Some of the best known techniques for writing our components are C omposition and Parameterization. With these techniques, we can encapsulate blocks of code within each other (giving rise to new components) and configure their appearance and behavior according to some parameters.

The objective of this article is to introduce a lesser known technique that improves the reusability of the components: the Projection.

Composition example

list.component.html

<h1> List of items </h1>
<item *ngFor="let item of items"> </item>

item.component.html

<div>
  <h2> {{ item.title }} </h2>
  <p> {{ item.text }} </p>
</div>

Applying this technique, we can create components by composing others.

Example of Parameterization

parameterized.component.ts

@Component({
  ...
})
export class ParametrizedComponent {
  @Input() param1: string;  
  @Input() param2: boolean;

  constructor() {}
}

parameterized.component.html

<h1> {{ param1 }} </h1>
<span *ngIf="param2" class="badge badge-secondary"> New </span>

foo.component.html

<h1> This is an example of ParameterizedComponent usage </h1>
<parametrized
  [param1]="This is a title"  
 [param2]="true">
</parameterized>

Applying this technique, we can create components with a ppearance and dynamic behavior dependent on parameters.

Improving reusability: Component Projection

By using the previous techniques, we have managed to encapsulate small blocks of code into components, composing them to give rise to others (composition) and giving them a different behavior and appearance depending on a series of predefined parameters.

However, we can go a step further.

Imagine that you wanted to create a layout with a hierarchy that could vary beyond configurations through parameters:

We could use the technique of composition and parameterization, although we would limit the parameters and force us to write components and templates with the sole purpose of being used in … perhaps a single component?

Let’s see how our template could be using the projection to create a “card” component (with its header, body and footer):

tree.component.html

<card>
  <card-header> Some header </card-header>
  <card-body>
    <div class="content">
      <h2> Title </h2>
      <p> Lorem impsum... </p>
      <img src="awesome-foo.png">
    </div>
  </card-body>
  <card-footer> With love by @rjlopez </card-footer>
</card>

To make possible the construction of this hierarchy, we will use the angular tag . This tag, allows us to load in the component the template that is found inside the tag of our component.

card.component.html

<div class="card text-center">
  <ng-content select="app-card-header"> </ng-content>
  <ng-content select="app-card-body"></ng-content>
  <ng-content select="app-card-footer"></ng-content>
</div>

card-header.component.html

<div class="card-header">
  <ng-content></ng-content>
</div>

With the previous sentence, using , we indicate that the component accepts an embedded html tag. And what tag do you accept? Through the “select” attribute, we inform you that you must accept tags of type . In case of not passing any value to “select”, it will accept all the content.

Conclussions

By using this technique, we can create hierarchical components and less dependent on others, which greatly improves the reusability of these. As a result, we will achieve a more flexible architecture and increase the degree of code reusability.

rjlopezdev-angular-projection - StackBlitz