Steps to Implement multi-slot content projection
Follow below steps to create an Angular 17 application with multiple content projection:
Step 1: Generate a new Angular project
ng new multiple-content-projection
Step 2: Generate a component
ng generate component content-projector
Folder Structure:
Dependencies
"dependencies": {
"@angular/animations": "^17.2.0",
"@angular/common": "^17.2.0",
"@angular/compiler": "^17.2.0",
"@angular/core": "^17.2.0",
"@angular/forms": "^17.2.0",
"@angular/platform-browser": "^17.2.0",
"@angular/platform-browser-dynamic": "^17.2.0",
"@angular/platform-server": "^17.2.0",
"@angular/router": "^17.2.0",
"@angular/ssr": "^17.2.3",
"express": "^4.18.2",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.3"
}
Step 3: Update the following codes.
<!--content-projector.component.html-->
<div>
<h2>Header Content</h2>
<ng-content select="[header]"></ng-content>
</div>
<div>
<h2>Body Content</h2>
<ng-content select="[body]"></ng-content>
</div>
<div>
<h2>Footer Content</h2>
<ng-content select="[footer]"></ng-content>
</div>
<!--app.component.html-->
<app-content-projector>
<div header>
<h3>This is the header content</h3>
</div>
<div body>
<p>This is the body content</p>
</div>
<div footer>
<p>This is the footer content</p>
</div>
</app-content-projector>
In the example above, the ContentProjectorComponent defines three slots for content projection: [header], [body], and [footer]. When using this component in app.component.html, you can provide the content for each slot by wrapping it with the corresponding CSS selector (<div header>, <div body>, and <div footer>).
Output:
Output
Angular 17 multi-slot content projection
Content projection, also called transclusion, is like passing a note in class – it’s a feature in Angular that lets you share content between different components. With Angular 17, there’s a fresh approach to handling situations where you need to pass a lot of content around, making it simpler to keep things clean and organised inside a component.