VS Code indention and prettier

I just have one question, currently I am using prettier and it formats on save but there are just things I don't understand that when I format the spaces or indetion are not equal. Is there a setting I don't know in VS Code ?. How do or what do we set to make it consistent ? Specially the spacing. Thank you.

For example, when I format some button formatted this way

#example 1

   <button
    (click)="delete()"
    mat-button
    color="primary"
    [mat-dialog-close]="true"
  >
    Proceed
  </button>

and sometimes when I format it is formatted this way

      <button (click)="add()" mat-flat-button style="color: #007dff">
        Submit
      </button>

#Another example is this one i formatted this using prettier and as you can see it looks bad and the spacing is too much.

I was struggling to get around when I was getting started with Prettier as well. Here are some simple changes you can do to ensure you get what you are looking for:

1. Keeping the JSX attributes on the same line- if you are looking for a cleaner way (the way your example is shown), keeping those attributes in a single line would make it look cleaner and much shorter. For this, you have to un-check Prettier: Single Attribute Per Line from your Settings -

2. Change your Prettier Print Width to something like 1000.

This should work as you are expecting.