Angular Material2 mat-list-item-content position

Question

I'm trying the below to override angular material2 mat-list-item-content style based on list index.

Component HTML:

<div fxLayout="column" fxLayoutAlign="start center" fxFill>
    <mat-list dense class="mat-list">
      <mat-list-item *ngFor="let message of messages" class="{{message.float}}">
         <mat-label>{{message.text}}</mat-label>
      </mat-list-item>
    </mat-list>
</div>

Component CSS

.left .mat-list-item-content {
  float: left;
}

.right .mat-list-item-content {
  float: right;
}

Thanks

Answer 1

You can set the alignment of mat-list-item using flex-box justify-content

<mat-list role="list">
  <mat-list-item class="left" role="listitem">
   LEFT
  </mat-list-item>
  <mat-list-item class="right" role="listitem">
     Right
  </mat-list-item>
</mat-list>

Below is the style. Note that you should put this style in the root style ( /src/styles.css ) or this style will not work.

/* LEFT align */
.mat-list .mat-list-item.left .mat-list-item-content{
      justify-content: flex-start;
}

/* RIGHT align */
.mat-list .mat-list-item.right .mat-list-item-content{
      justify-content: flex-end;
}

/* If you will use matLine */

  /* LEFT align */
.mat-list .mat-list-item.left .mat-list-text>*{
  margin: 0 auto 0 0;
}
  /* RIGHT align */
.mat-list .mat-list-item.right .mat-list-text>*{
  margin: 0 0 0 auto;
}

Please see this link for the live sample code https://stackblitz.com/edit/so-answer-alignment-list?file=styles.css

Answer 2

:host ::ng-deep .mat-list-base .mat-list-item .mat-list-item-content {
justify-content: left;

}

You can use above code for positioning list items. It works for me