I am looking for a way to incorporate dynamic content around an input in my Angular application.
My approach involves creating a custom component and utilizing ng-content to connect the behavior with the input. Here is an example:
<my-wrapper>
<input type="text" otherAttributes...>
</my-wrapper>
The structure of my wrapper would look something like this:
HTML:
<span>
<ng-content #myRef></ng-content>
<button (click)="perform(myRef)">Click me!</button>
</span>
And the corresponding TypeScript function:
perform(myRef: HTMLIntpuElement) {
myRef.value = 'something else';
}
I am aware that ng-content does not technically exist, and it is not possible to directly reference it since the content may consist of multiple elements. Is there a more elegant "Angular way" to access this content instead of resorting to native element manipulation?