Accessing element in async array

Question

I have an angularjs2 app that receives a list of jsons from my firebase service. I want to access and display the first element of the list.

Here is what I have tried

<h1>{{(chapters | async)?[0].title}}</h1>

which gives me a Template parse error.

How do I access the first element of an async array?

Answer 1

I would do it like this:

<h1>{{((chapters | async) || [])[0]?.title}}</h1>

It's a more generic solution, works for any index, not only first.

Answer 2

You can use pipe like this:

@Pipe({
  name: 'first'
})
export class First {
  transform(val, args) {
    if (val === null) return val;
    return val[0];
  }
}

and in your html

<h1>{{ (chapters | async | first)?.title }}</h1>

Plunker Example