17

I want to update visual side(grid, colors) of my angular 2 application. Old layout was build with bootstrap 4, which I don't really need anymore. I decided to go for plain css3, and build grid with flexbox. I made a preview of this grid on codepen.

However implementation in project is hard and I am now stuck. Let's consider an example:

import {Component} from 'angular2/angular2';


@Component({
  selector: 'some-component',
  template: `
    <aside class="col-4 main-aside"></aside>
    <section class="main-section center"></section>
  `
})
export class SomeComponent { }

If I bootstrap this component within, for example .container I may get this result:

<body>
  <!-- .container is flex parent -->
  <div class="container">
    <some-component>
      <!-- .main-aside and .main-section should be flex children -->
      <aside class="main-aside"></aside>
      <section class="main-section center"></section>
    </some-component>
  </div>
</body>

As you can see the flex chain parent -> child is broken because of component "selector" between them. I menaged to fix this by adding styles: display: flex; width: 100%; to component selector from chrome dev tools, however I don't know how to make this work from code perspective nor is it the best way to do so.

I would really appreciate any help, because I have no idea how to fix this with the exception of not using flexbox.

I am using angular 2.0.0-alpha.44

And yes, I am aware of angular's alpha state.

Eggy
  • 4,052
  • 7
  • 23
  • 39
  • Have you tried enclosing your `template` within ``? This way the tree would look like `
    `     – Eric Martinez Nov 11 '15 at 16:44
  • 1
    @EricMartinez I can not do that, because comes in fact from router so the full template looks like this:
    Some component
    <1-- -->
    – Eggy Nov 11 '15 at 16:54
  • You can't specify a class on something in your HTML? Maybe it's possible just to add the class `.container` to the route handler component, and get rid of the additional `
    `. Either subclassing the route handler or just putting your `.container` in the inner template as @EricMartinez mentioned seem like totally valid ways to solve this.
     – Olex Ponomarenko Nov 11 '15 at 19:42

3 Answers3

42

I fixed this issue by adding styles to component. For example:

:host {
  display: flex;
}

:host {} was the key.

Eggy
  • 4,052
  • 7
  • 23
  • 39
  • 9
    I can't believe the timing here, I've been banging my head against this for days now. How did you figure this out? I wish I could upvote your whole life. – Jesse Dhillon Nov 26 '15 at 00:32
  • I found solution [here](http://stackoverflow.com/questions/32853924/angular-2-how-to-style-host-element-of-the-component). – Eggy Nov 26 '15 at 01:21
  • 1
    To be honest, I was wondering if anyone even sees this post or not. I am glad it helped you. – Eggy Nov 26 '15 at 01:27
  • Was getting caught up on this for a while as well, thank you @Eggy – 0xPingo May 20 '16 at 23:03
  • does it work with "plain" angular core or do I have to include something else? I tried this but no success. Static sketch of the page would do what I want but as soon as I turn Angular in, everything breaks. – Jindrich Vavruska Apr 27 '17 at 08:28
  • It should work with bare angular application. Seems you have a problem with app itself not host styles. https://angular.io/docs/ts/latest/guide/component-styles.html – Eggy Apr 27 '17 at 12:31
1

:host selector solves the problem but you end using it very often in many components.

I used instead the following global CSS:

.row > * {
  display: flex;
  flex-basis: 100%;
}
Jiayi Hu
  • 2,210
  • 1
  • 14
  • 12
0

The angular team released their own flex-layout package, so you don't need to write it by your self anylonger:

https://github.com/angular/flex-layout

Philip
  • 23,316
  • 2
  • 31
  • 31