Passing data into Angular 4 component that is in a package

Question

I am creating NPM packages of Angular 4 modules/components/services. The component needs to display things that are app-specific like the user name and an environment-specific URL or two.

I'm having trouble determining how I would pass that data from my Angular 4 app into these shared components. I tried creating a service inside the component and using Subject but that didn't work because it was creating a copy of the service for both the package component and the app component.

So my question is: Is this even possible using Angular 4? If so, how?

Answer 1

Answering my own question here. It turns out it is possible to share a service that lives in an npm packaged Angular 4 component/module/service with your app.

What I was doing was not binding my packaged component variables correctly, ie using the async pipe and binding directly to the Subject<string>. I was handling the subscribing and that didn't work properly.

Here's the html in the packaged component:

<p>Welcome, <b>{{fullName | async}}</b>

Then in the component typescript file:

ngOnInit(): void {
    this.fullName = this.headerSvc.nameSource;
}

The headerSvc has this:

public nameSource:Subject<string> = new BehaviorSubject<string>("");

and this (which the app calls):

setName(name: string) {
  this.nameSource.next(name);
}

Hope this helps someone figure this out.