fix: migration angular 17

projects/ngx-cream-lib/src/lib/chip/chip.component.html

@@ -1,16 +1,20 @@
 <span class="chip">
-  <a *ngIf="linkUrl !== ''" [routerLink]="linkUrl">
-    {{ label }}
-  </a>
-  <span *ngIf="linkUrl === ''">
-    {{ label }}
-  </span>
-
+
+  @if(linkUrl !== ''){
+    <a *ngIf="" [routerLink]="linkUrl">
+      {{ label }}
+    </a>
+  } @else {
+    <span>
+      {{ label }}
+    </span>
+  } 
+
   <button *ngIf="deletable" type="button" [disabled]="disabled" (click)="deleteChip()" [attr.aria-label]="'Delete chip ' + label">
     <svg role="img" width="25" height="25" aria-hidden="true">
       <use href="./assets/img/sprite.svg#bt-close"></use>
     </svg>
     <ng-container i18n>Delete</ng-container>
     {{ label }}
   </button>
-</span>
+</span>

projects/ngx-cream-lib/src/lib/chip/chip.component.ts

@@ -1,33 +1,22 @@
-import { Component, OnInit, Input, ElementRef, Renderer2 } from '@angular/core';
+import { Component, Input, ElementRef, Renderer2, inject } from '@angular/core';
 
 @Component({
   selector: 'c3m-chip',
   templateUrl: './chip.component.html',
   styleUrls: ['./chip.component.css'],
 })
-export class ChipComponent implements OnInit {
-  constructor(private elementRef: ElementRef, private renderer: Renderer2) {
-    this.chipIdNum = this.randomID();
-  }
+export class ChipComponent {
+
+  elementRef = inject(ElementRef);
+  renderer = inject(Renderer2)
 
   @Input() label: string = '';
   @Input() deletable: boolean = true;
   @Input() disabled: boolean = false;
   @Input() linkUrl: string = '';
 
-  chipIdNum!: number;
-  chipId!: string;
-
-  ngOnInit() {
-    this.chipId = 'chip' + this.chipIdNum;
-  }
-
   deleteChip(): void {
     this.renderer.removeChild(this.elementRef.nativeElement.parentNode, this.elementRef.nativeElement);
   }
 
-  randomID() {
-    const idRandom = Math.round(Math.random() * (20000 - 1) + 1);
-    return idRandom;
-  }
 }

projects/ngx-cream-lib/src/lib/collapsible/collapsible.component.ts

@@ -1,22 +1,15 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'c3m-collapsible',
   templateUrl: './collapsible.component.html',
   styleUrls: ['./collapsible.component.css'],
 })
-export class CollapsibleComponent implements OnInit {
+export class CollapsibleComponent  {
   @Input() summary: string = '';
   @Input() isOpen: boolean = false;
   @Input() total: string = '';
-
-  randomIdValue!: number;
-  panelId: string = '';
-
-  ngOnInit(): void {
-    this.randomIdValue = this.randomID();
-    this.panelId = 'colpanel-' + this.randomIdValue;
-  }
+  panelId = 'colpanel-' + this.randomID()
 
   randomID() {
     const idRandom = Math.round(Math.random() * (20000 - 1) + 1);

projects/ngx-cream-lib/src/lib/progress-spinner/progress-spinner.component.ts

@@ -7,7 +7,7 @@ import { Component, Input } from '@angular/core';
 })
 export class ProgressSpinnerComponent {
   @Input() progressText!: string;
-
+  
   isOpen: boolean = false;
   theId = this.randomID();
   spinnerTextId = 'progress' + this.theId;