angularangular-material2

md-list-icon or md-button aligned to right? (Angular Material 2)


Any way how to make buttons/icons/checkboxes aligned to the right like in Material 1:

Angular Material 1 list with actions https://material.angularjs.org/latest/demo/list

I currently (Material 2) have:

<md-list>
  <md-list-item *ngFor="let position of cart">
    <h3 md-line> {{ position.name }} </h3>
    <p md-line>
      <span> Line 1 </span>
    </p>
    <md-icon md-list-icon>delete</md-icon>
  </md-list-item>
</md-list>

Angular Material 2 list with actions


Solution

  • For what is described above the solution is pretty simple, simply omit mat-list-icon in your selector and Material will do the magic:

    <mat-list>
      <mat-list-item *ngFor="let position of cart">
        <h3 mat-line> {{ position.name }} </h3>
        <p mat-line>
          <span> Line 1 </span>
        </p>
        <div> $2.00 </div>
        <button mat-icon-button (click)="remove(1)">
          <mat-icon class="mat-24">delete</mat-icon>
        </button>
      </mat-list-item>
    </mat-list>
    

    enter image description here