How to reuse getter method in Angular

Question

I have angular 8 application.

And I have a get method. But this method I want to use in several components.

So I made a service of the getter method. But then I get some errors.

So I have the getter method like this:

@Injectable({
  providedIn: 'root'
})
export class GetProfileImageUrl {
  profileImagefile: File;

  constructor(private sanitizer: DomSanitizer) {}

 get profileImageUrlDefault() {
    return this.profileImagefile === null
      ? '/assets/placeholder.jpg'
      : this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(this.profileImagefile));
  }
}

and the component looks like this, where I inject the method:

constructor(
  
    private getImageUrl: GetProfileImageUrl
  ) {}


 get profileImageUrl() {
    return this.getImageUrl.profileImageUrlDefault;
  }

and the template looks like this:

<img [src]="profileImageUrl" width="147px" />

But then I get this error:

core.js:5871 ERROR TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.
    at GetProfileImageUrl.get profileImageUrlDefault [as profileImageUrlDefault] (get-profile-image-url.ts:15)
    at ProfileInformationComponent.get profileImageUrl [as profileImageUrl] (profile-information.component.ts:86)
    at ProfileInformationComponent_Template (profile-information.component.html:3)
    at executeTemplate (core.js:11926)
    at refreshView (core.js:11773)
    at refreshComponent (core.js:13213)
    at refreshChildComponents (core.js:11504)
    at refreshView (core.js:11825)
    at refreshComponent (core.js:13213)
    at refreshChildComponents (core.js:11504)

So what I have to change?

Thank you

So the method is working if I define it directly in the component. But I want to reuse the method in several components.

So if I try it like this:

 profileImageUrlDefault() {
    return this.profileImagefile === null
      ? '/assets/placeholder.jpg'
      : this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(this.profileImagefile));
  }

and I call the method like this:

  get profileImageUrl() {
    return this.getImageUrl.profileImageUrlDefault;
  }

I get this error:

profileImageUrlDefault()%20%7B%20%20%20%20%20%20%20%20return%20this.profileImagefile%20===%20null%20%20%20%20%20%20%20%20%20%20%20%20:1 GET http://localhost:4200/profileImageUrlDefault()%20%7B%20%20%20%20%20%20%20%20return%20this.profileImagefile%20===%20null%20%20%20%20%20%20%20%20%20%20%20%20?%20%27/assets/placeholder.jpg%27%20%20%20%20%20%20%20%20%20%20%20%20:%20this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(this.profileImagefile));%20%20%20%20} 404 (Not Found)

Answer 1

Using a shared service is a good practice. well done. But I think your problem is in the way of calling the profileImageUrlDefault() function in your component. You should try this:

app.component.ts

 constructor(cprivate getImageUrl: GetProfileImageUrl) {}

 get profileImageUrl() {
    return this.getImageUrl.profileImageUrlDefault();
  }

Actually you missed () of your function call on return this.getImageUrl.profileImageUrlDefault statement.

Answer 2

So this is the soluition:

@Injectable({
  providedIn: 'root'
})
export class GetProfileImageUrl {
  compWindow: any;

  constructor(private sanitizer: DomSanitizer) {
    this.compWindow = window;
  }

  profileImageUrlDefault(profileImagefile: File) {
    return profileImagefile == null
      ? '/assets/placeholder.jpg'
      : this.sanitizer.bypassSecurityTrustUrl(this.compWindow.URL.createObjectURL(profileImagefile));
  }
}

and injecting in component:

  get profileImageUrl() {   
    return this.getImageUrl.profileImageUrlDefault(this.profileImagefile);
  }