Angular Tips | Use Projection technique for improve your components reusability
Tags: typescript, softwareengineering, angular, javascript
Published: 2023-09-03 19:48:26

---
title: Angular Tips | Use Projection technique for improve your components reusability
published: true
date: 2019-01-12 12:28:15 UTC
tags: typescript,softwareengineering,angular,javascript
canonical_url: 
---

**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
```html

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

> item.component.html
```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
```ts
@Component({
  ...
})
export class ParametrizedComponent {
  @Input() param1: string;  
  @Input() param2: boolean;

  constructor() {}
}
```


> parameterized.component.html
```html
<h1> {{ param1 }} </h1>
<span *ngIf="param2" class="badge badge-secondary"> New </span>
```

> foo.component.html
```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:

![](https://cdn-images-1.medium.com/max/321/1*0KrUOMQuHd9jSJ5CcmuXaw.png)

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
```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 **<ng-content>**. This tag, allows us to **load in the component the template that is found inside the tag of our component.**

> card.component.html
```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
```html
<div class="card-header">
  <ng-content></ng-content>
</div>
```

With the previous sentence, using <ng-content>, 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 <app-card-header>**. 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](https://stackblitz.com/edit/rjlopezdev-angular-projection?embed=1&file=src/app/card-body/card-body.component.html)