diff --git a/packages/components-angular/src/focus.directive.ts b/packages/components-angular/src/focus.directive.ts
index 29f8d11ae5..200b3b7cab 100644
--- a/packages/components-angular/src/focus.directive.ts
+++ b/packages/components-angular/src/focus.directive.ts
@@ -1,9 +1,9 @@
 import { AfterViewInit, Directive, ElementRef } from '@angular/core'
 
 @Directive({
-  selector: 'autofocus',
+  selector: 'balAutofocus',
 })
-export class AutoFocus implements AfterViewInit {
+export class BalAutoFocus implements AfterViewInit {
   constructor(private elementRef: ElementRef) {}
 
   ngAfterViewInit() {
diff --git a/packages/components-angular/src/index.ts b/packages/components-angular/src/index.ts
index 0a6dccfa1a..0a0c6e9f46 100644
--- a/packages/components-angular/src/index.ts
+++ b/packages/components-angular/src/index.ts
@@ -8,7 +8,7 @@ export { CheckboxValueAccessor } from './directives/checkbox-value-accessor'
 export { NumericValueAccessor } from './directives/number-value-accessor'
 export { SelectValueAccessor } from './directives/select-value-accessor'
 export { TextValueAccessor } from './directives/text-value-accessor'
-export { AutoFocus } from './focus.directive'
+export { BalAutoFocus } from './focus.directive'
 
 // SERVICES
 export { BalToastService } from './overlays/toast.service'
diff --git a/packages/components-angular/src/shared.ts b/packages/components-angular/src/shared.ts
index bca19efa2f..ced22440f5 100644
--- a/packages/components-angular/src/shared.ts
+++ b/packages/components-angular/src/shared.ts
@@ -7,11 +7,11 @@ import { SelectValueAccessor } from './directives/select-value-accessor'
 import { CheckboxValueAccessor } from './directives/checkbox-value-accessor'
 import { NumericValueAccessor } from './directives/number-value-accessor'
 
-import { AutoFocus } from './focus.directive'
+import { BalAutoFocus } from './focus.directive'
 
 const DECLARATIONS = [
   // directives
-  AutoFocus,
+  BalAutoFocus,
 
   // ngModel accessors
   CheckboxValueAccessor,