build: use 'angular' parser for Prettier

.prettierrc.json

@@ -4,6 +4,13 @@
 	"singleQuote": true,
 	"useTabs": true,
 	"overrides": [
+		{
+			"files": "*.html",
+			"options": {
+				"parser": "angular",
+				"htmlWhitespaceSensitivity": "strict"
+			}
+		},
 		{
 			"files": "src/**/*",
 			"options": {

demo/src/app/components/carousel/demos/pause/carousel-pause.html

@@ -7,11 +7,11 @@
 >
 	<ng-template ngbSlide *ngFor="let img of images; index as i">
 		<div class="carousel-caption">
-			<h3>My slide {{i + 1}} title</h3>
+			<h3>My slide {{ i + 1 }} title</h3>
 		</div>
-		<a href="https://www.google.fr/?q=Number+{{i+1}}" target="_blank" rel="nofollow noopener noreferrer">
+		<a href="https://www.google.fr/?q=Number+{{ i + 1 }}" target="_blank" rel="nofollow noopener noreferrer">
 			<div class="picsum-img-wrapper">
-				<img [src]="img" alt="My image {{i + 1}} description" />
+				<img [src]="img" alt="My image {{ i + 1 }} description" />
 			</div>
 		</a>
 	</ng-template>
@@ -36,5 +36,5 @@ <h3>My slide {{i + 1}} title</h3>
 	<label class="form-check-label" for="pauseOnIndicator">Pause when clicking on navigation indicator</label>
 </div>
 <button type="button" (click)="togglePaused()" class="btn btn-outline-dark btn-sm">
-	{{paused ? 'Cycle' : 'Pause' }}
+	{{ paused ? 'Cycle' : 'Pause' }}
 </button>

demo/src/app/components/collapse/demos/basic/collapse-basic.html

@@ -11,7 +11,7 @@
 	<button
 		type="button"
 		class="btn btn-outline-primary ms-2"
-		(click)="isCollapsed = ! isCollapsed"
+		(click)="isCollapsed = !isCollapsed"
 		[attr.aria-expanded]="!isCollapsed"
 		aria-controls="collapseExample"
 	>

demo/src/app/components/datepicker/demos/basic/datepicker-basic.html

@@ -6,7 +6,9 @@
 
 <button class="btn btn-sm btn-outline-primary me-2" (click)="selectToday()">Select Today</button>
 <button class="btn btn-sm btn-outline-primary me-2" (click)="dp.navigateTo()">To current month</button>
-<button class="btn btn-sm btn-outline-primary me-2" (click)="dp.navigateTo({year: 2013, month: 2})">To Feb 2013</button>
+<button class="btn btn-sm btn-outline-primary me-2" (click)="dp.navigateTo({ year: 2013, month: 2 })"
+	>To Feb 2013</button
+>
 
 <hr />
 

demo/src/app/components/datepicker/demos/buddhist/datepicker-buddhist.html

@@ -6,7 +6,9 @@
 
 <button class="btn btn-sm btn-outline-primary me-2" (click)="selectToday()">Select Today</button>
 <button class="btn btn-sm btn-outline-primary me-2" (click)="dp.navigateTo()">To current month</button>
-<button class="btn btn-sm btn-outline-primary me-2" (click)="dp.navigateTo({year: 2524, month: 5})">To May 2524</button>
+<button class="btn btn-sm btn-outline-primary me-2" (click)="dp.navigateTo({ year: 2524, month: 5 })"
+	>To May 2524</button
+>
 
 <hr />
 

demo/src/app/components/datepicker/demos/custommonth/datepicker-custommonth.html

@@ -5,7 +5,7 @@ <h4>Inline</h4>
 <ng-template #c let-dp>
 	<div class="p-2">
 		<div class="btn-group d-flex justify-content-end mb-2" role="group">
-			<button type="button" class="btn btn-sm btn-outline-primary" (click)="navigate(dp, -1);">Prev</button>
+			<button type="button" class="btn btn-sm btn-outline-primary" (click)="navigate(dp, -1)">Prev</button>
 			<button type="button" class="btn btn-sm btn-outline-primary" (click)="today(dp)">Today</button>
 			<button type="button" class="btn btn-sm btn-outline-primary" (click)="navigate(dp, 1)">Next</button>
 		</div>

demo/src/app/components/datepicker/demos/disabled/datepicker-disabled.html

@@ -4,6 +4,6 @@
 
 <hr />
 
-<button class="btn btn-sm btn-outline-{{disabled ? 'danger' : 'success'}}" (click)="disabled = !disabled">
-	{{ disabled ? "disabled" : "enabled"}}
+<button class="btn btn-sm btn-outline-{{ disabled ? 'danger' : 'success' }}" (click)="disabled = !disabled">
+	{{ disabled ? 'disabled' : 'enabled' }}
 </button>

demo/src/app/components/datepicker/demos/hebrew/datepicker-hebrew.html

@@ -16,7 +16,7 @@
 
 <ng-template #dt let-date let-data="data" let-selected="selected" let-currentMonth="currentMonth">
 	<div class="hebrew-day" [class.outside]="date.month !== currentMonth" [class.selected]="selected">
-		<div class="gregorian-num">{{ data.gregorian.day + '/' + (data.gregorian.month) }}</div>
+		<div class="gregorian-num">{{ data.gregorian.day + '/' + data.gregorian.month }}</div>
 		<div class="hebrew-num">{{ i18n.getDayNumerals(date) }}</div>
 	</div>
 </ng-template>

demo/src/app/components/datepicker/demos/islamiccivil/datepicker-islamiccivil.html

@@ -7,9 +7,9 @@
 
 <hr />
 
-<button class="btn btn-sm btn-outline-primary me-2" (click)="selectToday();">Select Today</button>
+<button class="btn btn-sm btn-outline-primary me-2" (click)="selectToday()">Select Today</button>
 <button class="btn btn-sm btn-outline-primary me-2" (click)="dp.navigateTo()">To current month</button>
-<button class="btn btn-sm btn-outline-primary me-2" (click)="dp.navigateTo({year: 1434, month: 2})">
+<button class="btn btn-sm btn-outline-primary me-2" (click)="dp.navigateTo({ year: 1434, month: 2 })">
 	To Saf. 1434
 </button>
 

demo/src/app/components/datepicker/demos/islamicumalqura/datepicker-islamicumalqura.html

@@ -7,9 +7,9 @@
 
 <hr />
 
-<button class="btn btn-sm btn-outline-primary me-2" (click)="selectToday();">Select Today</button>
+<button class="btn btn-sm btn-outline-primary me-2" (click)="selectToday()">Select Today</button>
 <button class="btn btn-sm btn-outline-primary me-2" (click)="dp.navigateTo()">To current month</button>
-<button class="btn btn-sm btn-outline-primary me-2" (click)="dp.navigateTo({year: 1434, month: 2})">
+<button class="btn btn-sm btn-outline-primary me-2" (click)="dp.navigateTo({ year: 1434, month: 2 })">
 	To Saf. 1434
 </button>
 

demo/src/app/components/datepicker/demos/jalali/datepicker-jalali.html

@@ -9,7 +9,7 @@
 
 <button class="btn btn-sm btn-outline-primary me-2" (click)="selectToday()">Select Today</button>
 <button class="btn btn-sm btn-outline-primary me-2" (click)="dp.navigateTo()">To current month</button>
-<button class="btn btn-sm btn-outline-primary me-2" (click)="dp.navigateTo({year: 1396, month: 4})">
+<button class="btn btn-sm btn-outline-primary me-2" (click)="dp.navigateTo({ year: 1396, month: 4 })">
 	To Tir. 1396
 </button>
 

demo/src/app/components/dropdown/demos/manual/dropdown-manual.html

@@ -17,9 +17,9 @@
 	</div>
 </div>
 
-<button type="button" class="btn btn-outline-success me-2" (click)="$event.stopPropagation(); myDrop.open();">
+<button type="button" class="btn btn-outline-success me-2" (click)="$event.stopPropagation(); myDrop.open()">
 	Open from outside
 </button>
-<button type="button" class="btn btn-outline-danger me-2" (click)="$event.stopPropagation(); myDrop.close();">
+<button type="button" class="btn btn-outline-danger me-2" (click)="$event.stopPropagation(); myDrop.close()">
 	Close from outside
 </button>

demo/src/app/components/modal/demos/stacked/modal-stacked.html

@@ -1,3 +1,3 @@
 <button class="btn btn-lg btn-outline-primary" (click)="open()">Launch demo modal</button>
 <hr />
-<p>Number of modals: {{modalsNumber}}</p>
+<p>Number of modals: {{ modalsNumber }}</p>

demo/src/app/components/pagination/demos/advanced/pagination-advanced.html

@@ -22,4 +22,4 @@
 
 <hr />
 
-<pre>Current page: {{page}}</pre>
+<pre>Current page: {{ page }}</pre>

demo/src/app/components/pagination/demos/basic/pagination-basic.html

@@ -9,4 +9,4 @@
 
 <hr />
 
-<pre>Current page: {{page}}</pre>
+<pre>Current page: {{ page }}</pre>

demo/src/app/components/pagination/demos/customization/pagination-customization.html

@@ -26,11 +26,11 @@
 					aria-labelledby="paginationInputLabel paginationDescription"
 					style="width: 2.5rem"
 				/>
-				<span id="paginationDescription" class="col-form-label text-nowrap px-2"> of {{pages.length}}</span>
+				<span id="paginationDescription" class="col-form-label text-nowrap px-2"> of {{ pages.length }}</span>
 			</div>
 		</li>
 	</ng-template>
 </ngb-pagination>
 <hr />
 
-<pre>Current page: {{page}}</pre>
+<pre>Current page: {{ page }}</pre>

demo/src/app/components/popover/demos/tplcontent/popover-tplcontent.html

@@ -3,7 +3,10 @@
 	in a <code>&lt;ng-template&gt;</code> element.
 </p>
 
-<ng-template #popContent>Hello, <b>{{name}}</b>!</ng-template>
+<ng-template #popContent
+	>Hello, <b>{{ name }}</b
+	>!</ng-template
+>
 <ng-template #popTitle>Fancy <b>content!!</b></ng-template>
 <button type="button" class="btn btn-outline-secondary" [ngbPopover]="popContent" [popoverTitle]="popTitle">
 	I've got markup and bindings in my popover!

demo/src/app/components/popover/demos/tplwithcontext/popover-tplwithcontext.html

@@ -1,7 +1,10 @@
 <p>You can optionally pass in a context when manually triggering a popover.</p>
 
-<ng-template #popContent let-greeting="greeting">{{greeting}}, <b>{{name}}</b>!</ng-template>
-<ng-template #popTitle let-language="language">Greeting in {{language}}</ng-template>
+<ng-template #popContent let-greeting="greeting"
+	>{{ greeting }}, <b>{{ name }}</b
+	>!</ng-template
+>
+<ng-template #popTitle let-language="language">Greeting in {{ language }}</ng-template>
 <div class="buttons">
 	<button
 		type="button"
@@ -47,7 +50,7 @@
 		class="btn btn-outline-secondary me-2"
 		[ngbPopover]="popContent"
 		[popoverTitle]="popTitle"
-		[popoverContext]="{language: '中文', greeting: '你好'}"
+		[popoverContext]="{ language: '中文', greeting: '你好' }"
 	>
 		Chinese
 	</button>

demo/src/app/components/popover/demos/visibility/popover-visibility.html

@@ -14,7 +14,13 @@
 <hr />
 
 <ul>
-	<li>Popover is currently: <code>{{ popover.isOpen() ? 'open' : 'closed' }}</code></li>
-	<li>Last shown at: <code>{{lastShown | date:'h:mm:ss'}}</code></li>
-	<li>Last hidden at: <code>{{lastHidden | date:'h:mm:ss'}}</code></li>
+	<li
+		>Popover is currently: <code>{{ popover.isOpen() ? 'open' : 'closed' }}</code></li
+	>
+	<li
+		>Last shown at: <code>{{ lastShown | date: 'h:mm:ss' }}</code></li
+	>
+	<li
+		>Last hidden at: <code>{{ lastHidden | date: 'h:mm:ss' }}</code></li
+	>
 </ul>

demo/src/app/components/progressbar/demos/height/progressbar-height.html

@@ -1,4 +1,6 @@
 <p><ngb-progressbar type="success" [value]="25">default</ngb-progressbar></p>
 <p><ngb-progressbar type="info" [value]="50" height="10px">10px</ngb-progressbar></p>
 <p><ngb-progressbar type="warning" [value]="75" height=".5rem">.5rem</ngb-progressbar></p>
-<p><ngb-progressbar type="danger" [value]="100" [height]="height">{{height}}</ngb-progressbar></p>
+<p
+	><ngb-progressbar type="danger" [value]="100" [height]="height">{{ height }}</ngb-progressbar></p
+>

demo/src/app/components/rating/demos/events/rating-events.html

@@ -1,9 +1,9 @@
-<ngb-rating [(rate)]="selected" (hover)="hovered=$event" (leave)="hovered=0" [readonly]="readonly"></ngb-rating>
+<ngb-rating [(rate)]="selected" (hover)="hovered = $event" (leave)="hovered = 0" [readonly]="readonly"></ngb-rating>
 <hr />
 <pre>
 Selected: <b>{{selected}}</b>
 Hovered: <b>{{hovered}}</b>
 </pre>
-<button class="btn btn-sm btn-outline-{{readonly ? 'danger' : 'success'}}" (click)="readonly = !readonly">
-	{{ readonly ? "readonly" : "editable"}}
+<button class="btn btn-sm btn-outline-{{ readonly ? 'danger' : 'success' }}" (click)="readonly = !readonly">
+	{{ readonly ? 'readonly' : 'editable' }}
 </button>

demo/src/app/components/rating/demos/form/rating-form.html

@@ -10,7 +10,7 @@
 
 <hr />
 <pre>Model: <b>{{ ctrl.value }}</b></pre>
-<button class="btn btn-sm btn-outline-{{ ctrl.disabled ? 'danger' : 'success'}} me-2" (click)="toggle()">
-	{{ ctrl.disabled ? "control disabled" : " control enabled" }}
+<button class="btn btn-sm btn-outline-{{ ctrl.disabled ? 'danger' : 'success' }} me-2" (click)="toggle()">
+	{{ ctrl.disabled ? 'control disabled' : ' control enabled' }}
 </button>
 <button class="btn btn-sm btn-outline-primary me-2" (click)="ctrl.setValue(null)">Clear</button>

demo/src/app/components/rating/demos/template/rating-template.html

@@ -4,7 +4,7 @@
 
 <ngb-rating [(rate)]="currentRate">
 	<ng-template let-fill="fill" let-index="index">
-		<i class="bi-star{{fill === 100 ? '-fill' : ''}}" [class.filled]="fill === 100" [class.low]="index < 3"></i>
+		<i class="bi-star{{ fill === 100 ? '-fill' : '' }}" [class.filled]="fill === 100" [class.low]="index < 3"></i>
 	</ng-template>
 </ngb-rating>
 <hr />

demo/src/app/components/scrollspy/demos/items/scrollspy-items.html

@@ -16,7 +16,7 @@
 				class="list-group-item list-group-item-action"
 				href
 				[class.active]="spy.active === 'items-4'"
-				(click)="spy.scrollTo('items-4'); $event.preventDefault();"
+				(click)="spy.scrollTo('items-4'); $event.preventDefault()"
 			>
 				4 - link no directive
 			</a>

demo/src/app/components/table/demos/pagination/table-pagination.html

@@ -21,7 +21,7 @@
 				/>
 				{{ country.name }}
 			</td>
-			<td>{{ country.area | number}}</td>
+			<td>{{ country.area | number }}</td>
 			<td>{{ country.population | number }}</td>
 		</tr>
 	</tbody>

demo/src/app/components/timepicker/demos/basic/timepicker-basic.html

@@ -1,3 +1,3 @@
 <ngb-timepicker [(ngModel)]="time"></ngb-timepicker>
 <hr />
-<pre>Selected time: {{time | json}}</pre>
+<pre>Selected time: {{ time | json }}</pre>

demo/src/app/components/timepicker/demos/meridian/timepicker-meridian.html

@@ -1,6 +1,6 @@
 <ngb-timepicker [(ngModel)]="time" [meridian]="meridian"></ngb-timepicker>
-<button class="btn btn-sm btn-outline-{{meridian ? 'success' : 'danger'}}" (click)="toggleMeridian()">
-	Meridian - {{meridian ? "ON" : "OFF"}}
+<button class="btn btn-sm btn-outline-{{ meridian ? 'success' : 'danger' }}" (click)="toggleMeridian()">
+	Meridian - {{ meridian ? 'ON' : 'OFF' }}
 </button>
 <hr />
-<pre>Selected time: {{time | json}}</pre>
+<pre>Selected time: {{ time | json }}</pre>

demo/src/app/components/timepicker/demos/seconds/timepicker-seconds.html

@@ -1,6 +1,6 @@
 <ngb-timepicker [(ngModel)]="time" [seconds]="seconds"></ngb-timepicker>
-<button class="btn btn-sm btn-outline-{{seconds ? 'success' : 'danger'}}" (click)="toggleSeconds()">
-	Seconds - {{seconds ? "ON" : "OFF"}}
+<button class="btn btn-sm btn-outline-{{ seconds ? 'success' : 'danger' }}" (click)="toggleSeconds()">
+	Seconds - {{ seconds ? 'ON' : 'OFF' }}
 </button>
 <hr />
-<pre>Selected time: {{time | json}}</pre>
+<pre>Selected time: {{ time | json }}</pre>

demo/src/app/components/timepicker/demos/spinners/timepicker-spinners.html

@@ -2,6 +2,6 @@
 
 <hr />
 
-<button class="m-t-1 btn btn-sm btn-outline-{{spinners ? 'success' : 'danger'}}" (click)="toggleSpinners()">
-	Spinners - {{spinners ? "ON" : "OFF"}}
+<button class="m-t-1 btn btn-sm btn-outline-{{ spinners ? 'success' : 'danger' }}" (click)="toggleSpinners()">
+	Spinners - {{ spinners ? 'ON' : 'OFF' }}
 </button>

demo/src/app/components/timepicker/demos/steps/timepicker-steps.html

@@ -21,4 +21,4 @@
 	</div>
 </div>
 <hr />
-<pre>Selected time: {{time | json}}</pre>
+<pre>Selected time: {{ time | json }}</pre>

demo/src/app/components/timepicker/demos/validation/timepicker-validation.html

@@ -11,4 +11,4 @@
 </div>
 
 <hr />
-<pre>Selected time: {{ctrl.value | json}}</pre>
+<pre>Selected time: {{ ctrl.value | json }}</pre>

demo/src/app/components/toast/demos/custom-header/toast-custom-header.html

@@ -1,4 +1,4 @@
-<ngb-toast *ngIf="show" [autohide]="false" (hidden)="show=false">
+<ngb-toast *ngIf="show" [autohide]="false" (hidden)="show = false">
 	<ng-template ngbToastHeader>
 		<div class="me-auto">
 			<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">

demo/src/app/components/toast/demos/inline/toast-inline.html

@@ -3,7 +3,7 @@ <h6>Body only</h6>
 	<ngb-toast [autohide]="false"> I am a simple static toast. </ngb-toast>
 
 	<h6 class="mt-4">With a text header</h6>
-	<ngb-toast *ngIf="show" header="Hello" [autohide]="false" (hidden)="show=false">
+	<ngb-toast *ngIf="show" header="Hello" [autohide]="false" (hidden)="show = false">
 		I am a simple static toast with a header.
 	</ngb-toast>
 </div>

demo/src/app/components/tooltip/demos/tplcontent/tooltip-tplcontent.html

@@ -3,7 +3,10 @@
 	<code>&lt;ng-template&gt;</code> element.
 </p>
 
-<ng-template #tipContent>Hello, <b>{{name}}</b>!</ng-template>
+<ng-template #tipContent
+	>Hello, <b>{{ name }}</b
+	>!</ng-template
+>
 <button type="button" class="btn btn-outline-secondary" [ngbTooltip]="tipContent">
 	I've got markup and bindings in my tooltip!
 </button>

demo/src/app/components/tooltip/demos/tplwithcontext/tooltip-tplwithcontext.html

@@ -1,6 +1,9 @@
 <p>You can optionally pass in a context when manually triggering a tooltip.</p>
 
-<ng-template #tipContent let-greeting="greeting">{{greeting}}, <b>{{name}}</b>!</ng-template>
+<ng-template #tipContent let-greeting="greeting"
+	>{{ greeting }}, <b>{{ name }}</b
+	>!</ng-template
+>
 
 <div class="buttons">
 	<button
@@ -43,7 +46,7 @@
 		type="button"
 		class="btn btn-outline-secondary me-2"
 		[ngbTooltip]="tipContent"
-		[tooltipContext]="{greeting: '你好'}"
+		[tooltipContext]="{ greeting: '你好' }"
 	>
 		French
 	</button>