Angular template with mixed datasource

I'm not sure what's the preferred Angular way to solve the problem where a template displays information based on two different sources.

For example, I have a contact list stored in my database. Each contact has a presence information that is coming from network events and NOT stored in the DB. That presence information is collected and stored in PresenceService.

@Injectable()
export class PresenceService {
  private readonly onlineUsers: { [s: string]: boolean; }; // {uid: online}

  constructor() {
    // demo data, normally comes from network events
    this.onlineUsers = { 1: true, 2: false };
  }

  isOnline(uid: string) {
    return this.onlineUsers[uid];
  }
}

I want to display the contact list with the presence information:

@Component({
  selector: 'my-app',
  template: `
  <h3> Your contacts </h3>
  <p *ngFor="let c of contacts">
     is 
  </p>
  `
})
export class AppComponent  {
  contacts = [{
    uid: 1,
    name: 'John'
  }, {
    uid: 2,
    name: 'Melinda'
  }]

  constructor(public presence: PresenceService) {}
}

I see three ways of solving this:

• PresenceService with a method "isOnline" directly called in the template, as shown in the snippet above.
• IsOnline pipe returning information stored in the PresenceService.
• Listening to presence information in the component, and adding to the contacts object a temporary presence property that isn't stored in the DB.

What's the Angular best practice for such cases ?

from Angular template with mixed datasource