I have a library of web components that will be used in different angular projects. I am using @angular/elements to turn my components to reusable elements then serve it using http-server.
one component I created was a custom h1:
h1-component.ts
import { Component, Input, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'app-h1',
templateUrl: './h1.component.html',
styleUrls: ['./h1.component.scss'],
encapsulation: ViewEncapsulation.ShadowDom
})
export class H1Component {
private _text: string = '';
@Input() set text(text: string) { this._text = text; }
get text(): string { return this._text; }
}
h1-component.html
<h1>{{ text }}</h1>
in my app.module.ts, I declared my custom element as
const h1El = createCustomElement(H1Component, {
injector: this.injector
});
customElements.define('custom-h1', h1El);
My application is set up according to https://angular.io/guide/elements
After finishing all my components, I proceeded to test them by creating another angular application, setting my environment to load my script. However, this is when I noticed that my custom components are not taking my @Input values.
In my new application:
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
header = "Custom header";
}
app.component.html
<custom-h1 text="{{ header }}"></custom-h1>
After running ng serve on my new application and http-server on my library of components, I should expect to see "Custom header". However, I don't see any results.
If I put a string value inside text (ie. <custom-h1 text="Custom header string"></custom-h1>), I am able to see the correct output which is "Custom header string".
Any thoughts or suggestions? or reference? Thank you.
