When transitioning to angular 10 and removing decorators from classes, what is the best approach for dealing with a base class that is inherited by both Directives and Injectables?

During the angular 10 migration process, there is a recommendation that classes utilizing angular features should have a decorator. However, what should be done in cases where it's a base class shared by both Injectables and Directives (as it solely implements OnDestroy)? Is it acceptable to use @Directive and @Injectable on the same class, or would it be better to split the class into two separate entities - one to be inherited by directives, and another by injectables?

Although it seems to compile without issues with the following structure, is this approach problematic:

@Injectable()
@Directive()
// tslint:disable-next-line:directive-class-suffix
export class SomeBaseClass implements OnDestroy

Useful links for reference:

Answer №1

According to the information provided on this documentation page:

It is worth noting that classes that are already adorned with @Pipe, @Component or @Directive do not require both decorators. The existing class decorator effectively instructs the compiler to generate the necessary information.

Base classes for injectables do not need any additional annotations. However, it is important to remember that injectables do not possess the same lifecycle hooks as directives and components. For a practical example, refer to this demonstration

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for generating a hyperlink in a Typescript file using Angular version 16 and above

I am encountering an issue with my consts.ts file in the project. Specifically, I have defined a constant LINK1 as <a href='https://sample.com/'>LINK 1</a>; However, this setup is not working as expected. What I actually want is to d ...

Awaiting server token before executing HttpInterceptor in Angular 2+

I understand that a similar question may have been asked before, but after going through all the available resources, I am still unable to find a solution to my problem. My issue lies in the fact that HttpIntercept.intercept needs to return next.handle(re ...

Using TypeScript or JavaScript, set object keys as fields of a class

I am looking for a way to update the properties of this class dynamically using an object export default class Foo { private accessKey: string; private workspaceId: string; private api: AxiosInstance; public bar: string; public name: s ...

Angular allows cross-origin requests with Access-Control-Allow-Origin

Hi, I am facing an issue with the update function in my app. Whenever I try to update, it shows me the following error message: Failed to load http:// localhost:8080/../update: Response to preflight request doesn't pass access control check: No &apo ...

How can one correctly cast or convert an array of objects to the interface that extends the objects' parent interface in Typescript?

Question: How can I optimize the usage of method sendItemIdsOverBroadcastChannel to reduce message size? interface IItemId { id: number; classId: number; } interface IItem extends IItemId { longString: string; anotherLongString: string } inte ...

Guide to automatically dismiss calendar popup after selecting a date

After selecting a date, how can I hide the calendar? I am currently utilizing Date-time-picker by DanyelYKPan. Is there a specific function that I should be using? Here is the code snippet: <div class="col-3"> <div class="form-group calenderF ...

How can I incorporate a child component into a separate component within Angular version 14?

Currently working with Angular 14 and facing a challenge with including a child component from another module into a standalone component. The structure of the standalone component is as follows: <div> <child-component></child-component& ...

Introducing a new element in TypeScript using a separate method with parameters

Currently, I am attempting to create a method that will allow me to add an element to my array. Despite being new to typescript, I have been struggling to determine what needs to go into the addNewProduct function. While seeking help, I came across the p ...

The TS2339 error has occurred because the "email" property cannot be found on the specified "Object" type

I encountered an issue while using Angular 5, here is the code snippet : signIn(provider) { this._auth.login(provider).subscribe( (data) => { console.log(data); this.hideForm = false; this.emaill = data.email; ...

bsDatepicker restricts the selection of dates after the endDate

I'm attempting to set the minDate for endDate inputs to be one day after startDate's value. Can anyone spot what I'm doing wrong? Check out stackblitz .ts this.minendDate.setDate(this.minendDate.getDate() + 1); this.maxendDate.setDate(this ...

Do ES6 features get transpiled into ES5 when utilized in TypeScript?

After implementing ES6 features such as template strings, arrow functions, and destructuring in a TypeScript file, I compile the code to regular JavaScript... Does the TypeScript compiler also compile the ES6 syntax, or do I need to utilize another compil ...

"Authentication guard does not sit idle while waiting for the observable

My issue involves the auth guard service constructor(private _auth: AuthService, private _router: Router) { } canActivate() { if(this._auth.isLoggedIn()){ return true; } else { this._router.navigate(['/login']); ret ...

Error: The AppModule encountered a NullInjectorError with resolve in a R3InjectorError

I encountered a strange error in my Angular project that seems to be related to the App Module. The error message does not provide a specific location in the code where it occurred. The exact error is as follows: ERROR Error: Uncaught (in promise): NullInj ...

Regular pattern with Kubernetes cluster endpoint utilizing either IP address or fully qualified domain name

In my Angular/typescript project, I am working on building a regex for a cluster endpoint that includes an IP address or hostname (FQDN) in a URL format. For instance: Example 1 - 10.210.163.246/k8s/clusters/c-m-vftt4j5q Example 2 - fg380g9-32-vip3-ocs.s ...

What is the best way to include a variable or literal as a value in styled components?

When it comes to managing various use cases, I always rely on props. However, I am currently facing a challenge in changing the border color of a styled input during its focus state. Is there a way to utilize props for this specific scenario? Despite my f ...

typescript: the modules with relational paths could not be located

As part of a migration process, I am currently converting code from JavaScript to TypeScript. In one of my files 'abc.ts', I need to import the 'xyz.css' file, which is located in the same directory. However, when I try to import it usi ...

Repetitive execution of Angular service function upon route change

In my Angular 8 project, there is a service function responsible for copying data. However, I encountered an issue where if I copy the data on a page, navigate to another page, and then return to the original page to copy the data again, it ends up duplica ...

Setting a date in Angular Material 2 without closing the mdMenu

I am trying to interact with Material 2's menu. Is there a way to select a menu item without closing the menu popup? Check out this link for more information. ...

When a card is clicked in the parent component, data is sent to the child component in Angular. The card contains an image, name, ID,

How can I pass data from a parent component (nfts) to a child component (main) when a card is clicked? The card contains images, ids, names, and more information. I've attempted using @Input() but haven't been able to receive the value in the ch ...

Mastering the Art of Promises in RXJS Observables

After thoroughly researching SO, I stumbled upon numerous questions and answers similar to mine. However, I suspect that there might be gaps in my fundamental understanding of how to effectively work with this technology stack. Currently, I am deeply enga ...