diff --git a/src/app/components/bar-code-reader/bar-code-reader.html b/src/app/components/bar-code-reader/bar-code-reader.html
new file mode 100644
index 0000000..42e0436
--- /dev/null
+++ b/src/app/components/bar-code-reader/bar-code-reader.html
@@ -0,0 +1,6 @@
+<barcode-reader
+    #reader
+    (result)="this.result.emit($event)" 
+    (scan-status)="this.scanStatus.emit($event)" 
+    (scan-permission-denied)="this.scanPermissionDenied.emit()"
+/>
diff --git a/src/app/components/bar-code-reader/bar-code-reader.scss b/src/app/components/bar-code-reader/bar-code-reader.scss
new file mode 100644
index 0000000..57f56fc
--- /dev/null
+++ b/src/app/components/bar-code-reader/bar-code-reader.scss
@@ -0,0 +1,6 @@
+barcode-reader {
+    display: block;
+    width: 100%;
+    position: absolute;
+    top: 0;
+}
\ No newline at end of file
diff --git a/src/app/components/bar-code-reader/bar-code-reader.spec.ts b/src/app/components/bar-code-reader/bar-code-reader.spec.ts
new file mode 100644
index 0000000..2ae8b8d
--- /dev/null
+++ b/src/app/components/bar-code-reader/bar-code-reader.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BarCodeReaderWrapper } from './bar-code-reader';
+
+describe('BarCodeReaderWrapper', () => {
+  let component: BarCodeReaderWrapper;
+  let fixture: ComponentFixture<BarCodeReaderWrapper>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [BarCodeReaderWrapper]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(BarCodeReaderWrapper);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/bar-code-reader/bar-code-reader.ts b/src/app/components/bar-code-reader/bar-code-reader.ts
new file mode 100644
index 0000000..77f9272
--- /dev/null
+++ b/src/app/components/bar-code-reader/bar-code-reader.ts
@@ -0,0 +1,23 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, effect, ElementRef, input, output, signal, viewChild } from '@angular/core';
+import { DetectedBarcode } from '../../types/globalThis';
+import { BarcodeReader } from '../../web-components/barcode-reader';
+
+@Component({
+  selector: 'app-bar-code-reader',
+  templateUrl: './bar-code-reader.html',
+  styleUrl: './bar-code-reader.scss',
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class BarCodeReaderWrapper {
+  private readonly ref = viewChild<ElementRef<BarcodeReader>>('reader');
+  protected readonly result = output<Event & {detail?: {code: DetectedBarcode | null}}>();
+  protected readonly scanStatus = output<Event & {detail?: {state: ScanState}}>();
+  protected readonly scanPermissionDenied = output();
+  scan = input({scan: false})
+
+  constructor() {
+    effect(() => this.scan().scan && this.ref()?.nativeElement.scan())
+  }
+}
+
+export type ScanState = 'loading'|'started'|'stopped';
\ No newline at end of file