angular2: Access property of pipe returning object

Question

I have a custom angular2 pipe, which converts uid's (strings) to UserInfo objects using a service.

@Pipe({name: 'userInfo'})
export class UserInfoPipe implements PipeTransform {

    constructor(public _userService: UserService) {
    }

    transform(uid:string) : any {
        /*let users = this._userService.users.filter((u)=> {
            return u.uid==uid;
        });
        if(users.length==1) return users[0];
        return null;*/

        return {"Name":"hans","Age":13};
    }
} 

And in my component I have a binding:

 <Label row="4"  text="Author: {{event?.author | userInfo | .Name}}" class="small-spacing"></Label>

event?.author returns the UID, and after piping it through userInfo I have an object. But how can I access properties of that object? Is there a syntax for that? .Name doesn't work.

Answer 1

I just found out that

(event?.author | userInfo).Name   

does exactly what I want: It displays the Name property of the object returned by the pipe.

Answer 2

Not sure if it's the correct way, but I'd pass additional parameter into your pipe.

<Label row="4"  text="Author: {{event?.author | userInfo : {"field": "Name"} }}" class="small-spacing"></Label>

In the pipe I check this parameter and do some special logic:

@Pipe({name: 'userInfo'})
export class UserInfoPipe implements PipeTransform {

  constructor(public _userService: UserService) {
  }

  transform(uid:string, params) : any {
    if (params.field && params.field == 'Name') {

        /*let users = this._userService.users.filter((u)=> {
            return u.uid==uid;
        });
        if(users.length==1) return users[0];
        return null;*/

        return {"Name":"hans","Age":13};
    }
  }
}