refactor: migration to self-closing tags

Author: xidedix

src/app/views/base/spinners/spinners.component.html

@@ -9,21 +9,21 @@
           Use the border spinners for a lightweight loading indicator.
         </p>
         <app-docs-example href="components/spinner">
-          <c-spinner></c-spinner>
+          <c-spinner />
         </app-docs-example>
         <p class="text-body-secondary small">
           The border spinner uses <code>currentColor</code> for its <code>border-color</code>.
           You can use any of our text color utilities on the standard spinner.
         </p>
         <app-docs-example href="components/spinner#colors">
-          <c-spinner color="primary"></c-spinner>
-          <c-spinner color="secondary"></c-spinner>
-          <c-spinner color="success"></c-spinner>
-          <c-spinner color="danger"></c-spinner>
-          <c-spinner color="warning"></c-spinner>
-          <c-spinner color="info"></c-spinner>
-          <c-spinner color="light"></c-spinner>
-          <c-spinner color="dark"></c-spinner>
+          <c-spinner color="primary" />
+          <c-spinner color="secondary" />
+          <c-spinner color="success" />
+          <c-spinner color="danger" />
+          <c-spinner color="warning" />
+          <c-spinner color="info" />
+          <c-spinner color="light" />
+          <c-spinner color="dark" />
         </app-docs-example>
       </c-card-body>
     </c-card>
@@ -39,21 +39,21 @@
           doesn&#39;t technically spin, it does repeatedly grow!
         </p>
         <app-docs-example href="components/spinner#growing-spinner">
-          <c-spinner variant="grow"></c-spinner>
+          <c-spinner variant="grow" />
         </app-docs-example>
         <p class="text-body-secondary small">
           Once again, this spinner is built with <code>currentColor</code>, so you can easily
           change its appearance. Here it is in blue, along with the supported variants.
         </p>
         <app-docs-example href="components/spinner#growing-spinner">
-          <c-spinner color="primary" variant="grow"></c-spinner>
-          <c-spinner color="secondary" variant="grow"></c-spinner>
-          <c-spinner color="success" variant="grow"></c-spinner>
-          <c-spinner color="danger" variant="grow"></c-spinner>
-          <c-spinner color="warning" variant="grow"></c-spinner>
-          <c-spinner color="info" variant="grow"></c-spinner>
-          <c-spinner color="light" variant="grow"></c-spinner>
-          <c-spinner color="dark" variant="grow"></c-spinner>
+          <c-spinner color="primary" variant="grow" />
+          <c-spinner color="secondary" variant="grow" />
+          <c-spinner color="success" variant="grow" />
+          <c-spinner color="danger" variant="grow" />
+          <c-spinner color="warning" variant="grow" />
+          <c-spinner color="info" variant="grow" />
+          <c-spinner color="light" variant="grow" />
+          <c-spinner color="dark" variant="grow" />
         </app-docs-example>
       </c-card-body>
     </c-card>
@@ -69,8 +69,8 @@
           be used within other components.
         </p>
         <app-docs-example href="components/spinner#size">
-          <c-spinner size="sm"></c-spinner>
-          <c-spinner size="sm" variant="grow"></c-spinner>
+          <c-spinner size="sm" />
+          <c-spinner size="sm" variant="grow" />
         </app-docs-example>
       </c-card-body>
     </c-card>

src/app/views/notifications/modals/modals.component.html

@@ -303,7 +303,7 @@ <h5 cModalTitle>Modal title</h5>
       <button [cModalToggle]="scrollingLongContentModal.id" cButtonClose></button>
     </c-modal-header>
     <c-modal-body>
-      <ng-container *ngTemplateOutlet="longContent"></ng-container>
+      <ng-container *ngTemplateOutlet="longContent" />
     </c-modal-body>
     <c-modal-footer>
       <button [cModalToggle]="scrollingLongContentModal.id" cButton color="secondary">
@@ -322,7 +322,7 @@ <h5 cModalTitle>Modal title</h5>
       <button [cModalToggle]="scrollableLongContentModal.id" cButtonClose></button>
     </c-modal-header>
     <c-modal-body>
-      <ng-container *ngTemplateOutlet="longContent"></ng-container>
+      <ng-container *ngTemplateOutlet="longContent" />
     </c-modal-body>
     <c-modal-footer>
       <button [cModalToggle]="scrollableLongContentModal.id" cButton color="secondary">

src/app/views/theme/colors.component.ts

@@ -49,7 +49,7 @@ export class ColorsComponent implements OnInit, AfterViewInit {
   template: `
     <c-col xl="2" md="4" sm="6" xs="12" class="my-4 ms-4">
       <div [ngClass]="colorClasses()" style="padding-top: 75%;"></div>
-      <ng-content></ng-content>
+      <ng-content />
     </c-col>
   `,
   imports: [ColComponent, NgClass],

src/app/views/widgets/widgets-dropdown/widgets-dropdown.component.html

@@ -29,7 +29,7 @@
         </c-dropdown>
       </ng-template>
       <ng-template cTemplateId="widgetChartTemplate">
-        <c-chart [data]="data[0]" [options]="options[0]" class="mt-3 mx-3" height="70" [type]="'line'"></c-chart>
+        <c-chart [data]="data[0]" [options]="options[0]" class="mt-3 mx-3" height="70" [type]="'line'" />
       </ng-template>
     </c-widget-stat-a>
   </c-col>
@@ -58,7 +58,7 @@
         </c-dropdown>
       </ng-template>
       <ng-template cTemplateId="widgetChartTemplate">
-        <c-chart [data]="data[1]" [options]="options[1]" class="mt-3 mx-3" height="70" type="line"></c-chart>
+        <c-chart [data]="data[1]" [options]="options[1]" class="mt-3 mx-3" height="70" type="line" />
       </ng-template>
     </c-widget-stat-a>
   </c-col>
@@ -87,7 +87,7 @@
         </c-dropdown>
       </ng-template>
       <ng-template cTemplateId="widgetChartTemplate">
-        <c-chart [data]="data[2]" [options]="options[2]" class="mt-3" height="70" type="line"></c-chart>
+        <c-chart [data]="data[2]" [options]="options[2]" class="mt-3" height="70" type="line" />
       </ng-template>
     </c-widget-stat-a>
   </c-col>
@@ -116,7 +116,7 @@
         </c-dropdown>
       </ng-template>
       <ng-template cTemplateId="widgetChartTemplate">
-        <c-chart [data]="data[3]" [options]="options[3]" class="mt-3 mx-3" height="70" type="bar"></c-chart>
+        <c-chart [data]="data[3]" [options]="options[3]" class="mt-3 mx-3" height="70" type="bar" />
       </ng-template>
     </c-widget-stat-a>
   </c-col>

src/app/views/widgets/widgets-dropdown/widgets-dropdown.component.ts

@@ -179,7 +179,7 @@ export class WidgetsDropdownComponent implements OnInit, AfterContentInit {
 
 @Component({
   selector: 'app-chart-sample',
-  template: '<c-chart type="line" [data]="data" [options]="options" width="300" #chart></c-chart>',
+  template: '<c-chart type="line" [data]="data" [options]="options" width="300" #chart />',
   imports: [ChartjsComponent]
 })
 export class ChartSample implements AfterViewInit {

src/app/views/widgets/widgets/widgets.component.html

@@ -97,7 +97,7 @@
       </c-row>
     </app-docs-example>
     <app-docs-example href="components/widgets/#cwidgetstatse">
-      <app-widgets-e></app-widgets-e>
+      <app-widgets-e />
     </app-docs-example>
     <app-docs-example href="components/widgets/#cwidgetstatsf">
       <c-row class="g-4">
@@ -289,10 +289,10 @@
     </app-docs-example>
 
     <app-docs-example href="components/widgets/#cwidgetstatsd">
-      <app-widgets-brand></app-widgets-brand>
+      <app-widgets-brand />
     </app-docs-example>
     <app-docs-example href="components/widgets/#cwidgetstatsd">
-      <app-widgets-brand [withCharts]="true"></app-widgets-brand>
+      <app-widgets-brand [withCharts]="true" />
     </app-docs-example>
 
     <app-docs-example href="components/widgets/#cwidgetstatsc">