Angular/RxJs: how to retrieve specific value from key-value pair from array in Observable

Original Answer

The async pipe is what returns you the object.

Right now you are trying to get a member of the observable that does not exist, you should get the member from the result of the async pipe, like this:

<h1>{{ (convertedLabels$ | async)['labels.header.defaultTitle'] }}</h1>

Or with a ternary providing a default value:

<h1>{{ (convertedLabels$ | async) ? (convertedLabels$ | async)['labels.header.defaultTitle'] : 'Default' }}</h1>

Update

The problem is that you are using a value from an async call in your html. This value has not yet been retrieved when the component is created, that is why the async pipe fails for a second until the value has been retrieved.

You can create a Subject with an initial value to be used by the async pipe until your call has retrieved the new value, and then push that new value to the subject.

You can then create an observable from that subject and use that in your component using a getter.

Example service:

private labelsSubject = new BehaviorSubject<LabelPair[]>(this.defaultLabelPairArray)

get labels$() {
  return this.labelsSubject.asObservable()
}

constructor(private http: HttpClient) {}

getLabels() {
  this.http.get<LabelPair[]>('/assets/labels.json').subscribe(
    labelPair => this.labelsSubject.next(labelPair)
  )
}

Here is a reviewed and cleaned up version of your Stackblitz.

Another Option

You can also use a defined object instead of a map, to allow for type checking by changing your mapping of the observable a little:

Html:

<h1>{{ (convertedLabels$ | async) ? (convertedLabels$ | async)?.defaultTitle : 'Default' }}</h1>

Class an mapping:

class Labels {
  defaultTitle: string;
  otherTitle: string;
  name: string;
}

convertedLabels$ = this.labelService.getLabels().pipe(
  map((m) =>
    m.reduce((mapAccumulator, obj) => {
      const keyParts = obj.key.split('.')
      const key = keyParts[keyParts.length - 1]
      mapAccumulator[key] = obj.value;
      return mapAccumulator;
    }, new Labels())
  )
);

With yet another Stackblitz.