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.