[fix]: [pfe-navigation 1.x] doesn't work with Angular

[grandemayta]

I am working with Patternfly Elements and I having some issues with Angular integration.

pfe-navigation doesn't work with Angular

Impacted component(s)

• pfe-navigation

Steps to reproduce

I created on Sandbox an Angular project with the pfe-navigation, you can find on this link:
https://codesandbox.io/s/pfe-navigation-patternfly-rs0if

Expected behavior

We should see the patternfly menu.

Screenshots

[kylebuch8]

@grandemayta - Thanks for pointing this out. I suspect it has something to do with the component using querySelector in the connectedCallback. I'll take a look to see what I can find.

[grandemayta]

Hi guys,
for the moment we fixed the problem with this workaround:

pfe-element.js:


pfe-navigation.js

I know this is not the best solution but maybe can help you to understand where is the issue.
regards,

[castastrophe]

Hi @grandemayta, I'll help follow up on this to see where we're at with debugging.

In future, would you please avoid using "guys" as a greeting? We're a diverse group of developers. 🙂 Thank you!

[castastrophe]

@kylebuch8 Was this issue resolved or do we still need a PR to get this patched?

[castastrophe]

I upgraded to 1.8.0 for pfe-navigation and am now seeing Cannot read property 'querySelector' of null on this line in the constructor:

this._menuItem.shadowRoot.querySelector(".pfe-navigation-item__trigger").addEventListener("click", this._menuItemClickHandler);

I think we need a promise to wait until the _menuItem is upgraded before running the query