Service doesn't return observable as promise to component from API

Question

im trying to fetch some data from a rest API, and then do an ngFor using angular 4. My component returns an undefined, when i try to log it:

Service:

  getLatestFeed() {
    let promise = new Promise((resolve, reject) => {
      firebase.auth().currentUser.getIdToken(true).then((idToken) => {
        var headers = new HttpHeaders()
          .set('user_token', idToken);
        var params = new HttpParams()
          .set('page', '0')
          .set('hits', '6')
          .set('feed', 'latest');

        this.http.get('https://dev-api.byrd.news/v1/stories', { params, headers })
          .toPromise()
          .then(data => {
            return resolve(data);
          })
      }, error => {
        reject(error);
      })
    })
    return promise;
  }

}

Component:

export class DiscoverComponent implements OnInit {
  stories: any;

  constructor(private storiesService: StoriesService, private http: HttpClient) {
    this.storiesService.stories = this.stories;
  }



  ngOnInit(){

    this.stories = this.storiesService.getLatestFeed();
    console.log(this.stories);
  }

HTML:

<h1>DiscoverComponent</h1>

<div *ngFor="let story of stories">
  {{story.storyHeadline}}
</div>

I'm learning about the differences between Observables and Promises, and im kinda stuck on this one. Any ideas? Thank you!