Angular 4 nested ng-template and ngbootstrap popover

Question

I am trying to include data from a ngFor loop in a popover. I have wrapped the popover content into an ng-template and nested this within the ngFOr loop. My issue is the data is not printing out to screen. I only get the HTML text. Here is my code. How do I resolve?

    <ng-container *ngFor="let client of events.data.clients">    
                  <div>    
                    <div>              
                        <div class="user__info">
                          <span class="user__name">{{ client.first_name }}</span>
                        </div>              
                    </div>    
                    <ng-container *ngFor="let event of client.appointments">    
                      <div *ngIf="(event.starts_at| date:'y-MM-dd') == (startofweek | date:'y-MM-dd')">                      

         <ng-template #popContent> 
              <label>Notes</label>
                <p>The id of client is {{ client.id }}</p>
                <p>Event identifier {{ event.id }}</p>                                  
          </ng-template>

      <button type="button" class="btn btn-outline-secondary" placement="bottom"
 [ngbPopover]="popContent" popoverTitle="Popover on bottom" >
                            Popover on bottom
                            </button>


                      </div>

                    </ng-container>
                  </div>

         </ng-container>

Answer 1

Your example is working for me if I take out your *ngIf on event dates (this is incorrect as you'll want to compare to actual dates instead of filters or use a library to do the compare, e.g. in your component.ts).

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <ng-container *ngFor="let client of events.data.clients">    
      <div>    
        <div>              
            <div class="user__info">
              <span class="user__name">{{ client.first_name }}</span>
            </div>              
        </div>    
        <ng-container *ngFor="let event of client.appointments">    
          <div>                      

            <ng-template #popContent> 
            <label>Notes</label>
              <p>The id of client is {{ client.id }}</p>
              <p>Event identifier {{ event.id }}</p>                                  
            </ng-template>

            <button type="button" class="btn btn-outline-secondary" placement="bottom"
              [ngbPopover]="popContent" popoverTitle="Popover on bottom" >
              Popover on bottom
            </button>
          </div>

        </ng-container>
      </div>
    </ng-container>
  `,
})
export class App {
  name:string;
  startOfWeek = new Date('2017-11-30');
  events: any = {
    data: {
      clients: [
        {
          id: 'blah',
          first_name: 'Blah',
          appointments: [
            {
              id: '1234',
              starts_at: new Date('2017-12-01T13:50:00Z')
            }
            ]
        }
        ]
    }
  }
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }
}

@NgModule({
  imports: [ BrowserModule, NgbModule.forRoot() ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

See this plunker plnkr.co/edit/16SQfJRui1Yy985iVgWf?p=preview

For others that stumble upon filters in * queries while they technically function they can have unintended results as they are for render not computation. So just be careful using them (they can be very powerful if being used for a comparison to a downselection on an array for example).