5

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.

Tomislav Erić
  • 215
  • 1
  • 8
  • i tried that already but it's not working. It seems like a bug because when i bind another element inside that component, everything works as expected – Tomislav Erić Sep 10 '18 at 07:16
  • 2
    found the solution, i had to import the .js script 'earlier'. I've added it to index.html and now everything works.. And i had to remove zone.js from polyfills.ts because the console said that i've imported it multiple times. Maybe i will think about a way to create components without zone.js... – Tomislav Erić Sep 10 '18 at 12:12
  • Import which .js script exactly? Was it zone.js? – arunwithasmile Jan 07 '22 at 12:32

0 Answers0