Angular

Last Updated: 8/21/2023

NgContent

  • If you are building re-usable components and you want the consumer to provide custom content use ng-content
  • To allow consumer of the component to be able to inject text or markup into the component
    • Use Property Binding
    • Use ng-conent
  • Allow to add injection points so the consumer of the component can provide content into those injection points
  • ng-content is element defined in angular

Single ngContent

<div>
 <ng-content></ng-content>
</div>

Multi ngContent

  • Use select to differentiate and can be css, id or element
  • ngContent will be replaced with the element matching select

Component

  • If you are building re-usable components always prefix them. eg bootstrap-panel
<div class="panel panel-default">
	<div class="panel-heading">
	 	<ng-content select=".heading"></ng-content>
	</div>
	<div class="panel-body">
	 	<ng-content select=".body"></ng-content>
	</div>
</div>

Consumer

<bootstrap-panel>
	<div class="heading">Heading</div>
	<div class="body">Body content</div>
</bootstrap-panel>
Previous
Next