Unable to connect input with abstract classes at a hierarchy depth of 2 levels or more

Question

Unable to connect input with abstract classes at a hierarchy depth of 2 levels or more

When working on my Angular application:

If a Component utilizes an Input that is defined in its immediate parent (abstract) class, everything runs smoothly.
However, if a Component uses an Input that is declared in a parent class located two levels above (abstract), issues arise during the execution of ng build or ng serve.

For instance, there are 4 classes involved:

export abstract class AbstractAComponent {
  @Input() myInput: string;
}

export abstract class AbstractBComponent extends AbstractAComponent {}

@Component({
  selector: 'app-one',
  templateUrl: './one.component.html',
  styleUrls: ['./one.component.scss']
})
export class OneComponent extends AbstractAComponent {}

@Component({
  selector: 'app-two',
  templateUrl: './two.component.html',
  styleUrls: ['./two.component.scss']
})
export class TwoComponent extends AbstractBComponent {}

This is how they are implemented:

<app-one [myInput]="'value 1'"></app-one>
<app-two [myInput]="'value 2'"></app-two>

In summary: - The declaration @Input() myInput exists within AbstractAComponent - OneComponent directly inherits from AbstractAComponent - TwoComponent extends AbstractBComponent, which further extends AbstractAComponent

Expected outcome: - both OneComponent and TwoComponent should possess @Input() myInput

Current scenario: - It appears that TwoComponent is not inheriting @Input() myInput as expected

This leads to the following error message:

ERROR in src/app/app.component.html:2:10 - error NG8002: Can't bind to 'myInput' since it isn't a known property of 'app-two'.
1. If 'app-two' is an Angular component and it has 'myInput' input, then verify that it is part of this module.
2. If 'app-two' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property, add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

angular typescript angular-components

Answer 1

Answer №1

Upon encountering what seemed like a bug, I took the initiative to report it here. To my surprise, elvisbegovic pointed me in the direction of the solution.

To resolve the issue, simply include @Directive() in your abstract class(es). Here's an example:

import { Directive, Input } from '@angular/core';

@Directive()
export abstract class AbstractAComponent {
  @Input() myInput: string;
}

import { Directive } from '@angular/core';

@Directive()
export abstract class AbstractBComponent extends AbstractAComponent {}

Answer 2

Upon encountering what seemed like a bug, I took the initiative to report it here. To my surprise, elvisbegovic pointed me in the direction of the solution.

To resolve the issue, simply include @Directive() in your abstract class(es). Here's an example:

import { Directive, Input } from '@angular/core';

@Directive()
export abstract class AbstractAComponent {
  @Input() myInput: string;
}

import { Directive } from '@angular/core';

@Directive()
export abstract class AbstractBComponent extends AbstractAComponent {}

Answer 3

Answer №2

Give this a shot: Within the AbstractAComponent class, I included the @Directive() decorator.

@Directive()
export abstract class AbstractAComponent {
   @Input() myInput: string;
}

Additionally, in the OneComponent class, I added super(); within the constructor. This adjustment proved successful for me.

export class OneComponent extends AbstractAComponent {
   constructor() {
       super();
   }
}

Answer 4

Give this a shot: Within the AbstractAComponent class, I included the @Directive() decorator.

@Directive()
export abstract class AbstractAComponent {
   @Input() myInput: string;
}

Additionally, in the OneComponent class, I added super(); within the constructor. This adjustment proved successful for me.

export class OneComponent extends AbstractAComponent {
   constructor() {
       super();
   }
}

Answer 5

Answer №3

When working with Angular 17.x and input signals, the process is quite similar. You just need to utilize the component decorator within your abstract class.

Let's take a look at the abstract class:

@Component({template: ``,})
export abstract class AbstractEntitiesListComponent<T> {
  data = input.required<T[]>();
  messages = input<MessageInterface[]>([]);
  isLoading = input<boolean>(false);
  noData = input<boolean>(false);
  header = input<string | undefined>(undefined);  
  readonly columns!: Array<[keyof T, string]>;

  protected abstract getColumns(): Array<[keyof T, string]>;

  constructor() {     
    this.columns = this.getColumns();
  }
}

And here's an example of an inheriting class:

@Component({
  ...
  template: `
      <common-basic-table [columns]="columns" [data]="data()"></common-basic-table>
  `,  
  ...
})
export class ProductsComponent extends AbstractEntitiesListComponent<ProductInterface>{  
  
  protected getColumns(): Array<[keyof ProductInterface, string]> {
    return [
      ['name', 'Name'],
      ['category', 'Category'],
      ['description', 'Description'],
      ['inventoryStatus', 'Status'],
      ['code', 'Code'],
      ['price', 'Price'],
      ['quantity', 'Quantity'],
      ['rating', 'Rating'],
    ];
  }
}

Answer 6

When working with Angular 17.x and input signals, the process is quite similar. You just need to utilize the component decorator within your abstract class.

Let's take a look at the abstract class:

@Component({template: ``,})
export abstract class AbstractEntitiesListComponent<T> {
  data = input.required<T[]>();
  messages = input<MessageInterface[]>([]);
  isLoading = input<boolean>(false);
  noData = input<boolean>(false);
  header = input<string | undefined>(undefined);  
  readonly columns!: Array<[keyof T, string]>;

  protected abstract getColumns(): Array<[keyof T, string]>;

  constructor() {     
    this.columns = this.getColumns();
  }
}

And here's an example of an inheriting class:

@Component({
  ...
  template: `
      <common-basic-table [columns]="columns" [data]="data()"></common-basic-table>
  `,  
  ...
})
export class ProductsComponent extends AbstractEntitiesListComponent<ProductInterface>{  
  
  protected getColumns(): Array<[keyof ProductInterface, string]> {
    return [
      ['name', 'Name'],
      ['category', 'Category'],
      ['description', 'Description'],
      ['inventoryStatus', 'Status'],
      ['code', 'Code'],
      ['price', 'Price'],
      ['quantity', 'Quantity'],
      ['rating', 'Rating'],
    ];
  }
}

Unable to connect input with abstract classes at a hierarchy depth of 2 levels or more

Answer №1

Answer №2

Answer №3

Similar questions

Iterate through each item in an object using Angular

Deliver a locally defined variable from a template to the parent component

What is the optimal method for defining a JSON serialization format for a TypeScript class?

React dynamic table

An issue occurred during the compilation of an Angular6 project

Declare the push method within the Countly.q array in a TypeScript declaration file

Unable to attach a tooltip to a list item

The Typescript Module augmentation seems to be malfunctioning as it is throwing an error stating that the property 'main' is not found on the type 'PaletteColorOptions'

Automatic browser refresh with the `bun dev` command

Error during Ng 16 upgrade - npm ERR! Peer dependency conflict found: @angular/[email protected]

The Angular tutorial for the "Tour of Heroes" is experiencing issues with aligning the heroes' list properly

The color syntax in the text editor of Visual Studio 2022 is being lost when casting an interface

Exploring the method of retrieving nested JSON objects in Angular

It is not possible to transform Next.js into a Progressive Web App (P

Tips for effectively utilizing URLSearchParams in Angular 5 HttpClient's "get" function

Achieving the highest ranking for Kendo chart series item labels

AWS Alert: Mismatch in parameter type and schema type detected (Service: DynamoDb, Status Code: 400)

Generate an instance containing attributes that correspond to constant string values within a class

Manipulating the DOM within an Angular application

In order to conceal the div tag once the animation concludes, I seek to implement React