Is it possible to utilize the Angular selector twice while only initializing the component once?

Question

Is it possible to utilize the Angular selector twice while only initializing the component once?

HTML

 <exchange></exchange>
 <exchange></exchange>

TS

        @Component({
          selector: 'exchange',
          templateUrl: 'exchange.component.html',

        })
        export class ExchangeComponent implements OnInit {
           ngOnInit() {
              interval(10000).subscribe(x => {
              console.log(x)});
           }
        }

In this scenario, the component is called twice but I only want the interval to run once every 10 seconds instead of twice. How can I achieve this without triggering the interval multiple times?

angular typescript

Answer 1

Answer №1

Perhaps consider a straightforward solution like the following:

Create a variable in a service file that triggers an action based on its value.

shouldSubscribe: boolean = false;

In your component.ts:

ngOnInit() {
 if(!this.someService.shouldSubscribe) {
    interval(10000).subscribe(x => {console.log(x)});
 } else {
    this.someService.shouldSubscribe = true;
 }     
}

An alternate method is to pass a property to specific instances of your component and use it as a condition:

<exchange [shouldSubscribe]="true"></exchange>
<exchange></exchange>

In component.ts:

@Input() shouldSubscribe: boolean;

And within the lifecycle hook:

if(this.shouldSubscribe) {
// do what is needed
}

Your query mentioned preventing the component from reinitializing, which cannot be avoided (By skipping ngOnInit, it will still execute due to being a lifecycle hook).

Answer 2

Perhaps consider a straightforward solution like the following:

Create a variable in a service file that triggers an action based on its value.

shouldSubscribe: boolean = false;

In your component.ts:

ngOnInit() {
 if(!this.someService.shouldSubscribe) {
    interval(10000).subscribe(x => {console.log(x)});
 } else {
    this.someService.shouldSubscribe = true;
 }     
}

An alternate method is to pass a property to specific instances of your component and use it as a condition:

<exchange [shouldSubscribe]="true"></exchange>
<exchange></exchange>

In component.ts:

@Input() shouldSubscribe: boolean;

And within the lifecycle hook:

if(this.shouldSubscribe) {
// do what is needed
}

Your query mentioned preventing the component from reinitializing, which cannot be avoided (By skipping ngOnInit, it will still execute due to being a lifecycle hook).

Is it possible to utilize the Angular selector twice while only initializing the component once?

Answer №1

Similar questions

Attempting to integrate Bootstrap 5 accordion into Angular 17 using ngFor has posed a challenge for me

Is having only one FCM token sufficient for storing data from multiple devices?

Trying out cellRenderer in Angular's Ag Grid with Jest to validate values

Utilizing TypeScript for parameter typing in React Router's URLs

Glitch causing incorrect images to appear while scrolling through FlashList

Submitting the object in the correct format for the Firebase database

Unable to connect with API data in Angular 6

What could be the reason for TypeScript inferring the generic type as an empty string?

Issue with triggering Observable during an Angular 2 HTTP call

I encountered TS2300 error stating a duplicate identifier appeared once I transferred my code to Angular CLI

Is there a way to delegate properties in Angular 2+ similar to React?

Transforming an array of JavaScript objects into arrays of key-value pairs based on a specific property with ES6 syntax

"Angular throws an error code NG5002 when encountering an invalid ICU message along with an unexpected

What is the best approach for arranging numbers in descending order?

`Two side-by-side nvd3 visualizations`

Challenge with Google Maps Data Layer

Cannot upload the same file to both Spring and Angular twice

Having constant problems with ngModel twoway binding. Any suggestions on how to successfully bind to a property in order to update an api link?

Angular2 - Leveraging data to dynamically control radio buttons

Issue encountered with combineLatest following upgrade of rxjs from version 6.x to 7.x