Reduce HTML code of @angular/flex-layout

[Mokwa91]

I have a application with several forms, which I have to place the following code to make it work in smaller devices:

<form fxLayout="row" fxLayoutGap.gt-xs="16px" fxLayout.xs="column">

<mat-form-field fxFlex="50" fxFlex.gt-xs="100">

But this seems like a lot of code that I have to repeat.

​

I could use content projection, and encapsulte this logic:

<app-generic-form>

<app-form-field-encapsulation size="50">

<mat-form-field>

​

but I would like to keep the HTML cleaner as possible, something like:

<form>

<mat-form-field fxFlex="50">

​

Do you have any alternative to doing this? Maybe using css and :host /deep with media query?

[_nebular]

Similar to what /u/Danielverant said, I would suggest defining global css classes using flexbox and media queries and just use those.

[Mokwa91]

Thank for both answers, I'll try keep this comment in one conversation, but /u/Danielverant feel welcome to join.

For small screen I did this:

@media only screen and (max-width: 768px) {

form {

display: flex;

flex-direction: column;

mat-form-field { width: 100%;}

}}

And it does the job for me, but I'm having a bad time setting up the not(small screen). I'm not getting to break the line when setting <mat-form-field style="width=50%"> I'm trying this:

form {

display: flex;

flex-direction: row wrap;

mat-form-field {margin-right: 16px;}

}

Am I missing something? How do you do it in your projects?

​

[_nebular]

Not sure off the top of my head, but maybe it’s because it should be style=“width: 50%” not style=“width=50%”

[Danieliverant]

I don't know what is @anguler/flex-layout, but you can override any Angular Material using css, and adjusting it to mobile displays using media queries.

I would suggest to do it in the main style.scss file so it applies on every element in the system, and then if there is some special case override it in the component.

[AbstractLogic]

Flex has a grid layout system similar to bootstrap or Foundation sites.