Updates 7 HTML component templates to use Angular's new block syntax (@if, @else, @for) replacing deprecated structural directives (*ngIf, [ngIf], *ngFor) and template references (ng-template, ng-container).

Files Modified

• account-savings-report.component.html - 35 conditions, complex nested templates
• facility-savings-report-results.component.html - 42 conditions, @for loops
• emissions-data-form.component.html - 7 conditions, @for loops with indices
• e-grid-emissions-table.component.html - 9 conditions, @for loops
• group-monthly-analysis-report.component.html - 15 conditions, nested blocks

Example Conversion

Before:

<ng-container *ngIf="facilityReport && calculating != true">
  <ng-template [ngIf]="!print" [ngIfElse]="printBlock">
    <div class="scroll-x">
      <app-table *ngIf="annualAnalysisSummaries" [data]="data"></app-table>
    </div>
  </ng-template>
  <ng-template #printBlock>
    <app-table *ngIf="settings | includeTable: 'consumption'" [block]="'consumption'"></app-table>
  </ng-template>
</ng-container>

After:

@if (facilityReport && calculating != true) {
  @if (!print) {
    <div class="scroll-x">
      @if (annualAnalysisSummaries) {
        <app-table [data]="data"></app-table>
      }
    </div>
  } @else {
    @if (settings | includeTable: 'consumption') {
      <app-table [block]="'consumption'"></app-table>
    }
  }
}

Note: ng-container elements using *ngTemplateOutlet are preserved as they remain valid for template projection.

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.