i'm stuck for hours with a problem i can't solve. I've created a component and bundled it as a js file. I want to load this js file to another project. So far everything works great. But i created a Component with an @Input() decorator. Now when i add my custom component in the html of the other project and pass the @Input() property directly, still everything works. But i want that this property is not passed directly inside the html file, i want to bind it in this component. Enough said let's look what i've so far, step by step
Installed libraries and dependencies
npm i @angular/elements @webcomponents/custom-elements fs-extra concat --save
Imported scripts
"scripts":
[
"node_modules/@webcomponents/custom-elements/custom-elements.min.js",
"node_modules/@webcomponents/custom-elements/src/native-shim.js"
]
Created component
Typescript file
@Component({
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
@Input() subtitle: string;
}
Html file
<h1>Any Title<h1/>
<h4>{{subtitle}}</h4>
Registered the component in AppModule.ts
export class AppModule {constructor(private injector: Injector) { }
ngDoBootstrap() {
const widgetName = createCustomElement(AppComponent, {injector: this.injector});
customElements.define('widget-name', widgetName);
}
Now i can add this custom component in index.html and ng serve
it and everything works.
I have a build script which bundles me the component to a js file. And this works very well with this piece of code. This is what i've added to to another project.
Working example
<widget-name subtitle="Subtitle of this cmp"></widget-name>
Not working example
<widget-name [subtitle]="subtitle"></widget-name>
In the corresponding typescript file i've added a simple property in the hope that it will be binded with the subtitle
@Input() property.
subtitle = 'Why it's not working?;
I've also tried different bindings but it seems that the bindingsource is lost when i add the custom component in a different project.