Ang2 How to make Singleton Provider?

Question

Design patterns

Hello. The project has:
main ( NgModule ) - module and bootstrap.
app ( AppComponent ) - the initial component.
inputdata( InputComponent ) - the component that displays the input field. provider is using.
service ( DataService ) - service provider.
The structure in general looks like this
Page like this
HTML like this

<application>
    <h2>App</h2><br>
    <inputdata>
        <input ng-reflect-model="12332" class="ng-valid ng-dirty ng-touched">
        <input ng-reflect-value="12332">
        <hr>
    </inputdata>
    <inputdata>
        <input ng-reflect-model="123" class="ng-untouched ng-pristine ng-valid">
        <input ng-reflect-value="123">
        <hr>
    </inputdata>
</application>

Question:
When I edit the first input group from the first inputdata component , there is a binding between them. Those. a separate provider is used for each component. Like PerComponent. I want to get a Singleton between two components so that they use the same data.

Answer 1

Specify a service in the component above (a component or ng module that contains both of your data inputs) and it will be a singleton. And then inject your service into the child components you need.