Manually update observable using Angular's async pipe

I have an HTTP GET call that returns a list of things. I also have a POST that saves a new record and then returns the saved record. Using observables and the Angular async pipe, after POSTing a new record, I would like to merely append that new record to the list instead of doing a whole new GET to update the list.

private subject = new BehaviorSubject<Thing[]>([]);
public thingsData$: Observable<Thing[]>;

// The first run through this code will do the HTTP GET 
// but then if there are any further alterations, the 
// next() will update the async pipe in the template.
public ngOnInit(): void {
    this.thingsData$ = this.subject.asObservable().pipe(
        switchMap((things: Thing[]) => {
            if (things.length) {
                return of(things);
            }
            return this.thingService.getThings();
        })
    );
}

// I'm not sure if this will ultimately be the best way
// to do this part but it illustrates the use of next()
public createThing(newThing: Thing, existingThings: Thing[]): void {
 this.thingService.saveThing(newThing)
   .subscribe((savedThing: Thing) => {
     subject.next(
       existingThings.push(newThing);
     );
   });
}

There is no need for your switchMap, just call the behavior subject thingsData$ and subscribe straight to the service.

this.thingService.getThings().subscribe(things => { this.thingsData$.next(things); });

When you update with an observable you want it to emit a new object, you shouldn't mutate an existing object. The standard way of making an observable emit a new object is to use the spread operator. The spread operator on an array is used like [...previousArray, newValue]. The behavior subject already contains the exisiting things so you can update like.

public createThing(newThing: Thing): void {
  this.thingService.saveThing(newThing).subscribe((savedThing: Thing) => {
    this.thingsData$.next([...this.thingsData$.value, newThing]);
  }
}

You can create a single observable from two sources using merge.

Let's call the two sources existingThings$ and createdThing$.

We can use the scan operator to combine the emitted things from both sources into a single collection.

  private existingThings$ = this.thingService.getThings();
  private createdThing$ = new Subject<Thing>();
  
  things$ = merge(this.existingThings$, this.createdThing$).pipe(
    scan((previous, current) => previous.concat(current), [] as Thing[])
  );
  
  createThing(newThing: Thing) {
    this.thingService.saveThing(newThing).subscribe(
      createdThing => this.createdThing$.next(createdThing)
    );
  }

Here's a working StackBlitz demo.