I struggle with determining the most effective practices for Angular.
The issue I am facing is as follows:
<div>
<app-child [data]="data | async">
</app-child>
</div>
Should I opt for the following option:
A: Utilize Backing properties to update a correlated value
class ChildComponent{
@Input
set data(value){
this._data =value;
this.label = this.labelService.getLabelColor(value.warningperiod)
}
get data(){ return this._data}
_data: object;
labelColor:string
// constuctor...
}
B: Use Observables and subscriptions
<div>
<!-- pass down the whole observable -->
<app-child [data]="data">
</app-child>
</div>
class ChildComponent implements OnInit{
@Input data: Observable<object>;
labelColor: String;
onInit(){
this.data
.subscribe( value =>{
this.labemColor= this.labelService.getLabelColor(value.warningPeriod)
})
}
//constructor
}
Which approach is more beneficial?
The need to unsubscribe when subscribing can be seen as "annoying."
When should I choose one over the other?