jqwidgets-scripts-custom/demos/Angular/buttons/textposition/src/app/app.component.html

jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.

<table>
  <tr>
    <td>
      <jqxButton [theme]="'material'" [width]="120" [height]="50" [textPosition]="'topLeft'">Top Left</jqxButton>
    </td>
    <td>
      <jqxButton [theme]="'material'" [width]="120" [height]="50" [textPosition]="'top'">Top</jqxButton>
    </td>
    <td>
      <jqxButton [theme]="'material'" [width]="120" [height]="50" [textPosition]="'topRight'">Top Right</jqxButton>
    </td>
  </tr>
</table>
<table>
  <tr>
    <td>
      <jqxButton [theme]="'material'" [width]="120" [height]="50" [textPosition]="'left'">Left</jqxButton>
    </td>
    <td>
      <jqxButton [theme]="'material'" [width]="120" [height]="50" [textPosition]="'center'">Center</jqxButton>
    </td>
    <td>
      <jqxButton [theme]="'material'" [width]="120" [height]="50" [textPosition]="'right'">Right</jqxButton>
    </td>
  </tr>
</table>
<table>
  <tr>
    <td>
      <jqxButton [theme]="'material'" [width]="120" [height]="50" [textPosition]="'bottomLeft'">Bottom Left</jqxButton>
    </td>
    <td>
      <jqxButton [theme]="'material'" [width]="120" [height]="50" [textPosition]="'bottom'">Bottom</jqxButton>
    </td>
    <td>
      <jqxButton [theme]="'material'" [width]="120" [height]="50" [textPosition]="'bottomRight'">Bottom Left</jqxButton>
    </td>
  </tr>
</table>