how to use ng-content multiple in same component

Question

How can I use ng-content multiple times in the same component? I'm currently using it successfully for the start time, but when I add the end time, the start time values are being passed to the end time values. Can you help me fix this?

this is my main component

`  <div class="p-float-label">
        <p-calendar [(ngModel)]="startTimeAsDate" formControlName="startTime"
          [inputId]="'startTime_'+day+'_' + inputIndex" (ngModelChange)="checkStartTimeValidity()" [showTime]="true"
          [timeOnly]="true"><p-footer><ng-content select="[id=startTime]"></ng-content></p-footer></p-calendar>
        <label [for]="'startTime' + inputIndex">{{'startTime' | translate}}</label>
      </div>


<div class="p-float-label">
        <p-calendar [(ngModel)]="endTimeAsDate" formControlName="endTime" [inputId]="'endTime_'+day+'_' + inputIndex"
          (ngModelChange)="checkEndTimeValidity()" [showTime]="true" [timeOnly]="true"><p-footer><ng-content
              select="[id=endTime]"></ng-content></p-footer></p-calendar>
        <label [for]="'endTime' + inputIndex">{{'endTime' | translate}}</label>
      </div>

`

this is my second component

`   <app-start-time-end-time [footer]="footer" [day]="day" [inputIndex]="i"
          [isMinusButtonVisible]="plusMinusButtonVisibilities[i].isMinusButtonVisible"
          [isPlusButtonVisible]="plusMinusButtonVisibilities[i].isPlusButtonVisible"
          (minusButtonClicked)="removeTimeValueFromArray($event)" (plusButtonClicked)="addNewTimeValueToArray()"
          [(endTime)]="timeValues[i].endTime!" [(startTime)]="timeValues[i].startTime!">
          <span id="startTime"><ng-content></ng-content></span>
          <span id="endTime"><ng-content></ng-content></span>
        </app-start-time-end-time>`

this is my third component

`<app-week-day-time [footer]="getFooterContent()" [(timeValues)]="mondayTimeValues"
        [dayCheckboxLabel]="translate('offDay')" [day]="'monday'"> <span id="startTime"
          class="clickToApllyStart clickable clickable cursor-pointer text-blue-500 w-3 pl-3" (click)="
        onApplyToAllStartTimesClicked(mondayTimeValues[0].startTime, 0)
      ">Apply to All Start Times</span>
      </app-week-day-time>`

I'm trying to use ng-content multiple times in the same component. I want to add different values for the end time and start time separately, but currently, the values of the start time are being passed to the end time as well. How can I ensure that each ng-content block has its own separate values for startTime and endTime?

Answer 1

ng-content can be used for multi-slot content projection. For this you'll need to add a select attribute to the elements.

<ng-content select="[question]"></ng-content>

Where the select value is a css selector.