c472c5b872
Content projection is an important part of Angular. However, it has never been documented in the Angular documentation set. This topic attempts to provide the basics of content projection for developers. It is not a comprehensive guide; rather, it is a starting point that we can hopefully expand upon in the future. PR Close #41143
42 lines
966 B
HTML
42 lines
966 B
HTML
<h2>Angular and Content Projection</h2>
|
|
|
|
<!-- #docregion single-slot -->
|
|
<app-zippy-basic>
|
|
<p>Is content projection cool?</p>
|
|
</app-zippy-basic>
|
|
<!-- #enddocregion single-slot -->
|
|
|
|
<hr />
|
|
|
|
<!-- #docregion multi-slot -->
|
|
<app-zippy-multislot>
|
|
<p question>
|
|
Is content projection cool?
|
|
</p>
|
|
<p>Let's learn about content projection!</p>
|
|
</app-zippy-multislot>
|
|
<!-- #enddocregion multi-slot -->
|
|
|
|
<hr />
|
|
|
|
<h2>Here's a zippy</h2>
|
|
|
|
<app-example-zippy>
|
|
<button appExampleZippyToggle>Is content project cool?</button>
|
|
<!-- #docregion ng-template-->
|
|
<ng-template appExampleZippyContent>
|
|
It depends on what you do with it.
|
|
</ng-template>
|
|
<!-- #enddocregion ng-template -->
|
|
</app-example-zippy>
|
|
|
|
<hr />
|
|
<app-zippy-ngprojectas>
|
|
<p>Let's learn about content projection!</p>
|
|
<!-- #docregion ngprojectas-->
|
|
<ng-container ngProjectAs="question">
|
|
<p>Is content projection cool?</p>
|
|
</ng-container>
|
|
<!-- #enddocregion-->
|
|
</app-zippy-ngprojectas>
|