Using a variable within an Angular 2 Component provider

Question

Using a variable within an Angular 2 Component provider

Is it possible for a component to offer a service based on its inputs? In my situation, my component relies on a service provided by another firebase service, and I am looking to have the component create a new firebase service with a child element, allowing the other service to only access this specific part of the database.

Currently, my solution involves the component calling the service's setChild function to specify the child element. However, I am interested in exploring if it is feasible to achieve this in the manner described above.

Thank you, Tamas

angular typescript

Answer 1

Answer №1

Unfortunately, it is not possible to access the component instance when evaluating decorator arguments.

However, a workaround is to inject the service into the component where it is included in the providers and pass the value to the service. This way, when a child component also injects the same service, they will share the same value:

@Injectable()
class MyService {
  ... 
}

@Component({
  selector: 'parent',
  template: 'x'
  providers: [MyService],
)}
class Parent {
  @Input() someInput;

  constructor(private myService:MyService) {
  }

  ngOnChanges() {
    this.myService.sharedValue = this.someInput;
  }
}

@Component({
  selector: 'descendant',
  template: 'x'
)}
class Descendant {
  constructor(myService:MyService) {
    myService.sharedValueChange.subscribe(val => {
      console.log(val);
    });
  }
}

For more information on creating a shared service using Observable to notify about changes, you can visit Delegation: EventEmitter or Observable in Angular2

Answer 2

Unfortunately, it is not possible to access the component instance when evaluating decorator arguments.

However, a workaround is to inject the service into the component where it is included in the providers and pass the value to the service. This way, when a child component also injects the same service, they will share the same value:

@Injectable()
class MyService {
  ... 
}

@Component({
  selector: 'parent',
  template: 'x'
  providers: [MyService],
)}
class Parent {
  @Input() someInput;

  constructor(private myService:MyService) {
  }

  ngOnChanges() {
    this.myService.sharedValue = this.someInput;
  }
}

@Component({
  selector: 'descendant',
  template: 'x'
)}
class Descendant {
  constructor(myService:MyService) {
    myService.sharedValueChange.subscribe(val => {
      console.log(val);
    });
  }
}

For more information on creating a shared service using Observable to notify about changes, you can visit Delegation: EventEmitter or Observable in Angular2

Using a variable within an Angular 2 Component provider

Answer №1

Similar questions

Rearrange an element in an array from last to first position using typescript

Encountering a Problem with vue-check-view Library in Typescript

The parent route guard in Angular triggers an infinite loop when navigating to a child route from the parent route

How come Angular sets the empty value of a number input to null?

Converting a dynamic JSON object into a generic type in TypeScript

Error handling in Angular 6/Express: Route malfunction

How can a TypeScript function be used to retrieve a string (or JSON object)?

What is the best way to add a search bar for filtering a table efficiently?

The formControl value is not being shown on the display

Utilize the ref attribute when working with Material UI InputLabel components

Optimizing an ASP.NET web application for seamless integration with Angular 2 and TypeScript

Inject variables into [ngModel] in Angular version 2

Get the HTML content from a component that has been imported

Mastering unit testing with Behaviour Subjects in Angular

Sending data to Dialog Component

The Angular component exported from one module cannot be utilized in a different module

Using react-scripts leads TypeScript to mistakenly search for the incorrect file to import

How to utilize *ngFor alongside the async pipe for conditional rendering in Angular 8 HTML

Rendering HTML content in a preformatted <code> tag using Electron

Issue with page reload in Angular 8 when URL contains a dot