Angular Flex-Layout is not switching from layout row to column

Question

I upgraded to Angular 9 and am trying to use FlexLayout. The layout example I am following from angularjs.org is not working. https://material.angularjs.org/1.1.1/layout/container

My output is in this format which is not right:

     [first item in row ][first item in column ]
     [second item in row][second item in column]

instead of

    [first item in row ][second item in row][first item in column ]
    [                  ][                  ][second item in column]

To test this I created a plain vanila angular & material 9 app with a module called Flexer.

Here is my angular template app flexer.component.html file:

    <div layout="row">
        <div class="box1" flex>First item in row</div>
        <div class="box2" flex>Second item in row</div>
    </div>
    <div layout="column">
        <div class="box1" flex>First item in column</div>
        <div class="box2" flex>Second item in column</div>
    </div>

Here is my vanila angular app flexer.component.ts file:

    import { Component, OnInit } from '@angular/core';

    @Component({
      selector: 'app-flexer',
      templateUrl: './flexer.component.html',
      styleUrls: ['./flexer.component.scss']
    })
    export class FlexerComponent implements OnInit {

      constructor() { }

      ngOnInit() {
      }

    }

Here is my flexer flexer.component.scss style file:

    :host {
        display: flex;
        width: 100%;

        .box1 {
            color: black;
            background-color: skyblue;
        }

        .box2 {
            color: white;
            background-color: rgb(78, 47, 255);
        }

    }

Here is my output

enter image description here

Eventually I wanted my second div container to be shown under the first like this:

    [first item in row ...                      ]
    [second item in row...                      ]
    [first item in 1scolumn][second item in 2nd column]

Appreciated any help, sorry I dont have a live angular9 demo to display this like plunker or stackblitz they are not yet at version 9.

You can upgrade stackblitz dependencies to the latest version by clicking the refresh-style icon in the dependencies header — Kurt Hamilton
Also, why are you following an AngularJS guide for Angular 9? — Kurt Hamilton
@Kurt Hamilton - Thank you I am able to upgrade the stackblitz to 9 will add my link soon. — Jai Berman
You're looking at the wrong documentation for Angular's Flex Layout - see github.com/angular/flex-layout instead. — Edric
Still looking for a solution. Here is the stackblitz link to the app: angular-flexer.stackblitz.io — Jai Berman

Thierry Falvo Thierry Falvo · Accepted Answer · 2020-03-13T20:27:46

You should add fx prefix before each directive layout and flex.

Your template should be :

<div fxLayout="row">
  <div class="box1" fxFlex>First item in row</div>
  <div class="box2" fxFlex>Second item in row</div>
</div>
<div fxLayout="column">
  <div class="box1" fxFlex>First item in column</div>
  <div class="box2" fxFlex>Second item in column</div>
</div>

But also note that you can use Grid with gd prefixed directives :

<div gdColumns="1fr 1fr 1fr">
  <div class="box1" gdColumn="1" gdRow="1">First item in row</div>
  <div class="box2" gdColumn="2" gdRow="1">Second item in row</div>
  <div class="box1" gdColumn="3" gdRow="1">First item in column</div>
  <div class="box2" gdColumn="3" gdRow="2">Second item in column</div>
</div>

In this case, the result will better match your expectation :

[first item in row ][second item in row][first item in column ]
[                  ][                  ][second item in column]

because with Grid you're designing a grid with 3 distinct columns and 2 ditcint rows. Could be a good alternative depending the result you're expecting.

Important note

Don't forget to import FlexLayoutModule into AppModule.

Demo

Here is a Stackblitz demo

Angular Flex-Layout is not switching from layout row to column

1 Answers

Important note

Demo