Currently, I am developing a custom Angular component library that requires configuration with specific parameters when integrated into other Angular projects.
I have explored various methods for injecting data into Angular services. Here is an outline of the approach taken:
In the app.component.html file (from the Angular project where the custom library will be added), the following code snippet can be found:
<my-component paramA="abc" paramB="def"></my-component>
The my-component.component.ts file contains:
@Component({
...
providers: [
{ provide: 'paramA', useValue: this.paramA },
{ provide: 'paramB', useValue: this.paramB },
]
}
export class MyComponent implements OnInit {
@Input() paramA: string;
@Input() paramB: string;
constructor(private serviceA: AService, private serviceB: BService);
...
}
Then, in a.service.ts:
@Injectable({
providedIn: 'root'
})
export class AService {
constructor(
@Inject('paramA') public paramA: string
) {
this.paramA = paramA;
}
}
This setup raises an error due to limitations on the component decorator's access to class properties. So, what would be the correct method to achieve this configuration?