# Content Projection — Angular

Source: https://www.geekswithgeeks.com/en/angular/ng-content-projection

> Let a parent pass markup into a component's template.

## <ng-content>

`<ng-content>` marks a slot inside a component's template where the parent's markup gets projected in.

```html
<!-- card.component.html -->
<div class="card">
  <ng-content></ng-content>
</div>

<!-- usage -->
<app-card>
  <h3>Title</h3>
  <p>Some card body text.</p>
</app-card>
```

## Multiple slots

Add a `select` attribute to project different pieces of markup into different slots, e.g. `<ng-content select="[card-footer]">`.