typescript - Pasar datos al componente de un elemento Angular

Dado que tengo un componente que quiero exportar y usar como un componente de elemento angular independiente.

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');
}

....

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);
  } 
}

Index.html:

<app-company-form></app-company-form>

Quiero poder inyectar cualquier valor dondequiera que use este componente, tan simple como:

<app-company-form companyId=11></app-company-form>

Así que el companyId puede ser llenado desde otro lugar, completamente fuera de Angular. No quiero codificar el valor directamente dentro de Angular.

He intentado algunas cosas, pero nada parecía funcionar.

Respuesta #1

cuando usas tu componente como un elemento personalizado/de Angular, puedes pasar el parámetro de entrada companyId agregando el siguiente atributo HTML a tu elemento personalizado.

<app-company-form company-id="11"></app-company-form>