Example of state

Action.ts

export class Action<T> {

  _subject = new BehaviorSubject<T>(undefined);

  public get state() : T {
    return this._subject.getValue();
  }
  
  public set state(v : T) {
    this._subject.next(v);
  }
  
  public get subject(): BehaviorSubject<T> {
    return this._subject;
  }
}

app.component.html

<div style="text-align:center">
  <h1>
    {{ dataState.subject | async}}
  </h1>
  <h1>
    {{ otherState.subject | async}}
  </h1>
</div>

app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(public dataState: GenericStateService<Data>, public otherState: OtherStateService) { }
}

app.module.ts

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    HttpModule,
  ],
  providers: [
    dataService,
    storeService,
    dataStateService,
    OtherStateService
    { provide: 'dataState', useValue: new GenericStateService<Data>() },
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

GenericState.ts

@Injectable({
  providedIn: 'root'
})
export class GenericStateService<T> extends Action<T> { }

OtherStateService.ts

Class Other {
  Id: number;
  Name: string;
}

@Injectable({
  providedIn: 'root'
})
export class DataStateService extends Action<Other> {
  SpecialGet(Id: number) {
    // DataState specific logic.
  }
}