(After taking Gunnar's advice, I'm updating my question) @Gunnar.B
Tool for integrating with API
@Injectable({
providedIn: 'root'
})
export class ConsolidatedAPI {
constructor(private http: HttpClient) { }
getInvestments(search?: any): Observable<any> {
return this.http.get<any>(`${environment.basePositionConsolidated}`);
}
}
This service provides the data flow and interface to components in the presentation layer
@Injectable({
providedIn: 'root'
})
export class CoreService {
constructor(private api: ConsolidatedAPI, private state: StateService) { }
public getInvestments$(): Observable<any> {
return this.state.getInvestments$()
}
public loadInvestments() {
return this.api.getInvestments()
.pipe(
tap(investPortfolio => this.state.setInvestments(investPortfolio))
);
}
}
This service handles the business logic for the component
@Injectable({
providedIn: 'root'
})
export class StateService {
private investments$ = new BehaviorSubject<any>(null);
public getInvestments$() {
return this.investments$.asObservable()
}
public setInvestments(investPortfolio){
this.investments$.next(investPortfolio)
}
}
However, the data from the API is not displaying in my HTML.
menu.component.ts
export class MenuComponent implements OnInit {
investments$: Observable<any>;
constructor( private coreService : CoreService ) {
this.investments$ = this.coreService.getInvestments$()
}
ngOnInit(): void {
this.coreService.loadInvestments();
console.log(this.coreService.loadInvestments())
}
}
menu.component.html
<div>
test
</div>
<div *ngFor="let investmentPortfolio of investments$ | async;">
{{investmentPortfolio | json}}
</div>