0

I want to pass object to custom element in html file. I tried reading some resources didn't found the solution for this.

Angular Component file

<app-chat-widget [restartFromSideBar]="isRestartFromSideBar" (isRestartFromSideBarEvent)="restartDoneFromSideBar($event)" [agent]="agentForUI"></app-chat-widget>

From the above code agentForUI is a object how to pass object value from custom element in html file?

Angular custom element html file

<head>
  <meta charset="utf-8">
  <title></title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.1.3/custom-elements-es5-adapter.js"></script>
  <script type="text/javascript" src="chatwidget.js"></script>
</head>
<body>
  <app-chat-widget restartFromSideBar="false"><app-chat-widget>
<script>
  const component = document.querySelector('app-chat-widget');
  component.addEventListener('isRestartFromSideBarEvent', (event) => {
    alert(event.isRestartFromSideBarEvent);
})
  </script>

</body>

Ts file 

this.agentService.getAgentUIComponent(agentId)
      .subscribe(
        agent => {
          if (agent && agent.uiComponent) {
            this.agentForUI = agent;
            this.agentForUI._id = agentId;



          }
        }, error => {

          console.error(error);
        }
      );
divya dave
  • 471
  • 1
  • 9
  • 28
  • If I"m understanding you correctly, you should use `@Input() agent` in your `app-chat-widget` – Bill F Dec 09 '19 at 18:27
  • Yaa, I have used @Input('agent') agentForUI: Agent; in my app-chat-widget ts file – divya dave Dec 09 '19 at 18:29
  • Pretty sure you can just do `component.agentForUI = { ... whatever object }` in your script. – penleychan Dec 09 '19 at 18:32
  • I want to pass agentForUI object from the from the angular component to custom element in html file – divya dave Dec 09 '19 at 18:39
  • `@Input('agent') agentForUI: Agent;` should be `@Input() agent: Agent;` according to your html. `[agent]` is the variable of the child component. – Bill F Dec 09 '19 at 18:51

0 Answers0