how to refer two or more angular model properties in the html directives like [title] = "model.prop1 - model.prop2"

Question

Assume i have my component with a model class User with Username, Nickname, First name, Last name.

export class User
{
    Username: string;
    Nickname: string;
    Firstname: string;
    Lastname: string;
    Email: string;
}

I want the html to render something like,

<div [title]="user.Username - user.Nickname">
...
</div>

I tried the above but it wont work. If it were to be a value or inner Html i know how to use it but i wanted something like on the tool-tip or title property.

How do i go about doing that without having to create another property in my model class? At the moment, i want to show a tool-tip combining of two model props. What am i missing here to get this?

Answer 1

You could add brackets and string concatenation. Try the following

<div [title]="(user.Username) + '-' + (user.Nickname)">
...
</div>

Alternatively you could also use data interpolation

<div title="{{user.Username}}-{{user.Nickname}}">
...
</div>