Deciding whether to subscribe to an observable in the constructor or ngOnInit method in Angular

Question

Deciding whether to subscribe to an observable in the constructor or ngOnInit method in Angular

While I understand that this question has been asked numerous times on SO and other websites, I find myself getting confused by the varying answers.

2 INQUIRIES -

Should I subscribe to my component in the constructor() or NgOnInit()?
Is it necessary to use a pipe when subscribing to an Observable for Angular to handle the destruction, or can I avoid using ngOnDestroy? I'm puzzled by the presence of pipes after subscribing.

Let me illustrate how I am implementing one of my services; specifically, in my navbar component where I subscribe to changes in window size from a service.

In the constructor, I have implemented the following code:

this.responsiveService.getMobileStatus()
  .subscribe(mobileStatus => {
    this.isMobile = mobileStatus.status;
    if (mobileStatus.width < 568) {
      this.inputPlaceholder = this.placeholderWithSearch;
    } else {
      this.inputPlaceholder = this.placeholderWithoutSearch;
    }
  });

angular typescript observable ngoninit

Answer 1

Answer №1

Utilizing the ngOnInit method for subscribing is a recommended practice because @Input bindings are not initialized until this lifecycle hook, making them unavailable in the constructor. Observable objects often rely on these values, so it's crucial to subscribe at the right time. Even if there are no dependencies, maintaining consistency by always placing subscriptions in the same location is a good habit.
It's advisable to use the async pipe whenever possible to prevent manual subscription management. However, there are situations where manual subscription management is necessary or reasonable.

Answer 2

Utilizing the ngOnInit method for subscribing is a recommended practice because @Input bindings are not initialized until this lifecycle hook, making them unavailable in the constructor. Observable objects often rely on these values, so it's crucial to subscribe at the right time. Even if there are no dependencies, maintaining consistency by always placing subscriptions in the same location is a good habit.
It's advisable to use the async pipe whenever possible to prevent manual subscription management. However, there are situations where manual subscription management is necessary or reasonable.

Answer 3

Answer №2

In my opinion, it is preferable to utilize the async pipe and allow angular to manage the unsubscribing process. This approach leads to cleaner code;

Let's examine a scenario where subscription happens in the constructor

export class MyClassComponent implements OnInit, OnDestroy {
  sub: any;
  componentName: any;
  constructor(private navbarService: NavbarService) {
  }
  ngOnInit() {
    this.sub = this.navbarService.getComponentNameObv()
    .subscribe(componentName => {
      this.componentName = componentName;
    });
  }
  ngOnDestroy() {
    this.sub.unsubscribe()
  }
}

By incorporating an async pipe, we can refactor the code as follows:

export class MyClassComponent {
  componentName$ = this.navbarService.getComponentNameObv();
  mobileStatus$ = this.responsiveService.getMobileStatus().pipe(
    tap(mobileStatus => {
      this.isMobile = mobileStatus.status;
      if (mobileStatus.width < 568) {
        this.inputPlaceholder = this.placeholderWithSearch;
      } else {
        this.inputPlaceholder = this.placeholderWithoutSearch;
      }
    })
  )
  constructor(private navbarService: NavbarService) {
  }
}

This revised code is not only more concise but also easier to test

Answer 4

In my opinion, it is preferable to utilize the async pipe and allow angular to manage the unsubscribing process. This approach leads to cleaner code;

Let's examine a scenario where subscription happens in the constructor

export class MyClassComponent implements OnInit, OnDestroy {
  sub: any;
  componentName: any;
  constructor(private navbarService: NavbarService) {
  }
  ngOnInit() {
    this.sub = this.navbarService.getComponentNameObv()
    .subscribe(componentName => {
      this.componentName = componentName;
    });
  }
  ngOnDestroy() {
    this.sub.unsubscribe()
  }
}

By incorporating an async pipe, we can refactor the code as follows:

export class MyClassComponent {
  componentName$ = this.navbarService.getComponentNameObv();
  mobileStatus$ = this.responsiveService.getMobileStatus().pipe(
    tap(mobileStatus => {
      this.isMobile = mobileStatus.status;
      if (mobileStatus.width < 568) {
        this.inputPlaceholder = this.placeholderWithSearch;
      } else {
        this.inputPlaceholder = this.placeholderWithoutSearch;
      }
    })
  )
  constructor(private navbarService: NavbarService) {
  }
}

This revised code is not only more concise but also easier to test

Deciding whether to subscribe to an observable in the constructor or ngOnInit method in Angular

Answer №1

Answer №2

Similar questions

Using TypeScript syntax to define types; utilizing the export default keyword to incorporate an external JavaScript library within an Angular2

Unable to set up Typescript: The package v1.2.3 cannot meet the peerDependency requirements of its siblings

Leveraging Expose in combination with class-transformer

Challenges with Nested Reactive Form in Angular 4

Angular 2 Form Error: Control Not Found

Using Angular 2 to Pass Parameters to a Custom Validator

The tap() function does not activate in an RXJS Pipe

Make sure to invoke the initialize function either in the ngOnInit lifecycle hook or

Communication between parents and children is crucial for building strong relationships and providing validation

Instructions on how to post an array by its ID when the value changes in the form, correspond with the ID

Issues with Plotly.js functionality arise following the update to Angular 13

How can resolvers in GraphQL optimize data fetching based on necessity?

A guide on activating the <b-overlay> component when a child triggers an Axios request in vue.js

"Personalized labels for enhancing user insights on Microsoft Clarity

The ts-loader, antd, and typescript trio hits a stumbling block with the module index.less nowhere to

Triggering a subsequent action in Ngrx depending on the data from the initial action

Dealing with Angular routes in Express: Solving the issue of "res.sendFile is not a function"

Capture data from a Telegram bot and store it in a Google Sheet

Restricting a checkbox to a maximum of 5 checkmarks

The class 'AngularFireList<{}>' cannot be assigned to the type 'FirebaseListObservable<any>'