ANGULAR - Pass variable from Component to Service

Question

I've been looking at component interactions and passing values from one component to a service, but couldn't find something clear enough.

The premise is simple, I have a variable / value that's coming from an API, and I need that variable to be passed to a service component (which holds the GET request and URL where I need the value).

I was thinking of using EventEmitter, to emit my variable, but then the service doesn't have an HTML to subscribe to it.

Here are some code snippets:

app.component.ts

private data: any[] = [];

ngOnInit(): void {
    this.apiService.getData().subscribe(response => {
      this.data = response.data;
      
      console.log(this.data.id);
    });
  }

api.service.ts

@Injectable({
  providedIn: 'root',
})
export class PromptApiService {
  private readonly apiUrl = 'MY_API_URL;

/*I need the id variable from component to access here*/

  constructor(
    private http: HttpClient,
  ) {}

  getData(): Observable<> {
    return this.http.get<>(
      `${this.apiUrl}/mydata`,
    );
  }
}

I had to remove some of the code for privacy reasons, as this is for a work project, so apologies if the code is minimal.

What would the best aproach be to pass the variable from component to service? Any suggestions would be greatly appreciated.

Does this answer your question? Angular passing a variable from a component to a service — Bozhinovski
– Bozhinovski, Commented Feb 1, 2023 at 12:01
I think it sort of does answer my question, but same as the solution before, the variable I set in the service.ts file gets an IDE error that it's declared but never read. — Traznix
– Traznix, Commented Feb 1, 2023 at 12:28
That is not an error, that is warning message, also you need to assign the variably into the method itself. — Bozhinovski
– Bozhinovski, Commented Feb 1, 2023 at 12:34

nate-kumar · Accepted Answer · 2023-02-01 11:56:29Z

1

You can just move your data variable to your service and then use that in your component(s) by making your service public

api.service.ts

@Injectable({
  providedIn: 'root',
})
export class PromptApiService {
  private readonly apiUrl = 'MY_API_URL';
  public data: any[] = [];

  constructor(private http: HttpClient) {}

  getData(): Observable<> {
    return this.http.get<>(`${this.apiUrl}/mydata`);
  }
}

app.component.ts

export class AppComponent {
  constructor(public promptApiService: PromptApiService)

  ngOnInit(): void {
    this.promptApiService.getData().subscribe(response => {
      this.promptApiService.data = response.data;
    });
  }
}

app.component.html

<div *ngIf="promptApiService.data">
  <p>{{ promptApiService.data.id }}</p>
</div>

Note: This assumes you are using the default change detection method and not OnPush

answered Feb 1, 2023 at 11:56

nate-kumar

1,7712 gold badges12 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Miguel · Accepted Answer · 2023-02-01 12:01:44Z

1

This kind of things can be a bit difficult when you are starting.

To pass a variable from a component to a service, you have a simple solution:

Inside the service api.service.ts you can create the variable at the top and the setter:

@Injectable({
  providedIn: 'root',
})
export class PromptApiService {
  private myVariable:string;  // THIS LINE

  private readonly apiUrl = 'MY_API_URL';

  constructor(
    private http: HttpClient,
  ) {}

  setMyVariable(myVariable:string):void {  // THIS FUNCTION
    this.myVariable=myVariable;
  }

  getData(): Observable<> {
    ...
  }
}

Inside app.component.ts you instance the service in the constructor and use the setter:

constructor( private apiSvc: PromptApiService ) {}   // THIS LINE

ngOnInit(): void {
   this.apiSvc.setMyVariable("HELLO");   // THIS LINE
}

edited Feb 1, 2023 at 12:01

answered Feb 1, 2023 at 11:54

Miguel

3832 silver badges6 bronze badges

1 Comment

Traznix Over a year ago

This looks pretty straight forward, however I'm getting an error in the IDE that the variable is declared but never read - in the service.ts file

Collectives™ on Stack Overflow

ANGULAR - Pass variable from Component to Service

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related