refactor: minor syntax cleanups

Author: xidedix

projects/coreui-angular/src/lib/accordion/accordion-item/accordion-item.component.html

@@ -1,9 +1,9 @@
 <ng-container>
   <div class="accordion-header">
-    <ng-container *ngTemplateOutlet="templates['accordionHeaderTemplate'] || defaultAccordionHeaderTemplate; context: itemContext"></ng-container>
+    <ng-container *ngTemplateOutlet="templates['accordionHeaderTemplate'] || defaultAccordionHeaderTemplate; context: itemContext" />
   </div>
   <div class="accordion-collapse" cCollapse [visible]="visible" [attr.aria-expanded]="visible" [id]="contentId">
-    <ng-container *ngTemplateOutlet="templates['accordionBodyTemplate'] || defaultAccordionBodyTemplate; context: itemContext"></ng-container>
+    <ng-container *ngTemplateOutlet="templates['accordionBodyTemplate'] || defaultAccordionBodyTemplate; context: itemContext" />
   </div>
 </ng-container>
 
@@ -16,7 +16,7 @@
 </ng-template>
 
 <ng-template #defaultAccordionHeaderContentTemplate>
-  <ng-content></ng-content>
+  <ng-content />
 </ng-template>
 
 <ng-template #defaultAccordionBodyTemplate>
@@ -28,5 +28,5 @@
 </ng-template>
 
 <ng-template #defaultAccordionBodyContentTemplate>
-  <ng-content></ng-content>
+  <ng-content />
 </ng-template>

projects/coreui-angular/src/lib/alert/alert.component.html

@@ -2,7 +2,7 @@
   @if (dismissible) {
     <ng-container *ngTemplateOutlet="templates?.alertButtonCloseTemplate || defaultAlertButtonCloseTemplate" />
   }
-  <ng-content></ng-content>
+  <ng-content />
 }
 <ng-template #defaultAlertButtonCloseTemplate>
   <button (click)="visible=false" aria-label="Close" cButtonClose></button>

projects/coreui-angular/src/lib/avatar/avatar.component.html

@@ -1,5 +1,5 @@
 <ng-container>
-  <ng-container *ngTemplateOutlet="defaultImageTemplate"></ng-container>
+  <ng-container *ngTemplateOutlet="defaultImageTemplate" />
   @if (!!status) {
     <span [ngClass]="statusClass"></span>
   }
@@ -9,9 +9,6 @@
   @if (!!src) {
     <img [src]="src" class="avatar-img" />
   } @else {
-    <ng-content></ng-content>
+    <ng-content />
   }
-  <ng-template #imageContent>
-    <ng-content></ng-content>
-  </ng-template>
 </ng-template>

projects/coreui-angular/src/lib/breadcrumb/breadcrumb-router/breadcrumb-router.component.html

@@ -1,6 +1,6 @@
 <c-breadcrumb class="m-0">
   @for (breadcrumb of breadcrumbs | async; track breadcrumb; let last = $last) {
-    @if(breadcrumb?.label && (breadcrumb?.url?.slice(-1) === '/' || last)) {
+    @if (breadcrumb?.label && (breadcrumb?.url?.slice(-1) === '/' || last)) {
       <c-breadcrumb-item
         [active]="last"
         [url]="breadcrumb?.url"

projects/coreui-angular/src/lib/breadcrumb/breadcrumb-router/breadcrumb-router.service.ts

@@ -11,8 +11,8 @@ import { IBreadcrumbItem } from '../breadcrumb-item/breadcrumb-item';
 export class BreadcrumbRouterService {
   public outlet = 'primary';
 
-  readonly #breadcrumbsBehaviorSubject = new BehaviorSubject<IBreadcrumbItem[]>(new Array<IBreadcrumbItem>());
-  breadcrumbs$ = this.#breadcrumbsBehaviorSubject.asObservable();
+  readonly #breadcrumbsBehaviorSubject: BehaviorSubject<IBreadcrumbItem[]> = new BehaviorSubject<IBreadcrumbItem[]>(new Array<IBreadcrumbItem>());
+  readonly breadcrumbs$: Observable<IBreadcrumbItem[]> = this.#breadcrumbsBehaviorSubject.asObservable();
 
   constructor(private router: Router, private route: ActivatedRoute) {
 

projects/coreui-angular/src/lib/breadcrumb/breadcrumb/breadcrumb.component.ts

@@ -2,7 +2,7 @@ import { Component, HostBinding, Input } from '@angular/core';
 
 @Component({
   selector: 'c-breadcrumb',
-  template: '<ng-content></ng-content>',
+  template: '<ng-content />',
   standalone: true
 })
 export class BreadcrumbComponent {
@@ -26,9 +26,6 @@ export class BreadcrumbComponent {
   get hostClasses() {
     return {
       breadcrumb: true
-    }
+    };
   }
-
-  constructor() { }
-
 }

projects/coreui-angular/src/lib/button-group/button-group/button-group.component.ts

@@ -2,7 +2,7 @@ import { Component, HostBinding, Input } from '@angular/core';
 
 @Component({
   selector: 'c-button-group',
-  template: `<ng-content></ng-content>`,
+  template: '<ng-content />',
   standalone: true
 })
 export class ButtonGroupComponent {
@@ -30,11 +30,8 @@ export class ButtonGroupComponent {
     return {
       'btn-group': !this.vertical,
       'btn-group-vertical': this.vertical,
-      [`btn-group-${this.size}`]: !!this.size,
+      [`btn-group-${this.size}`]: !!this.size
     };
   }
 
-
-  constructor() { }
-
 }

projects/coreui-angular/src/lib/button-group/button-toolbar/button-toolbar.component.ts

@@ -2,7 +2,7 @@ import { Component, HostBinding, Input } from '@angular/core';
 
 @Component({
   selector: 'c-button-toolbar',
-  template: `<ng-content></ng-content>`,
+  template: '<ng-content />',
   standalone: true
 })
 export class ButtonToolbarComponent {
@@ -17,10 +17,7 @@ export class ButtonToolbarComponent {
   @HostBinding('class')
   get hostClasses(): any {
     return {
-      'btn-toolbar': true,
+      'btn-toolbar': true
     };
   }
-
-  constructor() { }
-
 }

projects/coreui-angular/src/lib/callout/callout.component.ts

@@ -3,7 +3,7 @@ import { Colors } from '../coreui.types';
 
 @Component({
   selector: 'c-callout, [cCallout]',
-  template: `<ng-content></ng-content>`,
+  template: '<ng-content />',
   styleUrls: ['./callout.component.scss'],
   standalone: true
 })
@@ -17,13 +17,10 @@ export class CalloutComponent {
 
   @HostBinding('class')
   get hostClasses(): any {
-
     return {
       callout: true,
       [`callout-${this.color}`]: !!this.color
     };
   }
 
-  constructor() { }
-
 }

projects/coreui-angular/src/lib/card/card-body.component.ts

@@ -2,7 +2,7 @@ import {Component, HostBinding} from '@angular/core';
 
 @Component({
   selector: 'c-card-body, [c-card-body]',
-  template: '<ng-content></ng-content>',
+  template: '<ng-content />',
   standalone: true
 })
 export class CardBodyComponent {

projects/coreui-angular/src/lib/card/card-footer.component.ts

@@ -2,7 +2,7 @@ import { Component, HostBinding } from '@angular/core';
 
 @Component({
   selector: 'c-card-footer, [c-card-footer]',
-  template: '<ng-content></ng-content>',
+  template: '<ng-content />',
   standalone: true
 })
 export class CardFooterComponent {

projects/coreui-angular/src/lib/card/card-group.component.ts

@@ -2,7 +2,7 @@ import { Component, HostBinding } from '@angular/core';
 
 @Component({
   selector: 'c-card-group, [c-card-group]',
-  template: '<ng-content></ng-content>',
+  template: '<ng-content />',
   standalone: true
 })
 export class CardGroupComponent {

projects/coreui-angular/src/lib/card/card-header-actions.component.ts

@@ -2,7 +2,7 @@ import {Component, HostBinding} from '@angular/core';
 
 @Component({
   selector: 'c-card-header-actions, [c-card-header-actions]',
-  template: '<ng-content></ng-content>',
+  template: '<ng-content />',
   standalone: true
 })
 export class CardHeaderActionsComponent {

projects/coreui-angular/src/lib/card/card-header.component.ts

@@ -2,7 +2,7 @@ import { Component, HostBinding } from '@angular/core';
 
 @Component({
   selector: 'c-card-header, [c-card-header]',
-  template: '<ng-content></ng-content>',
+  template: '<ng-content />',
   standalone: true
 })
 export class CardHeaderComponent {

projects/coreui-angular/src/lib/card/card-img-overlay/card-img-overlay.component.ts

@@ -2,7 +2,7 @@ import { Component, HostBinding } from '@angular/core';
 
 @Component({
   selector: 'c-card-img-overlay',
-  template: `<ng-content></ng-content>`,
+  template: '<ng-content />',
   styleUrls: ['./card-img-overlay.component.scss'],
   standalone: true
 })

projects/coreui-angular/src/lib/carousel/carousel-caption/carousel-caption.component.ts

@@ -2,14 +2,12 @@ import { Component, HostBinding } from '@angular/core';
 
 @Component({
   selector: 'c-carousel-caption',
-  template: `<ng-content></ng-content>`,
+  template: '<ng-content />',
   styleUrls: ['./carousel-caption.component.scss'],
   standalone: true
 })
 export class CarouselCaptionComponent {
 
   @HostBinding('class.carousel-caption') carouselCaptionClass = true;
 
-  constructor() { }
-
 }

projects/coreui-angular/src/lib/carousel/carousel-inner/carousel-inner.component.html

@@ -1,7 +1,7 @@
 <div [@slideAnimation]="slide" [@.disabled]="!animate">
-  <ng-content></ng-content>
+  <ng-content />
 </div>
 <!--todo-->
 <!--<div [@fadeAnimation]="slide" [@.disabled]="!animate" >-->
-<!--  <ng-content></ng-content>-->
+<!--  <ng-content />-->
 <!--</div>-->

projects/coreui-angular/src/lib/carousel/carousel-item/carousel-item.component.html

@@ -1,4 +1,3 @@
-<!--todo ngIf-->
 @if (active) {
   <ng-content />
 }

projects/coreui-angular/src/lib/collapse/collapse.directive.spec.ts

@@ -8,7 +8,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 class MockElementRef extends ElementRef {}
 
 @Component({
-  template: `<div cCollapse></div>`
+  template: '<div cCollapse></div>'
 })
 class TestComponent {}
 

projects/coreui-angular/src/lib/footer/footer.component.ts

@@ -4,7 +4,7 @@ import { Positions } from '../coreui.types';
 
 @Component({
   selector: 'c-footer, [cFooter]',
-  template: `<ng-content></ng-content>`,
+  template: '<ng-content />',
   standalone: true
 })
 export class FooterComponent {
@@ -25,7 +25,7 @@ export class FooterComponent {
   get getClasses(): any {
     return {
       footer: true,
-      [`footer-${this.position}`]: !!this.position,
+      [`footer-${this.position}`]: !!this.position
     };
   }
 }

projects/coreui-angular/src/lib/form/form-check/form-check-input.directive.spec.ts

@@ -4,7 +4,7 @@ import { By } from '@angular/platform-browser';
 import { FormCheckInputDirective } from './form-check-input.directive';
 
 @Component({
-  template: `<input cFormCheckInput>`
+  template: '<input cFormCheckInput>'
 })
 class TestComponent {}
 

projects/coreui-angular/src/lib/form/form-check/form-check.component.ts

@@ -4,7 +4,7 @@ import { FormCheckLabelDirective } from './form-check-label.directive';
 
 @Component({
   selector: 'c-form-check',
-  template: '<ng-content></ng-content>',
+  template: '<ng-content />',
   exportAs: 'cFormCheck',
   standalone: true
 })

projects/coreui-angular/src/lib/form/form-feedback/form-feedback.component.ts

@@ -2,7 +2,7 @@ import { booleanAttribute, Component, HostBinding, Input } from '@angular/core';
 
 @Component({
   selector: 'c-form-feedback',
-  template: '<ng-content></ng-content>',
+  template: '<ng-content />',
   standalone: true
 })
 export class FormFeedbackComponent {

projects/coreui-angular/src/lib/form/input-group/input-group.component.ts

@@ -1,12 +1,8 @@
-import {
-  Component,
-  HostBinding,
-  Input,
-} from '@angular/core';
+import { Component, HostBinding, Input } from '@angular/core';
 
 @Component({
   selector: 'c-input-group',
-  template: `<ng-content></ng-content>`,
+  template: '<ng-content />',
   standalone: true
 })
 export class InputGroupComponent {
@@ -19,10 +15,8 @@ export class InputGroupComponent {
   get hostClasses(): any {
     return {
       'input-group': true,
-      [`input-group-${this.sizing}`]: !!this.sizing,
+      [`input-group-${this.sizing}`]: !!this.sizing
     };
   }
 
-  constructor() {}
-
 }

projects/coreui-angular/src/lib/grid/col.component.ts

@@ -4,7 +4,7 @@ import { ColDirective } from './col.directive';
 
 @Component({
   selector: 'c-col',
-  template: '<ng-content></ng-content>',
+  template: '<ng-content />',
   styleUrls: ['./col.component.scss'],
   standalone: true
 })

projects/coreui-angular/src/lib/grid/container.component.ts

@@ -5,7 +5,7 @@ import { Breakpoints } from '../coreui.types';
 
 @Component({
   selector: 'c-container, [cContainer]',
-  template: '<ng-content></ng-content>',
+  template: '<ng-content />',
   styleUrls: ['./container.component.scss'],
   standalone: true
 })

projects/coreui-angular/src/lib/grid/row.component.ts

@@ -4,7 +4,7 @@ import { RowDirective } from './row.directive';
 
 @Component({
   selector: 'c-row',
-  template: '<ng-content></ng-content>',
+  template: '<ng-content />',
   standalone: true
 })
 export class RowComponent extends RowDirective {}

projects/coreui-angular/src/lib/header/header-brand/header-brand.component.ts

@@ -2,7 +2,7 @@ import { Component, HostBinding, Input } from '@angular/core';
 
 @Component({
   selector: 'c-header-brand',
-  template: `<ng-content></ng-content>`,
+  template: '<ng-content />',
   standalone: true
 })
 export class HeaderBrandComponent {

projects/coreui-angular/src/lib/header/header-nav/header-nav.component.ts

@@ -2,7 +2,7 @@ import { Component, HostBinding, Input } from '@angular/core';
 
 @Component({
   selector: 'c-header-nav',
-  template: `<ng-content></ng-content>`,
+  template: '<ng-content />',
   styleUrls: ['./header-nav.component.scss'],
   standalone: true
 })

projects/coreui-angular/src/lib/header/header-text/header-text.component.ts

@@ -2,7 +2,7 @@ import { Component, HostBinding } from '@angular/core';
 
 @Component({
   selector: 'c-header-text, [cHeaderText]',
-  template: `<ng-content></ng-content>`,
+  template: '<ng-content />',
   standalone: true
 })
 export class HeaderTextComponent {

projects/coreui-angular/src/lib/list-group/list-group-item.directive.spec.ts

@@ -6,7 +6,7 @@ import { By } from '@angular/platform-browser';
 class MockElementRef extends ElementRef {}
 
 @Component({
-  template: `<li cListGroupItem></li>`
+  template: '<li cListGroupItem></li>'
 })
 class TestComponent {}
 

projects/coreui-angular/src/lib/modal/modal-body/modal-body.component.ts

@@ -2,7 +2,7 @@ import { Component, HostBinding } from '@angular/core';
 
 @Component({
   selector: 'c-modal-body',
-  template: '<ng-content></ng-content>',
+  template: '<ng-content />',
   styleUrls: ['./modal-body.component.scss'],
   standalone: true
 })