In my Angular2 application, I have implemented a functionality where I loop through a list of users and display an icon to represent each user. Now, I want to enhance the user experience by using material2's tooltip (mdTooltip) feature to display the name of the person when hovering over the icon. While I was able to successfully implement the tooltip with a singular property using string interpolation, I faced challenges when trying to extract the name from an array in the same component.
Below is an excerpt from my component:
import { User } from './../../views/user/user';
import { Component, OnInit, Input } from '@angular/core';
import { AuthenticationService } from './../../data/authentication.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-room',
templateUrl: './room.component.html',
styleUrls: ['./room.component.less']
})
export class RoomComponent implements OnInit {
otherImg = 'app/img/photo-ph.png';
model: any;
loading = false;
name = 'John Smith';
others = [
{ id: 1, name: 'John Smith', avatar: 'app/img/photo-ph.png' },
{ id: 2, name: 'Javier Sanchez', avatar: 'app/img/photo-ph.png' }
];
user;
token;
nickname;
constructor(private authenticationService: AuthenticationService,
private router: Router) { }
isLoggedIn() {
this.loading = true;
if (this.authenticationService.isAuthenticated()) {
return true;
}
}
ngOnInit() {
}
}
The following snippet shows the version of my component HTML that functions correctly:
<div *ngIf="isLoggedIn()" class="others">
<span *ngFor="let other of others"><i [ngClass]="'material-icons'" [routerLink]="['/chat']" mdTooltip="{{name}}" tooltip-position="below">person</i></span>
<a [routerLink]="['/login']">Logout</a>
</div>
However, when I attempted to use string interpolation to fetch a value from an array and utilize it in the tooltip, it did not yield the desired result. Below is the troublesome part of my component code:
<div *ngIf="isLoggedIn()" class="others">
<span *ngFor="let other of others"><i [ngClass]="'material-icons'" [routerLink]="['/chat']" mdTooltip="{{others.name}}" tooltip-position="below">person</i></span>
<a [routerLink]="['/login']">Logout</a>
</div>