-1

I have a simple Angular Web Component that fires an event which is caught just fine when captured from another Angular container component. But when I try to capture the event from JavaScript, I get nothing, even though the component renders fine and fires the event fine.

Here is my raw JavaScript that does not work:

document.addEventListener("DOMContentLoaded", (event) => {
    const h = document.querySelector('frvp-header');
    h.addEventListener('darkChange', (e) => {
      // never gets here
      const dark = e.detail;
      console.log('dark', dark);
    });
});

The selector is <frvp-header></frvp-header>

And in the Angular component I can confirm the following emitter is fired:

@Input() dark = false;
@Output darkChange = new EventEmitter<boolean>();
...
toggleDark() {
   this.dark = !this.dark;
   this.darkChange.emit(this.dark);
}

I have tried using different ViewEncapsulation.None and Emulated. I have tried to fire the event manually from the console using the following JavaScript and the event fires fine then:

let ev = new Event('darkChange');
let hd = document.querySelector('frvp-header');
hd.dispatchEvent(ev);

I have tried to change return tyype to a string: EventEmiter<string>(), and call it with: this.darkChange.emit(this.dark.toString()), but still no go.

I imagine it is something simple that I haven't tried yet.

So the question is, how do I capture the Angular Web Component event with raw JavaScript?

neonguru
  • 759
  • 6
  • 16
  • You are angularing wrong. Instead of doing listening for `DOMContentLoaded`, you should be using the angular lifecycle hooks (`ngOnInit`, `ngAfterViewInit`, etc...) – mwilson May 11 '20 at 17:00
  • @mwilson that is not what I am questioning: my question is about using an Angular Web Component from raw JavaScript, not Angular. This is an @angular/elements 'web' component that you can use outside of an Angular app. – neonguru May 11 '20 at 21:34
  • Yes. That is part of the problem. Why use angular if you aren't going to use it? Angular has specific lifecycle hooks for these things. You're `document.querySelector` is probably being ran before angular has even rendered the component. You shouldn't be doing it this way. – mwilson May 11 '20 at 21:41
  • @mwilson Also if you look at the code snippet in my question, you will see that the `document.querySelector` call is made AFTER DOMContentLoaded. I have added the addEventListener from the console after everything is loaded and it still does not fire. – neonguru May 12 '20 at 13:22
  • @mwilson Read the question beginning statement, I already acknowledged that this works fine from Angular. Then read the ending question which clearly states this is about using raw JavaScript. – neonguru May 12 '20 at 19:36
  • I don't believe you understand how angular works. `document.addEventListener("DOMContentLoaded")` shouldn't even be in your vocabulary. Angular provides these methods as part of it's lifecycle. Angular is infamous for not working when you work against the framework. You are doing that in your case. This is more than likey a design problem. If you can create a stackblitz, it may help us determine what it is that is going wrong and why. – mwilson May 12 '20 at 21:26
  • @mwilson I guess you'll never get it unless you take a little time to actually understand what has been written. The problem with stackblitz is that these are 2 separate projects: one web component written in @Angular/Elements, and one client application written in raw JavaScript. – neonguru May 12 '20 at 22:30

1 Answers1

-1

So the problem was that I had the Component registered in the bootstrap array in the @NgModule decorator of my AppModule. I moved it to the entryComponents array and it works like a charm.

neonguru
  • 759
  • 6
  • 16