Possibility to add class="" using <ng-content>

Feature Request

Description

Currently the ng-content tag is just a placeholder that will be replaced. When creating eg. a component library we might get code that is encapsulated and not easily styled by the library consumers.

eg.

<ng-content select="header"></ng-content>
<div class="content">
  <div class="body">
    <ng-content></ng-content>
  </div>
</div>

in this case the body class has a padding and to be able to change that padding library consumer need to use something like ::ng-deep.

Describe the solution you’d like

Something like this perhaps?

<ng-content select="header"></ng-content>
<ng-content class="content"  select="content">
  <ng-content class="body"  select="body">
  </ng-content>
</ng-content>

and the classes would be merged… This would allow ui component creator to have default styling and also make it easier to the consumers of the component to add styling 😃

[vugar005]

Hi @indraraj26 , Thanks for example. The problem in example is you are using

.child-body :host-context(.body) {
  color: red;
}

But element with body class is not parent of .child-content, it is sibling. I changed it to

.child-body :host-context(.outer-box) {
  color: red;
}

and it worked.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}