Value drops when you re-createEmbeddedView. What's wrong?

Question

Angular

I created the ifViewportSize directive , which, when rendering the test component , should display its template with a value. But the value is not displayed when re-rendering, what is missing?
Template render:

if( size === this._ifViewportSize ) this.viewContainerRef.createEmbeddedView( this.templateRef );
else this.viewContainerRef.clear();

Sample:

<test *ifViewportSize="'small'" [value]="1"></test>

test component:

import { Component, Input, ViewChild } from '@angular/core';

@Component({
  selector: 'test',
  template: `Value: {{ value }}`,
})
export class TestComponent{
  @Input() value: number;
}

Full source https://stackblitz.com/edit/vim8-2-resize-template...

Answer 1

You need to use useFactory instead of useValue and return the service instance in the function.

providers:    [
    {
        provide: IfViewportSizeService,
        useFactory: () => new IfViewportSizeService( config ) }
  ]