diff --git a/libs/components/src/a11y/a11y-title.directive.ts b/libs/components/src/a11y/a11y-title.directive.ts
index 16b7c7ce384..f5f016b93c0 100644
--- a/libs/components/src/a11y/a11y-title.directive.ts
+++ b/libs/components/src/a11y/a11y-title.directive.ts
@@ -1,32 +1,37 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
-import { Directive, ElementRef, input, OnInit } from "@angular/core";
+import { Directive, ElementRef, Input, OnInit, Renderer2 } from "@angular/core";
 
 @Directive({
   selector: "[appA11yTitle]",
-  host: {
-    "[attr.title]": "this.getTitleAttr()",
-    "[attr.aria-label]": "this.getAriaLabelAttr()",
-  },
 })
 export class A11yTitleDirective implements OnInit {
-  appA11yTitle = input<string>();
+  @Input() set appA11yTitle(title: string) {
+    this.title = title;
+    this.setAttributes();
+  }
 
+  private title: string;
   private originalTitle: string | null;
   private originalAriaLabel: string | null;
 
-  constructor(private el: ElementRef) {}
+  constructor(
+    private el: ElementRef,
+    private renderer: Renderer2,
+  ) {}
 
   ngOnInit() {
     this.originalTitle = this.el.nativeElement.getAttribute("title");
     this.originalAriaLabel = this.el.nativeElement.getAttribute("aria-label");
+    this.setAttributes();
   }
 
-  getTitleAttr() {
-    return this.originalTitle ?? this.appA11yTitle();
-  }
-
-  getAriaLabelAttr() {
-    return this.originalAriaLabel ?? this.appA11yTitle();
+  private setAttributes() {
+    if (this.originalTitle === null) {
+      this.renderer.setAttribute(this.el.nativeElement, "title", this.title);
+    }
+    if (this.originalAriaLabel === null) {
+      this.renderer.setAttribute(this.el.nativeElement, "aria-label", this.title);
+    }
   }
 }