Angular possible put child to component

Question

i have maybe trivial question. I have my component (app-comp)

<div class="test">
  <ng-content select="content1"></ng-content>
  <ng-content select="content2"></ng-content>
</div>

I use this component in my component2.

<div>
  <div content1>Test</div>
</div>

Is here any option use app-comp like this:

<div>
 <content1>Test</content1>
</div>

It looks much better and it's clear at a glance. Maybe I can't and I'm asking nonsense here in which case I apologize. But I had a feeling I've seen this before and I can't quite find it because I don't know what exactly to call it. I understand that it might not be usable because that's how components are used. On the other hand, I was thinking it's inside another component, so it could be. Thank you very much.

Does this answer your question? [Pass html defined in parent to child](https://stackoverflow.com/questions/47334894/pass-html-defined-in-parent-to-child) — Florent M., Jun 02 '23 at 07:03
@FlorentM. not exactly. I want add more ng-content with custom selector. Like in my example — Petr Klekner, Jun 02 '23 at 07:31
Ok but the two blocks of code are fine, and the one you want is not possible unless content1 is an angular component with `content1` as a selector — Florent M., Jun 02 '23 at 07:44
@FlorentM. ok thank you. Can you please publish your comment as answer? Thanks — Petr Klekner, Jun 05 '23 at 09:32

score 1 · Accepted Answer · answered Jun 05 '23 at 10:13

The first and second blocks are fine and cannot be shortened the way you want.

The syntax you are using in the third block is actually the one used to call a component. So doing:

<content1>Test</content1>

Will call the component with 'content1' as selector.

It is two differents things that shall not be confused.

Plus, writting

<div content1>Test</div>

Is already a pretty cool and straight forward way to inject html in a component :)

Angular possible put child to component

1 Answers1