Search code examples
javascriptangulartypescriptcomponents

Angular possible put child to component

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.

Solution

  • 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 :)