Escrito el 02/04/2024

Angular Pro: Content Proyection

Content Projection permite injectar contenido en algún lugar.

Proyection

Si tenemos un componente que nos sirve para dos funcionalidades diferentes. Por ejemplo un formulario

<div>
  <h3>Title</h3>
  <label for="name">Name</label>
  <input type="text" name="name" />
  <button type="submit">Submit</button>
</div>

que se utiliza en varios lugares

<div>
  <form-component (onSubmit)="handleCreate($event)"></form-component>
  <form-component (onSubmit)="handleUpdate($event)"></form-component>
</div>

pero queremos que el titulo sea distinto en cada lugar. Lo hace hacemos es:

<div>
  <ng-content></ng-content>
  <label for="name">Name</label>
  <input type="text" name="name" />
  <button type="submit">Submit</button>
</div>

<div>
  <form-component (onSubmit)="handleCreate($event)">
    <h3>Create Element</h3>
  </form-component>
  <form-component (onSubmit)="handleUpdate($event)">
    <h3>Update Element</h3>
  </form-component>
</div>

Slots

Para poder proyectar contendido en diferentes lugares, se pueden usar:

selectors

Para projectar tags.

<div>
  <ng-content select="h3"></ng-content>
  <label for="name">Name</label>
  <input type="text" name="name" />
  <ng-content select="button"></ng-content>
</div>

<div>
  <form-component (onSubmit)="handleCreate($event)">
    <h3>Create Element</h3>
    <button type="submit">Create</button>
  </form-component>
  <form-component (onSubmit)="handleUpdate($event)">
    <h3>Update Element</h3>
    <button type="submit">Update</button>
  </form-component>
</div>

slots

Para projectar components.

<div>
  <ng-content select="app-title"></ng-content>
  <label for="name">Name</label>
  <input type="text" name="name" />
  <ng-content select="button"></ng-content>
</div>

<div>
  <form-component (onSubmit)="handleCreate($event)">
    <app-title>Create Element</app-title>
    <button type="submit">Create</button>
  </form-component>
  <form-component (onSubmit)="handleUpdate($event)">
    <h3>Update Element</h3>
    <button type="submit">Update</button>
  </form-component>
</div>