fix: added types for elementRef (#DS-4221)

Author: artembelik

apps/docs/src/app/components/code-snippet/code-snippet.ts

@@ -14,10 +14,10 @@ import { DocsLocaleState } from 'src/app/services/locale';
 export class DocsCodeSnippetDirective extends DocsLocaleState {
     private readonly clipboard = inject(Clipboard);
     private readonly toastService = inject(KbqToastService);
-    private readonly elementRef = inject(ElementRef);
+    private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
 
     copy() {
-        if (!this.clipboard.copy(this.elementRef.nativeElement.textContent)) {
+        if (!this.clipboard.copy(this.elementRef.nativeElement.textContent || '')) {
             return;
         }
 

apps/docs/src/app/components/component-viewer/component-viewer.component.ts

@@ -68,7 +68,7 @@ export class DocsComponentViewerComponent extends DocsLocaleState {
     private readonly sidepanelService = inject(KbqSidepanelService);
     private readonly modalService = inject(KbqModalService);
     private readonly docStates = inject(DocsDocStates);
-    private readonly elementRef = inject(ElementRef);
+    private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
 
     constructor() {
         super();

apps/docs/src/app/components/example-viewer/example-viewer.ts

@@ -66,11 +66,11 @@ export class DocsExampleViewerComponent implements OnDestroy {
         this.fetchDocument(url);
     }
 
-    @Output() readonly contentRendered = new EventEmitter<void>();
-    @Output() readonly contentRenderFailed = new EventEmitter<void>();
+    @Output() readonly contentRendered = new EventEmitter<HTMLElement>();
+    @Output() readonly contentRenderFailed = new EventEmitter<HTMLElement>();
 
     /** The document text. It should not be HTML encoded. */
-    textContent = '';
+    textContent: string | null = '';
 
     private static initExampleViewer(exampleViewerComponent: DocsLiveExampleViewerComponent, example: string) {
         exampleViewerComponent.example = example;
@@ -79,7 +79,7 @@ export class DocsExampleViewerComponent implements OnDestroy {
     constructor(
         private appRef: ApplicationRef,
         private componentFactoryResolver: ComponentFactoryResolver,
-        private elementRef: ElementRef,
+        private elementRef: ElementRef<HTMLElement>,
         private injector: Injector,
         private viewContainerRef: ViewContainerRef,
         private ngZone: NgZone,
@@ -130,7 +130,7 @@ export class DocsExampleViewerComponent implements OnDestroy {
     /** Show an error that occurred when fetching a document. */
     private showError(url: string, error: HttpErrorResponse) {
         console.error(error);
-        this.elementRef.nativeElement.innerHtml = `Failed to load document: ${url}. Error: ${error.statusText}. <a href="https://github.com/koobiq/angular-components/issues/new" class="kbq-markdown__a">Create issue</a>`;
+        this.elementRef.nativeElement.innerHTML = `Failed to load document: ${url}. Error: ${error.statusText}. <a href="https://github.com/koobiq/angular-components/issues/new" class="kbq-markdown__a">Create issue</a>`;
 
         this.ngZone.onStable
             .pipe(take(1))

apps/docs/src/app/components/icons-viewer/icons-viewer.component.ts

@@ -64,7 +64,7 @@ export class DocsIconsViewerComponent extends DocsLocaleState {
     private readonly titleService = inject(Title);
     private readonly docStates = inject(DocsDocStates);
     private readonly changeDetectorRef = inject(ChangeDetectorRef);
-    private readonly elementRef = inject(ElementRef);
+    private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
     private readonly destroyRef = inject(DestroyRef);
 
     readonly themePalette = ThemePalette;

apps/docs/src/app/components/live-example-viewer/docs-live-example-viewer.ts

@@ -73,7 +73,7 @@ export class DocsLiveExampleViewerComponent extends DocsLocaleState {
 
     private _example: string | null;
 
-    private readonly elementRef = inject(ElementRef);
+    private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
     private readonly httpClient = inject(HttpClient);
     private readonly cdr = inject(ChangeDetectorRef);
     private readonly window = inject(KBQ_WINDOW);

apps/docs/src/app/components/live-example/docs-live-example.ts

@@ -88,7 +88,7 @@ export class DocsLiveExampleComponent extends DocsLocaleState implements OnDestr
 
     private readonly appRef = inject(ApplicationRef);
     private readonly componentFactoryResolver = inject(ComponentFactoryResolver);
-    private readonly elementRef = inject(ElementRef);
+    private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
     private readonly injector = inject(Injector);
     private readonly viewContainerRef = inject(ViewContainerRef);
     private readonly ngZone = inject(NgZone);

apps/docs/src/app/components/register-header/register-header.directive.ts

@@ -7,7 +7,7 @@ import { DocsDocStates } from '../../services/doc-states';
 })
 export class DocsRegisterHeaderDirective {
     private readonly docStates = inject(DocsDocStates);
-    private readonly elementRef = inject(ElementRef);
+    private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
 
     constructor() {
         this.docStates.registerHeader(this.elementRef.nativeElement);

apps/docs/src/app/components/stackblitz/stackblitz-button.ts

@@ -43,7 +43,7 @@ export class DocsStackblitzButtonComponent extends KbqLink {
     private openStackBlitzFn: (() => void) | null = null;
 
     constructor(
-        elementRef: ElementRef,
+        elementRef: ElementRef<HTMLAnchorElement>,
         focusMonitor: FocusMonitor,
         changeDetector: ChangeDetectorRef,
         private stackBlitzWriter: DocsStackblitzWriter,

apps/docs/src/app/components/welcome/welcome.component.ts

@@ -33,7 +33,7 @@ export class DocsWelcomeComponent extends DocsLocaleState implements OnInit {
     protected structureCategories: DocsStructureCategory[];
     currentTheme$: Observable<string>;
 
-    private readonly elementRef = inject(ElementRef);
+    private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
     private readonly docStates = inject(DocsDocStates);
 
     constructor(private readonly themeService: ThemeService) {

packages/components-dev/toast/module.ts

@@ -38,7 +38,7 @@ export class DevToastComponent extends KbqToastComponent {
     constructor(
         readonly data: KbqToastData,
         readonly service: KbqToastService,
-        elementRef: ElementRef,
+        elementRef: ElementRef<HTMLElement>,
         focusMonitor: FocusMonitor
     ) {
         super(data, service, elementRef, focusMonitor);