Angular - Single Slot Content Projection

A component involving only one content projection is called single-slot content projection.

Example - Single Slot Content Projection

Let us understand the content projection by creating the above explained component.

Step 1: Create a projectionSample application using the below command −

ng new projectionSample

Step 2: Navigate to project folder and create a new component with the name content-projection-sample:

cd projectSample

ng generate component content-projection-sample
CREATE src/app/content-projection-sample/content-projection-sample.spec.ts (675 bytes)
CREATE src/app/content-projection-sample/content-projection-sample.ts (271 bytes)
CREATE src/app/content-projection-sample/content-projection-sample.css (0 bytes)
CREATE src/app/content-projection-sample/content-projection-sample.html (41 bytes)

Step 3: Add <ng-content> tag in the template, i.e. content-projection-sample.html file as shown below −

content-projection-sample.html

<p>This is content from the component template</p>
   <ng-content></ng-content>
<p>This is another content from component template</p> 

Step 4: Use the content-projection-sample component in the app.html file as shown below −

app.html

<app-content-projection-sample>
   <p>This is external content</p>
</app-content-projection-sample>
<router-outlet></router-outlet>

Step 5: Now import the ContentProjectionSampleComponent inside the App Component.

App.ts

import { Component, signal } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { ContentProjectionSample } from './content-projection-sample/content-projection-sample';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet, ContentProjectionSample],
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App {
  protected readonly title = signal('nestedApplication');
}

Output

The output of the application is as shown below −