# Content Projection — Angular Fundamentals: Components, Signals and Routing

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

> Let parents pass markup into a component with ng-content slots and select attributes.

## <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]">`.