How to remove extra wrapping elements in the rendered HTML?

I started learning angular 5 3 days ago so I’m quite new at it. I also use angularJS and React to develop applications and I think I don’t understand how angular 5 components fully work. If I create for example a custom button that has a custom text inside (I’m not saying this should be done this way but it’s a simple example that shows my point) like this:

<app-button>
  <app-text>
    My Text
  </app-text>
</app-button>

The rendered DOM results in:

<app-button>
  <button>
    <app-text>
      <span>
        My Text
      </span>
    </app-text>
  </button>
</app-button>

which is unreadable, I wanted to know if there’s a way to remove this wrapping elements and just place the components layout replacing the tags resulting in the following structure:

<button>
  <span>
    My Text
  </span>
</button>

If there’s no way of removing them what are your suggestions? thanks!

17 thoughts on “How to remove extra wrapping elements in the rendered HTML?”

Leave a Comment