CODEWITHSUNDEEP
angulartemplatesstructure
Christian Gálvez
Christian Gálvez

Reputation: 183

Component CSS behavior in Angular2

I am opening this post because I have a doubt relative with CSS Angular2 Components.

Basically, I bought a template and I am passing it to components in Angular2. In the original template the header is stuck when scrolling down the page and this behavior is done with a library called Sticky-kit.js which adds a "is_stuck" class to the html tag, in this case the header tag, when scrolling is detected. In the template the html header tag is inside a div with "main-wrapper" class which has width to 100% only. Everything works fine in original template.

When I passed the header to a component and run the application the library sticky-kit.js works fine because adds the appropriate "is_stuck" class but despite of the class the header doesn't get stuck. The library looks for a class ".topbar" in html, when it finds the corresponding element, it concats the "is_stuck" class.

I am trying to figure out why this is happening.

I did some tests, one of them were put the header code outside the component (son of "main-wrapper" div) as the original template structure and it works fine, but, when I get back the code inside the component it does not work anymore. In the original template the header's parent is:

<div class="main-wrapper"></div>

but in angular structure the header's parent is the component itself.

This is the structure that I am implementing:

<div id="main-wrapper">
  <app-header></app-header>
  <app-menu></app-menu>
  <div class="page-wrapper">...</div>
</div>

and I can get stuck the header as follow:

<div id="main-wrapper">
  <header>code here</header> <----------
  <app-menu></app-menu>
  <div class="page-wrapper">...</div>
</div>

I am thinking that this behavior happens because the component encapsulation and I don't want to put the header code outside the header component.

Would someone help?

Thanks!

Upvotes: 0

Views: 75

Answers (1)

Christian G&#225;lvez
Christian G&#225;lvez

Reputation: 183

Ok guys, I found the answer to my own question. After I spent hours trying to solve the problem.

The only thing that I needed to do is use component's host metadata in header's parent and apply a css rule using :host in the header component.

It's impressive how a little problem takes you hours to be solve.

Thanks to everyone who read my question.

Upvotes: 0

Related Questions