-
Notifications
You must be signed in to change notification settings - Fork 26
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
NG: Styling issues on nested and directly included components in angular project #1428
Comments
@Carlfjord would you be able to post that test repo so we dont have to recreate this all (or zip it up without node_modules and upload if that works) Some initial thoughts?
Will need some chunk of time to investigate this one |
@tmcconechy Yea sure! There's no difference in the component itself between the working and non working scenario so the structure is the same. So the issue occurs with template included components in general with or without nesting. Here's a .zip with a basic angular project and the side by side view of the component like above screenshots. |
@Carlfjord fixed this you will see a PR attached soon but wanted to note a couple things:
I only fixed app nav and i think module-nav but if you run into more issues like this in more components let me know. As the fix requires refactoring that may or may not be required. I think i fixed module-nav but did not verify. Attached update zip (with node_modules included) just for testing on the PR. |
QA Passed. moving this ticket to done |
Describe the bug
I'm having some styling related issues occurring while nesteing components. This also occurs with components included outside of
<router-outlet>
in angular applications.To Reproduce
In any angular application simply take the sample code from the ids-wc-examples and use it in a new component. Take said component and import in in the top level template file next to your router outlet.
I created a clean angular application using "ng new" and then installed the ids-enterprise-wc. Then I created a new AppMenuComponent and added the sample code from the wc app-menu demo. Then I added the component to be rendered on the top level path. So far it works well and good.
However after I include the same
<app-menu>
component straight in my app.component template instead of using the router-outlet it no longer has the proper styling.Here's a side-by-side view of the different implementations:
Note that similar problems occur if we say break out the accordion part of the app-menu to a new component and reference said component in the app-menu template. So nesting components by splitting them in different angular components also causes inconsistencies.
Steps to reproduce the behavior:
Expected behavior
Nested components or template included components should apply the accurate theming.
Version
v1.0.0-beta.13
Platform
The text was updated successfully, but these errors were encountered: