angularangular-materialangular-cliangular-flex-layout

Is it possible to use fxLayoutAlign in <mat-list-item>?

I am writing a web application with angular material and I want a list that shows message and button that sends you to details. I tried using fxLayoutAlign and to use align-content: space-between so that I can have button on the right side and message on the left but it doesn't seem to work and it's driving me insane.

<mat-list style="margin-top: 40px">

    <mat-divider></mat-divider>

    <mat-list-item>
      <span>MESSAGE</span>
      <button mat-icon-button color="primary"><mat-icon>keyboard_arrow_right</mat-icon></button>
    </mat-list-item>
</mat-list>
Solution

  • Angular Material adds elements between mat-list-item and your content on compilation, so adding fxLayoutAlign won't affect your content since it is no longer it's direct children. You could try:

    <mat-list-item>
  <span fxFlex>MESSAGE</span>
  <button mat-icon-button color="primary"><mat-icon>keyboard_arrow_right</mat-icon></button>
</mat-list-item>

    or if you don't want your message span to stretch across most of the box:

    <mat-list-item>
  <span>MESSAGE</span>
  <span fxFlex></span>
  <button mat-icon-button color="primary"><mat-icon>keyboard_arrow_right</mat-icon></button>
</mat-list-item>