Angular 7 NgComponentOutlet: problems with Injection

458 Views Asked by At

I'm sorry if it's a duplicate of someone question. However I couldn't find solution for my problem.

Angular 7. I need to input my variable as @Input into the ng-container via ngComponentOutlet. As says documents, there is an option to make it via Injector. And it's fine if it's just a string or number. But I have a little bit complicate thing: what if I want to have in injecting class more complicated logic: for example bind an Observable<SomeModel> that I want to get from ngrx store? Or subscribe on it?

Here I got folowing issue: Cannot read property 'select' of undefined.

@Injectable()
export class Greeter {
    suffix$;
    constructor(private store: Store<fromStore.State>) {
        this.suffix$ = this.store.select(fromStore.getSuffix);
    }
}

@Component({
    selector: 'complete-component',
    template: `Complete: {{ greeter.suffix$ | async }}`
})
export class CompleteComponent {
    constructor(public greeter: Greeter) {
        this.greeter.suffix$.subscribe(data => console.log('data', data));
        // not working
    }
}

@Component({
    selector: 'ng-component-outlet-complete-example',
    template: `
        <ng-container *ngComponentOutlet="CompleteComponent; 
                                        injector: myInjector;"
    })
export class NgTemplateOutletCompleteExample {
    CompleteComponent = CompleteComponent;
    myInjector: Injector;

    constructor(injector: Injector) {
        this.myInjector =
            Injector.create({providers: [{provide: Greeter, deps: []}], parent: injector});
    }
}

What am I doing wrong?

0

There are 0 best solutions below