Angular Elements - cannot pass variable to @Input property of my Elements Tag

Question

I need some assistance here, I am unable to pass a variable to the @Input variable of my Elements tag. If I hard code a caller-id = "123456" inside the tag it works with no issues; however if I try and pass the caller id from the Angular component as a variable it does not recognize it. I am basically trying to retrieve the userId of the component and pass it to the elements app to do what it needs to do with the userId. Any help would be appreciated, thanks.

Angular Elements App .ts

export class AppComponent implements AfterContentInit {


 @Input() userId: string = "";
 @Input() userId2: string = "";


ngAfterContentInit() {
console.log(this.userId);
console.log(this.userId2);
}}

app.module.ts of Angular Elements App

import { BrowserModule } from '@angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {createCustomElement} from '@angular/elements';
import { Injector } from '@angular/core';


@NgModule({
 declarations: [
 AppComponent
 ],
 imports: [
  BrowserModule
  ],
  providers: [],
 entryComponents: [AppComponent],
 schemas: [CUSTOM_ELEMENTS_SCHEMA],
 bootstrap: [AppComponent]
 })
 export class AppModule { 
 constructor(injector: Injector) {
  const custom = createCustomElement(AppComponent, {injector});
  customElements.define('elements-app', custom)
 }

 ngDoBootstrap() {

 }
 }

Current Angular Component that is implementing the angular elements tag from .js

.ts file of component implementing the Elements App

 constructor() {
 this.userId = "123456"
 }

HTML file of component implement the Elements app

*does not work*- <elements-app user-id=userId></elements-app
*works*- <elements-app user-id="123456"></elements-app

app.module.ts of the app consuming the angular elements .js file tag

 @NgModule({
  declarations: [
   AppComponent
 ],
 imports: [
 BrowserModule,
 AppRoutingModule,
 BrowserAnimationsModule,
 HttpClientModule
 ],
 providers: [HttpClientModule, HttpClient],
 schemas: [CUSTOM_ELEMENTS_SCHEMA],
 bootstrap: [AppComponent]
  })
  export class AppModule { }

Akk3d1s · Accepted Answer · 2020-11-11 13:05:05Z

1

Have you tried: <elements-app [attr.caller-id]="caller_id"></elements-app> ?

answered Nov 11, 2020 at 13:05

Akk3d1s

2463 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rob DePietro Over a year ago

I did not, but I tried and still no luck. I edited the above problem with more info if needed, thanks.

Akk3d1s Over a year ago

So this <elements-app> is injected from some other js file ?

Rob DePietro Over a year ago

Yes, angular elements allows you to compile an angular app into a web component that then can be consumed by another application such as Angular or React and it interacts with the consuming application as a .js file and a html tag

Cristian Sepulveda · Accepted Answer · 2022-05-11 03:01:46Z

1

Not sure if it is best approach but it worked fo me: I solve this creating the tag in a variable, then use it as innerHtml for a DIV. (I had to sanitize the value):

import DomSanitizer:

import { DomSanitizer } from '@angular/platform-browser';

then add it to the constructor:

constructor(private _sanitizer: DomSanitizer) {}

then create de innerHTML variable:

  ngOnInit(): void {
    this.innerHTML = `<elements-app caller_id=${this.caller_id}></elements-app>`;
    this.innerHTML = this._sanitizer.bypassSecurityTrustHtml(this.innerHTML);
  }

and finally on the template:

<div [innerHTML]="innerHTML"></div>

answered May 11, 2022 at 3:01

Cristian Sepulveda

1,7702 gold badges21 silver badges27 bronze badges

1 Comment

xrobert35 Over a year ago

i'm crying while I copy paste your solution.... Still can't understand yet after reading the thread and all the proposed solution why my "dynamic input" is not assgined but this is for the moment, the only one which some to work. So Thank You

Sai Prasad Ragula · Accepted Answer · 2022-04-13 17:56:32Z

I tried all the solutions suggested in this thread but nothing worked out. Then I understood that we're trying to pass a dynamic variable to a simple html(non-angular) element. So I tried DOM manipulation using the ElementRef with ViewChild and updated the attribute of custom element.

You can update your html to

<elements-app #customEl></elements-app>

In script add this

@ViewChild('customEl') customElement: ElementRef;

ngAfterViewInit():void {
  this.customElement.nativeElement.setAttribute('user-id', userId);
}

This worked for me and if it does not for you, it may be due to the custom element's js file which is already referred. Try removing the static script tag reference and load the js file dynamically after updating the element. You can refer to this article for loading js https://jsonworld.com/blog/how-to-add-script-dynamically-in-angular-application

James · Accepted Answer · 2020-11-10 16:55:35Z

-1

You need quotes " around the caller_id variable or it won't work. Also a box binding around caller-id

Change <elements-app caller-id=caller_id></elements-app>

To <elements-app [caller-id]="caller_id"></elements-app>

Check this out for more info https://angular.io/guide/component-interaction#intercept-input-property-changes-with-a-setter

answered Nov 10, 2020 at 16:55

James

2,9722 gold badges25 silver badges33 bronze badges

4 Comments

Rob DePietro Over a year ago

I've tried that as well previously. I believe it may have something to do with the elements-app not being part of the angular module since its an outside tag....not 100% sure though

James Over a year ago

Could you add any error messages you have? It would help a lot. Common issues are, as you mentioned. Not having the component included in a module. You also need CommonModule as an import in your app.module.

Rob DePietro Over a year ago

I am not getting any error messages. I have edited the problem with more information. Hopefully it makes sense, thanks.

James Over a year ago

I'd remove CUSTOM_ELEMENTS_SCHEMA as this tends to mask errors of the kind I think you're having. Also why are you injecting your AppComponent into your app module like that? If there is no specific reason, i'd remove it as it could be causing more issues. You also shouldn't need to add AppComponent as an entry component when you've done that. Just ensure it is in the bootstrap array and declarations array of your AppModule.

Collectives™ on Stack Overflow

Angular Elements - cannot pass variable to @Input property of my Elements Tag

4 Answers 4

3 Comments

1 Comment

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related