diff --git a/example-project/component-library-angular/src/directives/proxies.ts b/example-project/component-library-angular/src/directives/proxies.ts
index 6c795aea..2ba4cfd0 100644
--- a/example-project/component-library-angular/src/directives/proxies.ts
+++ b/example-project/component-library-angular/src/directives/proxies.ts
@@ -18,7 +18,7 @@ import { Components } from 'component-library';
   inputs: ['buttonType', 'color', 'disabled', 'download', 'expand', 'fill', 'href', 'mode', 'rel', 'shape', 'size', 'strong', 'target', 'type'],
 })
 export class MyButton {
-  protected el: HTMLElement;
+  protected el: HTMLMyButtonElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -50,7 +50,7 @@ export declare interface MyButton extends Components.MyButton {
   inputs: ['checked', 'color', 'disabled', 'indeterminate', 'mode', 'name', 'value'],
 })
 export class MyCheckbox {
-  protected el: HTMLElement;
+  protected el: HTMLMyCheckboxElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -88,7 +88,7 @@ export declare interface MyCheckbox extends Components.MyCheckbox {
   inputs: ['age', 'favoriteKidName', 'first', 'kidsNames', 'last', 'middle'],
 })
 export class MyComponent {
-  protected el: HTMLElement;
+  protected el: HTMLMyComponentElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -117,7 +117,7 @@ export declare interface MyComponent extends Components.MyComponent {
   inputs: ['accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'disabled', 'enterkeyhint', 'inputmode', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'size', 'spellcheck', 'step', 'type', 'value'],
 })
 export class MyInput {
-  protected el: HTMLElement;
+  protected el: HTMLMyInputElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -160,7 +160,7 @@ export declare interface MyInput extends Components.MyInput {
   inputs: ['animated', 'backdropDismiss', 'component', 'componentProps', 'cssClass', 'event', 'keyboardClose', 'mode', 'showBackdrop', 'translucent'],
 })
 export class MyPopover {
-  protected el: HTMLElement;
+  protected el: HTMLMyPopoverElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -202,7 +202,7 @@ export declare interface MyPopover extends Components.MyPopover {
   inputs: ['color', 'disabled', 'mode', 'name', 'value'],
 })
 export class MyRadio {
-  protected el: HTMLElement;
+  protected el: HTMLMyRadioElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -238,7 +238,7 @@ export declare interface MyRadio extends Components.MyRadio {
   inputs: ['allowEmptySelection', 'name', 'value'],
 })
 export class MyRadioGroup {
-  protected el: HTMLElement;
+  protected el: HTMLMyRadioGroupElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -268,7 +268,7 @@ export declare interface MyRadioGroup extends Components.MyRadioGroup {
   inputs: ['color', 'debounce', 'disabled', 'dualKnobs', 'max', 'min', 'mode', 'name', 'pin', 'snaps', 'step', 'ticks', 'value'],
 })
 export class MyRange {
-  protected el: HTMLElement;
+  protected el: HTMLMyRangeElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
diff --git a/packages/angular/src/generate-angular-component.ts b/packages/angular/src/generate-angular-component.ts
index e66f31c0..fe8133f0 100644
--- a/packages/angular/src/generate-angular-component.ts
+++ b/packages/angular/src/generate-angular-component.ts
@@ -8,9 +8,14 @@ import type { OutputType } from './types';
  *
  * @param prop A ComponentCompilerEvent or ComponentCompilerProperty to turn into a property declaration.
  * @param type The name of the type (e.g. 'string')
+ * @param inlinePropertyAsSetter Inlines the entire property as an empty Setter, to aid Angulars Compilerp
  * @returns The property declaration as a string.
  */
-function createPropertyDeclaration(prop: ComponentCompilerEvent | ComponentCompilerProperty, type: string): string {
+function createPropertyDeclaration(
+  prop: ComponentCompilerEvent | ComponentCompilerProperty,
+  type: string,
+  inlinePropertyAsSetter: boolean = false
+): string {
   const comment = createDocComment(prop.docs);
   let eventName = prop.name;
   if (/[-/]/.test(prop.name)) {
@@ -18,8 +23,14 @@ function createPropertyDeclaration(prop: ComponentCompilerEvent | ComponentCompi
     // https://github.com/ionic-team/stencil-ds-output-targets/issues/212
     eventName = `'${prop.name}'`;
   }
-  return `${comment.length > 0 ? `  ${comment}` : ''}
+
+  if (inlinePropertyAsSetter) {
+    return `${comment.length > 0 ? `  ${comment}` : ''}
+  set ${eventName}(_: ${type}) {};`;
+  } else {
+    return `${comment.length > 0 ? `  ${comment}` : ''}
   ${eventName}: ${type};`;
+  }
 }
 
 /**
@@ -79,10 +90,12 @@ export const createAngularComponentDefinition = (
   }
 
   const propertyDeclarations = inlineComponentProps.map((m) =>
-    createPropertyDeclaration(m, `Components.${tagNameAsPascal}['${m.name}']`)
+    createPropertyDeclaration(m, `Components.${tagNameAsPascal}['${m.name}']`, true)
   );
 
-  const propertiesDeclarationText = ['protected el: HTMLElement;', ...propertyDeclarations].join('\n  ');
+  const propertiesDeclarationText = [`protected el: HTML${tagNameAsPascal}Element;`, ...propertyDeclarations].join(
+    '\n  '
+  );
 
   /**
    * Notes on the generated output:
diff --git a/packages/angular/tests/generate-angular-component.test.ts b/packages/angular/tests/generate-angular-component.test.ts
index d4d6d70a..4116e222 100644
--- a/packages/angular/tests/generate-angular-component.test.ts
+++ b/packages/angular/tests/generate-angular-component.test.ts
@@ -17,7 +17,7 @@ describe('createAngularComponentDefinition()', () => {
   inputs: [],
 })
 export class MyComponent {
-  protected el: HTMLElement;
+  protected el: HTMLMyComponentElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -38,7 +38,7 @@ export class MyComponent {
   inputs: ['my-input', 'my-other-input'],
 })
 export class MyComponent {
-  protected el: HTMLElement;
+  protected el: HTMLMyComponentElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -65,7 +65,7 @@ export class MyComponent {
   inputs: [],
 })
 export class MyComponent {
-  protected el: HTMLElement;
+  protected el: HTMLMyComponentElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -88,7 +88,7 @@ export class MyComponent {
   inputs: [],
 })
 export class MyComponent {
-  protected el: HTMLElement;
+  protected el: HTMLMyComponentElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -112,7 +112,7 @@ export class MyComponent {
   inputs: [],
 })
 export class MyComponent {
-  protected el: HTMLElement;
+  protected el: HTMLMyComponentElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -135,7 +135,7 @@ export class MyComponent {
   inputs: ['my-input', 'my-other-input'],
 })
 export class MyComponent {
-  protected el: HTMLElement;
+  protected el: HTMLMyComponentElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -162,7 +162,7 @@ export class MyComponent {
   inputs: [],
 })
 export class MyComponent {
-  protected el: HTMLElement;
+  protected el: HTMLMyComponentElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -186,7 +186,7 @@ export class MyComponent {
   inputs: [],
 })
 export class MyComponent {
-  protected el: HTMLElement;
+  protected el: HTMLMyComponentElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -209,7 +209,7 @@ export class MyComponent {
   standalone: true
 })
 export class MyComponent {
-  protected el: HTMLElement;
+  protected el: HTMLMyComponentElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -241,11 +241,11 @@ export class MyComponent {
   inputs: ['myMember'],
 })
 export class MyComponent {
-  protected el: HTMLElement;
+  protected el: HTMLMyComponentElement;
     /**
    * This is a jsDoc for myMember @deprecated use v2 of this API
    */
-  myMember: Components.MyComponent['myMember'];
+  set myMember(_: Components.MyComponent['myMember']) {};
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;