I'm calling the Flickr API from a service method. Flickr expects a global function expression to be available called jsonFlickrFeed, which I've placed in my app root index.html file immediately after the root component and before the closing body tag. I need to pass the response from the Vanilla JS callback back to the originating service.
It reaches the callback fine, but I'm really struggling to find any information how to get back to the service that's specifically relevant to Angular 5.
Here's my service
import {Injectable} from '#angular/core';
import {HttpClient} from '#angular/common/http';
import 'rxjs/add/operator/map';
import * as validResponse from './mock/valid.json';
import {FlickrItem} from "./flickr-item";
import {FlickrResponse} from "./flickr-response";
#Injectable()
export class FlickrService {
private url: string = 'https://api.flickr.com/services/feeds/photos_public.gne?format=json';
private items: FlickrItem[];
private response: FlickrResponse;
constructor(private http: HttpClient) { }
getValid() {
// Return mock response
// For development / debug use only
// return validResponse;
this.http.jsonp(this.url, 'jsonFlickrFeed').subscribe();
};
}
As said here: Communication between angular 2 and pure javascript
You can define the callback inside the service using window:
#Injectable()
export class FlickrService {
...
constructor(...) {
window.jsonFlickrFeed = data => {
// do something
}
}
}
Related
I am trying to use a communication service to send some data between different angular components. But I am facing an issue when the child component is opened inside a pop-up window. Since it is a separate angular app itself. So it's taking a different instance of the service and thus I am unable to send data.
This is my communication Service.
import { Injectable } from "#angular/core";
import { Subject } from "rxjs";
#Injectable()
export class CommunicatingService {
private subject = new Subject<any>();
sub = this.subject.asObservable()
constructor() {}
nextSub(data: any) {
this.subject.next(data)
}
}
I need to call a service on a component, and ideally this service would fetch info in another 2 or 3 components (which already are communicated with the database, etc). I need to be able to share objects.
I've created a service called DashService, like this:
import { Injectable } from '#angular/core';
#Injectable({
providedIn: 'root',
})
export class DashService {
constructor() { }
}
I've linked it to the component that will us it, and I also imported and added the service name in the 'providers' part of the NgModule.
Added:
Import { OnInit } from '#angular/core';
and
implements OnInit{...}
on the module that will send info to the service.
I dont know how to go forward. How can I share an object that exists on a component, to my service? I fail to set the Constructor correctly (on the component sending the info)
When I try
public constructor( private DashService: DashService)
I get an error telling me 'DashService refers to a value but is being used as a type'
Thank you for your help.
Because you are calling the service as the type of the service!
Just change the name, usually the first letter of the service is in lowercase
public constructor( private dashService: DashService)
https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service
here you can find an example how to communicate between components.In general for parent/child components you can use #Input / #Output decorator.
For others case you can use a service ( or a any state management)
Riccardo Gai is right, you should do that to use a service,
public constructor( private dashService: DashService)
But to answer your question, in order to be able to share data between components through a service, you should create an object in that service, for example a public object, then you can access that object through the service.
import { Injectable } from '#angular/core';
#Injectable({
providedIn: 'root',
})
export class DashService {
objectToShareHere: any;
constructor() { }
}
I think anyway, the best way of this to work is to have get and set methods and access the object through them (having a private obj). Like this:
import { Injectable } from '#angular/core';
#Injectable({
providedIn: 'root',
})
export class DashService {
private objectToShareHere: any;
constructor() { }
setPrivateObj(obj) {
this.objectToShareHere = obj;
}
getPrivateObj() {
return this.objectToShareHere;
}
}
If the data you need to share is from a BE, you can use a Subject object (see RxJs subject here)
I'm trying to make two angular components and I want to call a function from the first component in the second component. When I try this I get following error message: Cannot red property 'functionName' of undefined. How can this be solved?
Here a link of an example: https://stackblitz.com/edit/angular-rre4gb
That's because the component you want to call its function, is not instantiated.
for component communication you can use a service instead:
Service
#Injectable()
export class MyService {
myCustomFunction(){
}
}
Component
in your component:
#Component({
selector: 'my-component',
providers: [ MyService ]
})
export class MyComponent {
// inject your service to make it available
constructor(private service: MyService){}
doStuff(){
// call function which is located in your service
this.service.myCustomFunction();
}
}
As others have stated, I would prefer a shared service with a Subject among these components.
service:
#Injectable()
export class SharedService {
mySubject = new Subject();
}
WorldComponent (subscriber):
export class WorldComponent {
constructor(private sharedService: SharedService){
this.sharedService.mySubject.subscribe((data)=>{
this.worldFunction();
})
}
HelloComponent(publisher):
public helloFunction() {
alert('Hello');
this.sharedService.mySubject.next(true);
}
You can find the updated example here: https://stackblitz.com/edit/angular-rnvmkq?file=app%2Fworld.component.ts
The best way to share information between multiple components is generally through a service.
Create a separate file: file.service.ts
Provide the service in the app.module.ts file
Inject the service into each component. Then you'll have access to the variables in both components
See this: https://angular.io/tutorial/toh-pt4
the reason of the error is that the hello component is not imported, but instead of calling a component from another, you should use a service in between, as other answers already suggested.
What I'm trying to do is create a service that uses a model to show an alert. The alert-model should be necessary nowhere else but in that service but I am not able to make this work. My service:
import {Injectable, Inject} from "angular2/core";
import {AlertModel} from "../models/alert.model";
#Injectable()
export class AlertService {
constructor(#Inject(AlertModel) alertModel: AlertModel) {
}
public alert(){
this.alertModel.message = 'success';
//...
}
}
But I keep getting this error:
Uncaught (in promise): No provider for AlertModel! (UserComponent -> AlertService -> AlertModel)
I'm new to angular and I do not understand this. What am I missing? Thanks in advance!
You need to provide the AlertModel somewhere
bootstrap(AppComponent, [AlertModel])
or in the root component (preferred):
#Component({
selector: 'my-app',
providers: [AlertModel],
...
})
Ensure AlertModel has the #Injectable() decorator and all its constructor parameters are provided as well (if it has any)
#Inject(AlertModel) is redundant if the type of the constructor parameter is already AlertModel. #Inject() is only necessary if the type differs or if AlertModel doesn't have the #Injectable() decorator.
constructor(#Inject(AlertModel) alertModel: AlertModel) {
You have this error since there is no provider for the AlertModel class visible from the UserComponent component (that calls the service). You can define either this class in the providers attribute of the component either when bootstrapping your application.
See the question to know more about how hierarchical injectors works and how to inject things into services:
What's the best way to inject one service into another in angular 2 (Beta)?
Since the AlertModel class seems to be a model class I don't think that you need to inject it. You can simply import the class and instantiate it:
#Injectable()
export class AlertService {
alertModel: AlertModel = new AlertModel();
public alert(){
this.alertModel.message = 'success';
//...
}
}
I am trying to inject a self created service & the angular2 Http service into my custom HttpRest service.
using
#Inject(Http) public _http: Http
worked fine, but when I try to inject another self made service i get following Error:
EXCEPTION: Cannot resolve all parameters for 'HttpRest'(Http #Inject(Http), undefined #Inject(undefined)). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'HttpRest' is decorated with Injectable.
For some reason
UserIds is undefined, even though the import is succesful.
My custom service:
#Injectable()
export class UserIds{
private _signature_id:string;
private _role_id:number;
get signature_id():string{
return this._signature_id;
}
set signature_id(id:string){
this._signature_id = id;
}
get role_id():number{
return this._role_id;
}
set role_id(id:number){
this._role_id = id;
}
}
The Custom HttpRest service im injecting both Http & UserIds into:
#Injectable()
export class HttpRest{
groups;
constructor(
#Inject(Http) public _http: Http,
#Inject(UserIds) public _ids: UserIds
){}
...
}
NOTE! when I remove
,
#Inject(UserIds) public _ids: UserIds
I dont get the Error.
What am I missing ?
UPDATE
The problem is actually that UserIds is undefined in the constructor params for some unknown reason that im trying to understand, so the title of this question becomes irrelevant. It should be "Imported service is undefined in constructors params".
Please reffer to my answer on this question further down this post.
UPDATE:
Please reffer to a question that discusses this issue.
Using index.ts file to export class causes undefined in injected constructor
#Inject(...) in #Inject(Http) public _http: Http is redundant when the parameter to #Inject() is the same as the type of the parameter.
#Injectable()
export class HttpRest{
groups;
constructor(public _http: Http, public _ids: UserIds
){}
...
}
You need to provide Http and UserIds so DI is able to resolve the dependency. Http is included in HTTP_PROVIDERS
#Component({
selector: '...',
providers: [HTTP_PROVIDERS, UserIds],
template: ...
})
export class AppComponent {
}
Ensure you have everything imported correctly
import {HTTP_PROVIDERS, Http} from 'angular2/http';
Ok so I found the problem, and it has not to do with Inject.
The problem was that im using an index file to export services, as mentioned in the angular 2 style guide (https://github.com/mgechev/angular2-style-guide/blob/master/old/README.md#directory-structure), and for some reason importing this specific service from the index causes an undefined value when injected into the constructor.
When I reffernced the source directly and not trough the index file, for some reason that is unknown to, resolved the Error.
The import before the fix looked like this:
import {UserIds} from "../index";
Which worked with all other services and components.
The import using the direct source file:
import {UserIds} from "../user_ids/user_ids.service";
For some reason this solved my problem, but i want to stay consistent with the index.ts encapsulation.
If anyone has an idea why this could happen I'll be happy for updates.
You need to register your UserIds service at the root level (main.ts) or in the app.component.ts, which is the highest level in the hierarchy:
#Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>',
providers: [ UserIds ]
})
export class AppComponent { }