How to correctly create a component that can handle a value and an observable of this value

I have in fact two questions.

When should I pass a observable of an object into a component and when should I resolved it with the | async method?

I also need if i want to propose a robust reusable component to handle the two cases. so i want to be able to take as an input an observable or just the resolved value directly. What is the solution inside the component to handle these two cases?

Best Regards,

Answer

I think that the easer way is use a setter in your Input, if the input is an observable just work with this observable else using rxjs operator of to convert to Observable

A fool example

import {Observable,of,isObservable} from 'rxjs';
@Component({
  selector: 'hello',
  template: `
  <pre>{{obs|async}}
  `
})
export class HelloComponent  {
  obs:Observable<any>
  
  @Input() set data(value){
    this.obs=value instanceof Observable?value:of(value)
    //or, thanks to Vikas
    //this.obs=isObservable(value)?value:of(value)

  }
}

the stackblitz

Update Well, we can think in another way. If received an observable, we subscribe and equal a variable to the data received. else equal the variable to the input.

A fool example without stackblitz

import {isObservable,Subscription} from 'rxjs';
@Component({
  selector: 'hello',
  template: `
  <div *ngIf="yet">
     <pre>{{obs}}</pre>
  </div>
  `
})
export class HelloComponent implements OnDestroy  {
  obs:any
  yet:boolean=false; //a optional variable
  subscription: Subscription //<--here store the subscription
  @Input() set data(value){
    if (isObservable(value)){
        if (this.subscription)
            this.subscription.unsubscribe();

        this.subscription=value.subscribe(res=>{
           this.obs=res;
           this.yet=true
        })
    }
    else{
       this.yet=true
       obs=value
    }
  }
  ngOnDestroy(){
      if (this.subscription){
        this.subscription.unsubscribe();
        this.subscription=null
  }
}