I have a function that adds an item to my list, it returns an observable that I can display some data

  add() {

    let data$ = of(this.data);

    data$.subscribe((val: any) => {
      let newData = {
        id: val.length + 1,
        description: `description ${val.length + 1}`,
        completed: false
      }

      this.data.push(newData);

      // this.list$.next(addMe);
      console.log(this.data);
      console.log(val.length);

    });

return data$;

}

But when I refactor it like this, it no longer works, it says data$ is a subscription now instead of an observable, but I don’t understand how they aren’t equivalent.

add(){

    let data$ = of(this.data).subscribe((val: any) => {
      let newData = {
        id: val.length + 1,
        description: `description ${val.length + 1}`,
        completed: false
      }

      this.data.push(newData);

      // this.list$.next(addMe);
      console.log(this.data);
      console.log(val.length);

    });

    return data$;

}