How to align the name on buttons placed vertically?

Ressaq · April 21, 2018, 12:39pm

I created a page which has multiple buttons in vertical position.
However the name of all buttons are not aligned in the same position. For eg. the button name (Optimus XL Stents) on top have some wide space compared to the button on the bottom button name (AltoSa XL PTA Balloons).
Please help me.

type or paste code here

file.html

<ion-content>
  <div class ="custom-padding">
    <div *ngFor = 'let product of productList'>
      <button ion-button color="buttoncolor" round (click)="onProductClick(product.id)" style="text-transform: none;" margin-bottom="10px" margin-left="10px" class="btn block">
        {{product.name}}
        <ion-icon ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle" class="icn"></ion-icon>
      </button>
    </div>
  </div>
</ion-content>

file.ts

type or paste code here![butexport class ProductsPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  pageTitle: string = 'Products';

  productList: any[] = [
    {
      "id" : "Optimus",
      "name": "Optimus XL Stents"
    },
    {
      "id" : "AltoSa",
      "name": "AltoSa XL PTA Balloons"
    },
    {
      "id" : "Pillar",
      "name": "Pillar Bifurcation Stents"
    },
    {
      "id" : "Exeter",
      "name": "Exeter Retrieval Devices"
    }
  ];

Please check the image for reference