title: Grid Dynamic population via routing - Angular 2
body: <p>My Webpage is compiling fine but in the Sprint dropdown menu where i have the routing set up..
   </p>
  
  <pre><code>  &lt;a *ngFor = "let item of sprint;" routerLink = "/Summary" routerLinkActive = "active"&gt;
        &lt;button *ngIf = "item.Name" mat-menu-item style="border-inline-end-color: #141d26; border-width: 1mm"&gt; {{item.Name}}&lt;/button&gt;
  
        &lt;/a&gt;
      &lt;/mat-menu&gt;
  </code></pre>
  
  <p>I am trying to pull data from a website to change out the data in my grid depending on what sprint I select. Right now I don't know the syntax neccessary because I am still learning. Could someone please help?</p>
  
  <p><a href="https://i.stack.imgur.com/MDvDk.png" rel="nofollow noreferrer">webpage</a></p>
  
  <p>Here is my Code</p>
  
  <p>app.module.ts</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { HttpClientModule } from '@angular/common/http';
  import { NgModule } from '@angular/core';
  
  // Modules
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import {MatButtonModule, MatCardModule, MatToolbarModule, MatDatepickerModule, MatIconModule, MatMenuModule, MatListModule, MatProgressBarModule, MatSidenavModule, MatSliderModule, MatTableModule, MatTabsModule, MatExpansionModule, MatFormFieldModule, MatFormFieldControl} from '@angular/material';
  import { ChartsModule } from '@progress/kendo-angular-charts';
  import { FormsModule } from '@angular/forms';
  import { HttpModule } from '@angular/http';
  import {MomentModule} from 'angular2-moment/moment.module';
  //import { SparklineModule } from '@progress/kendo-angular-charts';
  import 'hammerjs';
  
  /// Components
  import { AppComponent } from './app.component';
  import { SprintService } from './Sprint/Sprint.service';
  import { HeaderComponent } from './header/header.component';
  import { TableComponent } from './table/table.component';
  import { DateComponent } from './date/date.component';
  import { GaugeComponent} from './gauge/gauge.component';
  
  ///Kendo
  import {ButtonsModule} from '@progress/kendo-angular-buttons';
  import { GridModule } from '@progress/kendo-angular-grid';
  import {GaugesModule} from '@progress/kendo-angular-gauges';
  
  ///Routing
  import { RouterModule, Routes } from '@angular/router';
  import { NgForOf } from '@angular/common';
  import { ISprint } from './Sprint/Sprint';
  
  var sprint = new Array&lt;ISprint&gt;();
  
  const appRoutes: Routes = [
    { path: 'Summary', component: HeaderComponent },
    { path: '', redirectTo: 'Summary', pathMatch: 'full'}
  ];
  
  @NgModule({
    declarations: [
      AppComponent,
      HeaderComponent,
      TableComponent,
      DateComponent,
      GaugeComponent
    ],
    imports: [
      RouterModule.forRoot(
        appRoutes,
        { enableTracing: true} // &lt;-- debugging purposes only
      ),
  //other imports here
      BrowserModule,
      HttpClientModule,
      FormsModule,
      BrowserAnimationsModule,
      HttpModule,
  
    ],
    providers: [SprintService],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>Header.component.ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { AppComponent } from '../app.component';
  import {DateComponent} from '../date/date.component';
  
  import { SprintService } from '../Sprint/Sprint.service';
  import {SummaryService} from '../summary.service';
  
  import { ISummary } from '../summary';
  import {ISprint} from '../Sprint/Sprint';
  import 'rxjs/add/operator/map';
  import {Http, Response} from '@angular/http';
  
  @Component({
    selector: 'app-header',
    templateUrl: './header.component.html',
    styleUrls: ['./header.component.css']
  })
  export class HeaderComponent implements OnInit {
  
    title = 'app';
    private apiURL = 'http://localhost:52692/api/sprint';
    error: string;
    summary: ISummary;
    sprint: ISprint[];
    newdate: string;
  
    constructor(private _summaryService: SummaryService, private _sprintService: SprintService ) {
      this.summary = new ISummary(); 
     this.sprint = new Array&lt;ISprint&gt;();
    }
  
    ngOnInit() {
      const monthNames = ["January", "February", "March", "April", "May", "June",
      "July", "August", "September", "October", "November", "December"];
      var dateObj = new Date();
      var month = dateObj.getUTCMonth() + 1; //months from 1-12
      var day = dateObj.getUTCDate();
      var year = dateObj.getUTCFullYear();
  
      const d = new Date();
  
      this.newdate = monthNames[d.getMonth()] + " " + day + "," + " " + year;
  
      this._summaryService.getSummaryWeb()
        .subscribe(summary =&gt; { this.summary = summary },
        error =&gt; this.error = &lt;any&gt;error);
  
      this._sprintService.getSprintWeb()
      .subscribe(sprint =&gt; {this.sprint = sprint;
      console.log(this.sprint)},
      error =&gt; this.error = &lt;any&gt;error);
  
    }
  
    public labelContent(e: any): string {
      return e.category;
    }
  }
  </code></pre>
  
  <p>header.component.html</p>
  
  <pre><code>&lt;mat-card style="background: #141d26; "&gt;
      &lt;!-- Left Header --&gt;
      &lt;button mat-button [matMenuTriggerFor]="menu"&gt;
        &lt;mat-icon style="font-size: 40px; color: white"&gt;list&lt;/mat-icon&gt; 
      &lt;/button&gt; 
  
      &lt;mat-menu #menu="matMenu" &gt;
        &lt;a *ngFor = "let item of sprint;" routerLink = "/summary" routerLinkActive = "active"&gt;
            &lt;button mat-menu-item style="border-inline-end-color: #141d26; border-width: 1mm"&gt; {{item.Name}}&lt;/button&gt;
        &lt;/a&gt;
      &lt;/mat-menu&gt;
  
      &lt;!-- &lt;router-outlet&gt;&lt;/router-outlet&gt; --&gt;
  
      &lt;!-- Center --&gt;
          &lt;button mat-button style="font-family: 'Megrim', cursive; color: white; height:32px; font-size: 42px; font-weight: bolder;" &gt;Sprint-alYtics&lt;/button&gt;
          &lt;mat-icon style="font-size: 40px; color: white"&gt;directions_run&lt;/mat-icon&gt; 
  
      &lt;!-- Right --&gt;
      &lt;h1 style="float: right; font-family: 'Oswald', sans-serif; color: white"&gt; {{newdate}} &lt;/h1&gt;
  &lt;/mat-card&gt;
  </code></pre>
  
  <p>I would Appreciate any help and time you could take to go through and see whats wrong. I Modeled most of my current routing off of Angular.io 's website walkthrough for routing. Thanks! </p>