@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.