Passing object to custom elements

Dannybrown2710 commented 4 years ago

Hi @manfredsteyer , This is my app component file (taken from cli8 branch sample)

import { Component, OnInit, Input } from '@angular/core';

declare let VERSION: string;

@Component({
  template: '<h1 (click)="this.onClick()">Custom Element works!</h1>'

})
export class AppComponent implements OnInit{
  @Input() elem:any;
  constructor() {
    console.debug('started!');
    console.debug('VERSION', VERSION);
  }
  ngOnInit(){
    console.log(this.elem);
  }
  onClick(){
    console.log(this.elem);
  }
}

and this is my index.html file

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ElementsLoading</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>

  <!-- Calling Custom Element -->
  <!-- <custom-element></custom-element> -->
<script>
  var ce = document.createElement('custom-element');
  ce.elem = {complex:2};
  document.body.appendChild(ce);
</script>
</body>
</html>

My query is I am getting undefined for this.elem in both ngOnInit and onClick. Is there any way to pass a configuration type object to a custom element?

kondi0 commented 4 years ago

Did you try:

<script> var ce = document.createElement('custom-element'); ce['elem'] = {complex:2}; document.body.appendChild(ce); </script>

It's working for me

Dannybrown2710 commented 4 years ago

@kondi0 no it still shows undefined for me. Did you try from the same project structure? I have a forked version if you want to have a look here?

Dannybrown2710 commented 4 years ago

@kondi0 Does your code works with built package?

manfredsteyer / ngx-build-plus

Passing object to custom elements #150