CODEWITHSUNDEEP
angulartypescriptangular-directiveangular-servicesangular-httpclient
pop
pop

Reputation: 3724

Using directive with different services in Angular

I must be approaching this from a false perspective, but here is the problem. I have an async validation directive which uses HttpClient to validate something with the backend. It is almost independent apart from one critical thing – it needs correct HTTP headers to pass authentication on the server side. This is how the constructor looks:

constructor( 
    private http: HttpClient,
    private auth: AuthService,
    @Optional() @Self() @Inject(NG_VALUE_ACCESSOR) valueAccessors: ControlValueAccessor[]
) { 
    this.valueAccessor = valueAccessors.find( x => x.constructor === DataTextInputComponent) as DataTextInputComponent;
}

This one auth service has the correct headers, which will then be used with the request.

I have recently split my project into libs and apps with Nx and want to use this directive in a different context, where the headers and the request url are different. How do I achieve this?

Upvotes: 0

Views: 170

Answers (1)

Angular Dev
Angular Dev

Reputation: 4916

Now I understand your problem, I can confidently recommend you to use http interceptors. Those will essentially act as middleware and will modify the request before the call is done. You can provide interceptors on module level, which will ensure you can have different interceptors per module.

This will also ensure you adhere to the single responsibility principle, as this directive can do the validation calls without worrying about setting the correct headers.

Here is an example of an http interceptors implementation in angular v5

Upvotes: 2

Related Questions