Switch htmlWhitespaceSensitivity to 'ignore'

.prettierrc.json

@@ -1,5 +1,5 @@
 {
-  "htmlWhitespaceSensitivity": "css",
+  "htmlWhitespaceSensitivity": "ignore",
   "plugins": [
     "prettier-plugin-sh",
     "prettier-plugin-css-order",

README.md

@@ -116,7 +116,7 @@ Adds the following compiler options to the [tsconfig.json file](./tsconfig.json)
 
 Uses [Prettier](https://prettier.io/) to provide opinionated formatting so diffs contain less formatting changes and teams argue less about formatting in general.
 
-In the [.prettierrc.json file](./.prettierrc.json), `htmlWhitespaceSensitivity` has been set to `css` to improve the formatting of templates. This will trim whitespace immediately before and after inline elements. (If disabled, this setting will be difficult to reenable in the future.)
+In the [.prettierrc.json file](./.prettierrc.json), `htmlWhitespaceSensitivity` has been set to `ignore` to improve the formatting of templates. This will trim whitespace around and inside elements. Use ` ` (non-breaking space) to explicitly enforce spacing between inline elements. (If disabled, this setting will be difficult to reenable in the future.)
 
 The following prettier plugins are used:
 

src/app/app.component.ts

@@ -1,17 +1,35 @@
+import { UpperCasePipe } from '@angular/common';
 import { Component } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, MatButtonModule],
+  imports: [RouterOutlet, MatButtonModule, UpperCasePipe],
   template: `
     <h1 i18n>Hello, {{ title }}!</h1>
+    <p i18n>
+      The theme colors are:&nbsp;
+      @for (color of colors; track color; let index = $index) {
+        <button
+          mat-raised-button
+          type="button"
+          [color]="color === 'none' ? '' : color"
+        >
+          {{ color | uppercase }} {{ index }}
+        </button>
+        @if (index < colors.length - 1) {
+          &nbsp;
+        }
+      }
+    </p>
     <router-outlet />
   `,
   styles: ``,
 })
 export class AppComponent {
   title = 'opinionated-angular';
+
+  colors = ['none', 'primary', 'accent', 'warn'];
 }