@angular/flex-layout not working with @HostBinding

Question

flex-layout is not applying the inline styles on host elements where the host elements are getting their flex-layout attributes via @HostBinding

@Component({
    selector: 'column-node',  //flex-layout not working on host elements
    host: { '[@visibility]': 'visibility' },
    template: `<ng-content></ng-content>`,
})    

export class LayoutColumnNodeComponent {
    @HostBinding('attr.fxLayout') fxlayout = 'column';
}

fxLayout attribute is added in DOM <column-node fxLayout="column"> but flex-layout inline styles are not being applied.

can't use stand alone selector <column-node> in your html All your custom selectors, no matter how many you may have in a page need the inline flex attributes markup.

<column-node fxLayout="row" fxLayoutAling="start start" fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="33" fxFlex.lg="33" fxFlex="25"> This code will be extremely difficult to scan with all this flex markup....

Answer 1

I think the problem is that the LayoutDirective is not applied when there is no fxLayout attribute on the element directly.

From https://github.com/angular/flex-layout/blob/057fd5c6eec57e94b300eb49d53d38b611e25728/src/lib/flexbox/api/layout.ts

@Directive({selector: `
  [fxLayout],
  [fxLayout.xs]
  [fxLayout.gt-xs],
  [fxLayout.sm],
  [fxLayout.gt-sm]
  [fxLayout.md],
  [fxLayout.gt-md]
  [fxLayout.lg],
  [fxLayout.gt-lg],
  [fxLayout.xl]
`})
export class LayoutDirective extends ...

Directives are only applied if the attribute is added statically to the template.

There is in general no way to apply a directive to a host element.

Answer 2

Easiest way is to add another DIV inside your component, and undesirable it can often be the most maintainable and cleanest way to do this.

Or, for simpler cases you can apply the css manually

:host 
{
   display: flex;
   flex-direction: column
}

Or if it needs to be dynamic

@HostBinding('style.display') style_display = 'flex';
@HostBinding('style.flexDirection') get style_flexDirection() { return 'column'; }

You can still use the other directives inside your component, even if you don't set fxLayout on the parent.

Also, note that if you update host binding properties they actually 'belong' to the parent for change detection purposes - which can cause annoying change detection error messages. This won't happen most of the time, but something to be aware of.

The API docs explain all the equivalent css that the directives apply.