flex-item in @Component host.class doesn't work

[datumgeek]

i have work-arounds for this, but when you are trying to use multiple (named) router-outlets, you have to rely on the router to instantiate your components so you can't use the flex classes and attributes the way you can in a template. i tried this:

@Component({
  selector: 'app-field-results',
  templateUrl: './field-results.component.html',
  styleUrls: ['./field-results.component.css'],
  host: { 'class': 'flex-item' }
})

and the class is set properly to flex-item, but it isn't expanded into its corresponding flex classes and attributes

[ThomasBurleson]

I am confused; what does this have to do with flex-layout?

[datumgeek]

I could be confused, but here's my thinking...

flex-layout provides classes and directives that make it possible to leverage flexbox without dropping down into css.

the case i outlined is one where you have to drop down into css and can't use what's provided in flex-layout...

that make sense @ThomasBurleson ?

[ThomasBurleson]

Closing as not a flex-layout issue.

[datumgeek]

ok 😄

[jefbarn]

I think this is a valid issue.
Specifically you can't add flex-layout directives to a component host. The main problem is when instantiating a component with a router-outlet. A workaround is to use css, but that also misses extra functionality provided by this library like responsiveness.

Edit: found #76 which is same issue.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}