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>