The documentation on Angular content projection seems pretty sparse, but while I have managed to get the content projection to work, it is unclear to me how to pass Bootstrap classes down to the projected content <ng-content></ng-content> in the child component, or if it is even possible to do so?

For example, if I have a simple button that I am projecting:

<a class="btn btn-primary dropdown-toggle mr-4" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">My Buttton</a>

how do I pass the classes (e.g. .btn and .btn-primary) down to the projected content so that is properly styled?

1 Answers

Sunil Kashyap On Best Solutions

projecting content is just like rendering HTML code to the child component so whatever you put in between child component tag it will render to the ng-content tag in the child. so if your HTML content bootstrap classes then no need to pass classes or style.

working example - skdroid-ngcontent-content-projection