Q: Angular: string return from inside .subscribe() causes infinite xhr requests I'm trying to get an attendee id to resolve to a Contact object (via HTTP server request), then map the first name and last name to an HTML div.
My HTML:
            <div *ngFor="let attendee of meeting.attendees.split(',')" style="font-size: 10px;">
              &bull; {{ getContactFromId( attendee ) }}
            </div>

My .ts:
getContactFromId(_id: string) {

    this.contactService.getContactFromId(_id).subscribe(
      
      response => {
        return response.firstName + " " + response.lastName;
      },
      error => {

      }
    );
  }

My contactService:
    getContactFromId(_id:string) {
        return this.http
            .get<Contact>('http://192.168.50.8:4000/api/contact/'+_id)
        
    }

The service returns an object correctly but the .subscribe (or something else) wont return the proper values, and goes into an infinite loop of xhr requests to the server, effectively crashing the browser. I suspect my issue has to do with the return inside the .subscribe.
Any suggestions?

Update - here is my new .ts code:
    meetings: Meeting[] = [];
  attendees: Contact[] = [];

// constructor goes here

ngOnInit(): void {
    this.meetingService.allMeetingsDetailed.subscribe( meetings => { this.meetings = meetings; this.getAttendeesList() });
  }

  getAttendeesList() {

    if (this.meetings == null) return null; // SINCE THIS GETS CALLED ONINIT MEETINGS MIGHT STILL BE NULL SO I HAD TO PUT THIS IN... IS THERE A BETTER WAY?

    for (var i = 0; i < this.meetings.length; i++) {
      
      var attendees = this.meetings[i].attendees.split(',');

      for (var j = 0; j < attendees.length; j++) {

        this.contactService.getContactFromId(attendees[j]).pipe(take(1)).subscribe(
      
          response => {
            this.attendees.push(response);            
          },
          error => {
    
          }
        );  

      }
    }

  }

  getContactFromId(_id: string) {
    if (this.attendees.length == 0) return null; // SINCE THIS GETS CALLED BEFORE THE ATTENDEES VAR IS LOADED I HAVE TO PUT THIS IN... IS THERE A BETTER WAY?
    
    var attendee: Contact = this.attendees.find(contact => contact._id === _id);

    return attendee.firstName + " " + attendee.lastName;
  }

Then my view stays the same as before and works.

A: Since your service method fetching directly from view, it's calling multiple times so the API call. That leads to your browser crash and hanging.
You want to get the attendee contact details based on the contact id, can try some thing like below
Make API call for multiple id's (list of id's) to get their attendee name and store them in one field and use the field in view.
In Template:
this.contactService.getContactFromId(_idList).subscribe(response => {
    this.attendeesList = response;
}, error => {}
);

In View:
 <div *ngFor="let attendee of meeting.attendees.split(',')" style="font-size: 10px;">
          &bull; {{ attendeesList[attendee]}}
 </div>

Make sure that you did called that service immediately after you get the contact details.
Happing Coding :)

A: Your method you call getContactFromId is not returning anything.
This is how your method could look like to use it how your HTML is written
 getContactFromId(_id: string) {
          /* subscription*/
       return {"firstName":"demo", "lastName":"something"};    
    }

However, I would assume you would like to use your subscription response. In order to use the response you need a property  in your Controller, since your subscription response is asynchronous
 person:any;

getContactFromId(_id: string) {
   this.contactService.getContactFromId(_id).subscribe(
          response => {
            this.person= response.firstName + " " + response.lastName;
          },
          error => {
          }
        ); 
.... 

Your HTML then will have to be something like:
 <div *ngFor="let attendee of meeting.attendees.split(',')" style="font-size: 10px;">
              &bull; {{ persoon }}
            </div>

I would assume attendee is a constant value somewhere or intialized somehow.

A: you have to call getContactFromId() on a event or in an Angular lifecycle and then set the value, because Angular call change detection for the component periodically so each time while rendering UI this function is getting invoked.
