Template showing [object object]

Hey…ok so im a total newb to typescript, and only small knowledge of ionic, but i am having trouble doing something i thought would be very very simple.
I want to switch between two object, and show selected object in ui

Hopfully i wont need code here, as this is more a generic…so here we go.

Ok so my aim is simple, two players, both with ‘name’ and ‘score’.
one user is shown on screen, when user enters value, update score, and then set other player as active player…

this.players {p1:{name: joe, score:45},p2:{name: paul, score 66}}
this.activePlayer = this.players.p1;
enterScore(score) {
   this.activePLayer.score = score;
   this.activePLayer = this.players.p2
}

then in template i want to do
<p>name is {{activePlayer.name}}</p>

but what i get is ’ name is [object object]’

so my question is…how do i declare an object with values in typescript to use in template.
if i do <p> name is {{activePlayer | json}}</p> i get the whole object, and cant get property.

I already had joy with using an array of objects, which rendered without any PIPE, but objects are giving me trouble.

any help would be great, and even pointing me in direction of good docs, as most i found dont help mePreformatted text