Geek Answers Handbook

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

In any case, how to make the buttons / icons / flags aligned to the right, as in Material 1:

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

I am currently (material 2):

<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 action list

+5
source share
2 answers

For what is described above, the solution is quite simple, just drop the mat-list-icon into 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

+7
source

You can also achieve this with the dir attribute

 <md-list dir="rtl"> ... </md-list>
-1
source

More articles:


All Articles