Having trouble looping with ngFor – SEO

I’m pretty new to Angular 2 and I’ve reached a impasse in my project. I want to use the *ngFor directive to loop through an array of objects to display its contents in a ‘list view’ using <div *ngFor="let gig of gigs">. At the same time, I want to support a slideshow view where users can click ‘back’ or ‘next’ to navigate. The problem is, getting slideshow to work requires defaulting to first slide, the first object in the array:

this.initialSlide = 0;
this.gigs = this.resume[this.initialSlide];

My data is stored in this.resume: [[{Object1}],[{Object2}],[{Object3}]]. I was trying to get the ‘list view’ to work by setting gigs property to this.resume, but the view was blank. I think it’s because its iterating over arrays and an index needs to be specified. When I do specify an index though, the default slideshow trips up since it’s set to index 0 already (above). I included my code below, please let me know if I need to clarify.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-app-resume',
  styleUrls: ['./app-resume.component.css'],
  template: `
<div ng-click='check(count)'>
<br>
<div *ngFor="let gig of gigs">
<div class = "size">
<h2>{{gig.company}}</h2>
<br>
<h3>{{gig.Date}}</h3>
<ul *ngFor="let duty of gig.duties">
<li>{{duty}}</li>
</ul>
</div>
</div>
<button (click)="cycle(-1)">back</button>
<button (click)="cycle(1)">next</button>
<button (click)="cycle('all')">full list view</button>
</div>
`
})

export class AppResumeComponent implements OnInit {
    resume;
  message;
  initialSlide;
  gigs;
  gig;
  ngOnInit() {
    this.resume = [
        [{company:'Heavy', position: 'Tech Contributor', Date:'October 2016 - December 2016','duties':['Identify, research and publish stories that will generate significant organic traffic','Manage all aspects of the publishing process on WordPress','Analyze data from Dataminr, Google AdWords and Google Trends to find trending topics']}],
        [{company:'Steele Consulting', position:'Media Coordinator', Date:'April 2013 - October 2015','duties':['Boosted organic traffic to website by 34 percent through SEO and revamped blog','Launched whatasteele radio, the podcast about entrepreneurship in real estate']}],
        [{company:'Wochit',position: 'Creator',Date:'April 2015 - October 2015','duties':['Produced videos that made our YouTube channel’s Top 25 for a subscriber base of over 25K people','Internally recognized twice for exceeding the threshold of videos created']}],
        [{company:'Inc.',position: 'Editorial Intern',Date:'March 2015 - June 2015','duties':['Created the 2015 Best in Class Awards page, a guide to the nation’s best designed products','Internally recognized twice for exceeding the threshold of videos created','Wrote 40 posts about start-up conferences, business executives, and national news']}],
        [{company:'The Chicago Tribune',position: 'Assistant Video Producer',Date:'Sept 2014 - Dec 2014','duties':['Shot & Produced breaking news videos and used Chartbeat to promote videos on landing page']}]
    ]
    this.initialSlide = 0;
    this.gigs = this.resume[this.initialSlide];
}

  cycle(d){
    if  (d == 'all'){
      console.log('all initiated')
      this.gigs = this.resume
    }
    else{
        this.initialSlide += d 
        if (this.initialSlide >= this.resume.length )
        {this.initialSlide -= 1}
        else if (this.initialSlide < 0)
        {this.initialSlide += 1}
        else{
            this.gigs = this.resume[this.initialSlide]}
    }
  };  }

EDIT: i’m afraid I haven’t been clear on what I expect for my project. I hope this illustration along with a plunker link makes things clearer :

Plunker: https://plnkr.co/edit/PKDH9tDLHnjrK4flyK1A?p=preview