title: How to access outer *ngFor value within an inner value="" parameter?
body: <p>This is easier to show than to explain. In a nutshell, I have a <code>&lt;ul&gt;</code> tag with a number of <code>&lt;li&gt;</code> tags within it, and these are created by using an <code>*ngFor</code> within another <code>*ngFor</code>. What I want this code to do is to list the days of the week (e.g. Monday, Tuesday, Wednesday...) and then concat those with the times of day (e.g. Morning, Noon, Afternoon....). Easy enough, here is the source code, pretty much in its entirety. </p>
  
  <p><a href="https://next.plnkr.co/edit/W4x4VBJGzlTsMfb1?open=lib%2Fapp.ts&amp;deferRun=1" rel="nofollow noreferrer">link to code below</a></p>
  
  <pre><code>import { Component, NgModule, VERSION } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  
  @Component({
      selector: 'my-app',
      template: `
          &lt;ul *ngFor="let d of days"&gt;{{ d }}
              &lt;li *ngFor="let dt of daytimes" value="{{d}}"&gt;{{d}}: {{ dt }}&lt;/li&gt;
          &lt;/ul&gt;
      `,
  })
  export class App {
      days = [
          'Monday',
          'Tuesday',
          'Wednesday',
          'Thursday',
          'Friday',
          'Saturday',
          'Sunday',
      ];
  
      daytimes = ['Morning', 'Noon', 'Afternoon', 'Evening', 'Night'];
  }
  
  @NgModule({
      imports: [BrowserModule],
      declarations: [App],
      bootstrap: [App],
  })
  export class AppModule {}
  </code></pre>
  
  <p>Ok, so here's the problem. Look at this line:</p>
  
  <pre><code>&lt;li *ngFor="let dt of daytimes" value="{{d}}"&gt;
  </code></pre>
  
  <p>The "value" tag is being assigned to <code>{{d}}</code>, and d is from the outer <code>*ngFor</code>. If you run the plunker, you'll see this works as the innerHTML value of the <code>&lt;li&gt;</code>, but when I try to assign its value to the "value" param, it doesn't work. It just gives me a zero. You can see this for yourself by running the plunker, then right-clicking on the HTML and choosing "inspect". </p>
  
  <p>In order to save everyone some time, here is a screenshot of the value being shown. I expected the value to be "Monday", not "0". </p>
  
  <p><a href="https://i.stack.imgur.com/wplnf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wplnf.png" alt="enter image description here"></a></p>
  
  <p>Any thoughts on how to format this correctly so that it works?</p>