How to initialize Angular service, custom class from component?

Question

My application has bootstrapped component as MapComponent. Also there is a core class MapCore that contains all domain logic:

class MapCore {
   constructor(props: Props) {
       // Config here
   }
}

This core class should be shared across whole Angular application. So I can make it injectable and register in root.

I need to configure this class manually from component like, therefore I use it like:

@Component({
  selector: 'map-root',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})
export class MapComponent {
    @Input() props: Props;
    @Input() center: Center;
    ngOnInit() {
         this.map = new MapCore(this.props);
    }
}

I need that because when I get result a custom element I can pass parameters to tag for configuration a map:

<map-root center="56,90" props="props">

My question is, how to configurate service in my case it is new MapCore custom class from component and share across application?

Could you share your expirience how to solve this issue?

Does [this](https://angular.io/guide/dependency-injection) help? — , Mar 03 '21 at 09:04
Nope, because if I use providedIn: root it creates an instance `new MapCore` without properties outside. So user can not configurate a map himself — , Mar 03 '21 at 09:15
Soo.. something like [this](https://stackoverflow.com/a/40562527/13258211)? Iam unsure what exactly your intention is here — , Mar 03 '21 at 09:19
I dont ensure, in this case I need get input component parameters then add them to config provider and then call map class with this provider. The same situation as I have now — , Mar 03 '21 at 10:00
Are you bundling the angular app in which the custom elements are defined and using(by including .js file in the script tag) that bundle in another application to use custom elements? — Programmer, Mar 04 '21 at 05:52

score 1 · Accepted Answer · answered Mar 03 '21 at 09:15

1

I think you can do that easily using @Injectable. To do this you can update you class named MapCore like below

import { Injectable } from '@angular/core';

 @Injectable({
      providedIn: 'root'
    })
    class MapCore {
       constructor(props: Props) {
           // Config here
       }
    }

It will available your class across whole Angular application and you can using it like below from any component=>

export class YourComponent {
  constructor(private mapCore : MapCore ){}
}

answered Mar 03 '21 at 09:15

Srijon Chakraborty

2,007
2
7
20

Problem is that injectable create a instance of class already without properties like new `MapCore()`. But I need to pass config object outside from components inputs. So injectable I need but not for initialization. Only for sharing across app – Mar 03 '21 at 09:17
So, map should be configurable outside from component, from Custom Anguler element(component) – Mar 03 '21 at 09:18
1

@Jessy In which `class` you need to pass config? – Srijon Chakraborty Mar 03 '21 at 09:19
Inside core class: `new MapCore(this.props);` for full initialization – Mar 03 '21 at 09:20
In you case the map will be loaded without any configuration. So I get result instance `new MapCore` without users configuration(props outside); – Mar 03 '21 at 09:22
OK I get it. Let me check. – Srijon Chakraborty Mar 03 '21 at 09:22
@Jessy I am not sure but can you declare a `static` variable in `MapCore ` class and change `ngOnInit() { this.map = new MapCore(); MapCore.props=this.props; }`. Then `this.props; `can be used across the project. – Srijon Chakraborty Mar 03 '21 at 09:33
Yes, I can create additional method that add configuration like: `this.map = new MapCore()`. Then `this.map.config = this.props`; Problem is that map already is loaded with `new MapCore()` So I can not reload map with a new props – Mar 03 '21 at 09:54
How do you integrate Angular apps in anoter apps with users configuration? – Mar 03 '21 at 11:14
Jessy, Making the MyCore as injectable and exposing a RxJS subject from it that will emit values from your component(do subject.next from component) when input props are provided. Subscribe to that subject in the application wherever the config is required. Does this make sense? – Programmer Mar 03 '21 at 13:10
Yes, but a bit dirty. Usually to use something we initialize a core (entry) object. `new Map(params)`; Then we can use it. In Angular my entry point it is root bootstrapped component that can acceps Input() parameters. And inside initialize new CoreMap() domain logic. I think it is not good when Core depends from component. – Mar 03 '21 at 13:13
How do you integrate yours apps Angular to another ? With configuratio – Mar 03 '21 at 14:10

How to initialize Angular service, custom class from component?

1 Answers1