I'm trying to create an Angular reusable button component. Right now, it is used like so:

<fun-button
  [disabled]="true">
  [label]="'button label'"
>
</fun-button>

The template for fun-button looks like this:

<button>
  {{this.label}}
</button>

So far, so good. Everything works.

Now I would like to modify fun-button so that it is used more like an HTML button:

<fun-button>
  child button label
</fun-button>

How can I access fun-button's DOM children, which in this case is the string 'child button label'?

Is such a thing even possible? I've seen a bunch of answers that involve tagging the child elements, but in my case I want to accept any arbitrary children.

Thanks!

EDIT, WITH ANSWER:

Turned out to be incredibly easy, thanks MikeOne. Just made the template look like this:

<button>
  <ng-content></ng-content>
</button>

And then use like this:

<fun-button>
  child button label
</fun-button>