Store data from subscribe and reuse in another component

How do i can store data in Angular from subscribe and reuse in any component i want ?

DataService:
`

@Injectable({
  providedIn: 'root'
})
export class DataService{

  constructor(private http: HttpClient) { }

  headers = new HttpHeaders({
        'x-rapidapi-key': '',
        'x-rapidapi-host': ''
      });

  public fetchData(): Observable<any> {
    return this.http.get('', {
      headers: this.headers
    })
  }

Component:

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

export class AppComponent implements OnInit{

  dataStore: any

  constructor(private dataService: DataService) {
  }

  ngOnInit() {
    this.dataService
      .fetchData()
      .subscribe(
        (data) => {
          this.dataStore = data.data
          console.log(this.dataStore) <-- this works fine 
        })
  }
}

`

Second Component:

`

@Component({
  selector: 'app-data-input',
  templateUrl: './data-input.component.html',
  styleUrls: ['./data-input.component.css'],
  providers: [AppComponent]
})


export class DataInputComponent{

  @Input() dataStore: any <-- undefined 


  constructor() { }
  
}

`

In first component using subscribe i want assign this.dataStore = data.data (in subscribe console.log(this.datastore works fine)) but whenever i use Input() in second component dataStore output is undefined for example in html {{ dataStore.title }}. Recived data from service is just object with key and value.