iterate over array parameter in object

$ is generally suffixed after a property name if that property contains an Observable value. This is done as a naming convention as stated in the Angular Guide here:

Because Angular applications are mostly written in TypeScript, you will typically know when a variable is an observable. Although the Angular framework does not enforce a naming convention for observables, you will often see observables named with a trailing “$” sign.

This can be useful when scanning through code and looking for observable values. Also, if you want a property to store the most recent value from an observable, it can be convenient to simply use the same name with or without the “$”.

Since you're already subscribing to the Observable and the experience$ won't be an Observable and instead it would be an array, you should consider naming the property differently.

Try this without the $.

The li for details is also not in the ul. So fix it by doing the following:

<li *ngFor='let experience of experiences'>
  <!--<a routerLink='/details/{{ user.id }}'>{{ user.name }}</a>-->
  <ul>
    <li class="position">{{ experience.position }}</li>
    <!--<li><a href='http://{{ user.website }}'>{{ user.website }}</a></li>-->
    <li class="company">{{ experience.company}}<span class="dates">  {{ experience.dates}}</span></li>
    <ul class="details" *ngFor='let d of experience.details'>
      <li>{{ d }}</li>
    </ul>

  </ul>
</li>

Also make this change in your Component Class:

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  experiences: any[];

  constructor(private data: DataService) {}

  ngOnInit() {
    this.data.getExperience().subscribe(
      data => this.experiences = data
    )
  }
}

Here's a Working Sample StackBlitz for your ref.