ng-content

ng-content is Angular’s placeholder for children content.

@Component({
  selector: 'wrapper-component',
  template: `
    <div class="card-shadow">
      <ng-content />
    </div>
  `,
})
export class CustomCard {/* ... */}

Then, the content can be passed as the child to this wrapper component:

<wrapper-component>
	<p>Some child</p>
</wrapper-component>

Multiple placeholders / specifing ng-content

Using an attribute on ng-content, we can select the type of HTML attribute that is passed:

<div>
  <ng-content select="card-title"></ng-content>
  ... 
  <ng-content select="card-body"></ng-content>
</div>

There can be multiple with an “select” and one without any - the rest will be passed to this unspecified ng-content.

Thereby, ng-content can use the same selectors as components.

<h3 ngProjectAs="card-title">Hello</h3>can instead be used of writing an element with the tag name card-title to pass to an ng-content with select="card-title"

Resources

In-depth guide on ng-content: https://angular.dev/guide/components/content-projection