Using Angular list with two columns

Question

How can I use angular lists with two columns of text on left and right?

The basic example shown on the angular website is the following:

<mat-list>
 <mat-list-item> Pepper </mat-list-item>
 <mat-list-item> Salt </mat-list-item>
 <mat-list-item> Paprika </mat-list-item>
</mat-list>

I want to split the text in each <mat-list-item> to show on two columns (left and right aligned)

I tried a couple of ways including:

<mat-list>
    <mat-list-item>
         <p style="float:left">Left Text</p>
         <p style="float:right">Right Text</p>
    </mat-list-item>
    <mat-list-item>
         <p style="float:left">Left Text</p>
         <p style="float:right">Right Text</p>
    </mat-list-item>
</mat-list>

but none seem to work.

How can I achieve this without using grid lists?

Answer 1

You will have to use the matLine in you code to make it work. Try like this, It will work.

<mat-list>
     <mat-list-item >
      <div matLine>
          <p style="float:left">Left Text</p>
          <p style="float:right">Right Text</p>
         </div>
     </mat-list-item>
     <mat-list-item>
        <div matLine>
          <p style="float:left">Left Text</p>
          <p style="float:right">Right Text</p>
        </div>
   </mat-list-item>
</mat-list>

Answer 2

You can achieve this by using mat-grid-list. For example,

<mat-grid-list cols="2">
  <mat-grid-tile>
    <mat-list>
      <mat-list-item> Pepper </mat-list-item>
      <mat-list-item> Salt </mat-list-item>
    </mat-list>
  </mat-grid-tile>
  <mat-grid-tile>
    <mat-list>
      <mat-list-item> Pepper </mat-list-item>
      <mat-list-item> Salt </mat-list-item>
    </mat-list>
  </mat-grid-tile>
</mat-grid-list>

If this looks complex for you, you can easily use basic bootstrap grids for dividing into two columns. For example,

<div class="row">
 <div class="col col-6>
   // You can put your left items here
 </div>
 <div class="col col-6>
  // You can put your right items here
 </div>
</div>