Using Angular list with two columns

Issue

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?

Solution

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>

Answered By - akpgp