Suppose I have a specific component that I wish to export and utilize as an independent angular-element-component.
export class CompanyFormComponent implements OnInit {
@Input() public companyId: string;
company: Company;
companyForm: FormGroup;
constructor(
private companyService: CompanyService,
private fb: FormBuilder,
) { }
ngOnInit() {
if (!this.companyId || this.companyId.length === 0) {
console.log('Please provide an Id');
}
....
In AppModule:
export class AppModule {
constructor(private injector: Injector) {}
ngDoBootstrap() {
const strategyFactory = new ElementZoneStrategyFactory(CompanyFormComponent, this.injector);
const element = createCustomElement(CompanyFormComponent, { injector: this.injector, strategyFactory });
customElements.define('app-company-form', element);
}
}
In Index.html:
<app-company-form></app-company-form>
I intend to be able to inject any value wherever I decide to use this component, in a straightforward manner like this:
<app-company-form companyId=11></app-company-form>
This way, the companyId can be populated from any external source, completely outside of Angular. I prefer not to hard code the value within Angular itself.
Although I've experimented with a few solutions, none have proven successful so far.