fxLayout is not working, any suggestions for fixing this

Question

I am trying to display *ngFor loop data horizontally instead of vertically. I am trying to use fxLayout="row" for this but it's not working. I am copying my html and component file code below. Am I missing to include anything here? Is there any other way to achieve the same?

HTML code:

<div fxLayout="row" fxLayoutAlign="space-around center">
    Plyers joined: 
    <div *ngFor = "let player of playerslist">
        <button class="button1">{{player.playername}}</button>
    </div>
</div>

Component file code:

import { Component, OnInit, Input } from '@angular/core';
import { FlexModule } from '@angular/flex-layout';
import { Directionality } from '@angular/cdk/bidi'
import { BrowserModule } from '@angular/platform-browser';
import { Router } from '@angular/router';
import { PlayerService } from '../../../services/player.service';
import { Player } from '../../../schema/player';

@Component({
  selector: 'app-playerlist',
  templateUrl: './playerlist.component.html',
  styleUrls: ['./playerlist.component.css'],
  providers: [ PlayerService ]
})
export class PlayerlistComponent implements OnInit {

  @Input() gameid: string;

  playerslist = [];

  constructor(private playerService: PlayerService) { }

  ngOnInit(): void {
    this.playerslist = [];
    this.gameid="69067"; //hardcoded for testing
    this.getPlayers(this.gameid);
  }

  getPlayers(p1) {

    this.playerService.getPlayerByGame(p1).subscribe( 
      (data) => {this.playerslist = data;

    return this.playerslist;
    });

  }

}

Answer 1

I think you might not have import FlexLayoutModule in the module containing this component. If it is in the App Module, add the following code in app.module.ts:

import { FlexLayoutModule } from '@angular/flex-layout';

@NgModule({
imports: [FlexLayoutModule]
})

You need to import the flexLayoutModule in the module containing the component to use the flex layout.