I have built a collection of web components designed for various Angular projects. To make these components reusable, I am using @angular/elements to convert them into custom elements and then serving them via http-server.
One of the components I developed is a custom h1 element:
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 have declared my custom element as
const h1El = createCustomElement(H1Component, {
injector: this.injector
});
customElements.define('custom-h1', h1El);
The setup of my application follows the guidelines outlined in https://angular.io/guide/elements
After completing all my components, I moved on to testing them by incorporating them into another Angular application and configuring the environment to load my script. However, I encountered an issue where my custom components were not displaying the @Input values properly.
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>
Upon running ng serve on my new application and setting up http-server for my library of components, I expected to see "Custom header" displayed. However, there was no output visible.
If I manually input a string value into text (e.g.,
<custom-h1 text="Custom header string"></custom-h1>Any insights or recommendations? References would be greatly appreciated. Thank you.