import { Subscription } from 'rxjs' ; import { StockDataService } from 'src/app/services/stock-data.service' ; import { Component , ViewEncapsulation , OnDestroy } from '@angular/core' ; import { Stock } from 'src/app/models' ; @ Component ( { selector : 'app-user-profile' , templateUrl : './user-profile.component.html' , styleUrls : [ './user-profile.component.scss' ] , encapsulation : ViewEncapsulation . None } ) export class UserProfileComponent implements OnDestroy { public chartData : any [ ] = [ ] ; public gridData : any [ ] = [ ] ; public seriesLabels = { visible : true , content : ( args ) => `${ args . category }\n${ args . value }` } ; private serviceSubscription : Subscription ; constructor ( public service ) { this . serviceSubscription = service . getDataStream ( ) . subscribe ( data => { this . chartData = data . map ( ( item ) => ( { category : item . symbol , value : item . price } ) ) ; this . gridData = data . map ( ( item ) => ( { symbol : item . symbol , name : item . name , price : item . price } ) ) ; } ) ; } public ngOnDestroy ( ) { this . serviceSubscription . unsubscribe ( ) ; } }