Content projection, also known as “ng-content” in Angular, is a mechanism that allows you to pass content (HTML or other Angular components) into a component from the outside. It is a fundamental feature for creating reusable and flexible Angular components, especially when you want to create components that can accept arbitrary content while maintaining their structure and behavior.
Content projection is achieved using the element within an Angular component’s template. Here’s how it works:
Component Definition: You define an Angular component that includes within its template. This is where the projected content will be inserted.
@Component({
selector: 'app-custom-component',
template: `
<div class="custom-component">
<h2>Custom Component Header</h2>
<ng-content></ng-content> <!-- This is where content will be projected -->
</div>
`,
})
export class CustomComponent {}
Component Usage: When you use the app-custom-component in another template, you can insert content between the opening and closing tags of the component. This content will be projected into the <ng-content></ng-content> slot of the custom component.
<app-custom-component>
<p>This content will be projected into the custom component.</p>
</app-custom-component>
In this example, the <p> element and its content will be projected into the <ng-content></ng-content> slot within the CustomComponent template. When the component is rendered, it will look like this:
<div class="custom-component">
<h2>Custom Component Header</h2>
<p>This content will be projected into the custom component.</p>
</div>
Content projection is particularly useful for creating flexible and reusable components, as it allows you to pass dynamic content into a component without having to modify the component’s internal template. It’s commonly used for creating components like modals, tabs, accordions, and more, where the content inside the component can vary based on how it’s used.