function doTransform(input: unknown): string {
console.log('doTransform', input);
return I was transformed! ${input};
}

@component({
standalone: true,
template: 'Hello from a Web Component! {{ someInput }}',
styles: [:host {display: block}]
})
export class MyAngularElement {
@input({ transform: doTransform }) someInput: string = '';
}

@component({
selector: 'my-app',
standalone: true,
imports: [CommonModule],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
template: <my-web-component some-input="No Binding" /> <my-web-component [someInput]="'Binding'" />,
})
export class App implements OnInit {
private readonly injector = inject(Injector);
ngOnInit(): void {
const customElement = createCustomElement(MyAngularElement, {
injector: this.injector,
});
customElements.define('my-web-component', customElement);
}
}