Размещение пользовательских шаблонов только в одном заголовке (PrimeNG)

Я пытаюсь применить класс (стрелка svg) только к одному заголовку столбца за раз при сортировке с использованием PrimeNG, однако мое состояние ngIf в моем ng-контейнере не работает. Я устанавливаю выбранное поле в selectedCol при сортировке. В чем проблема?

таблица-layout.component.html

<p-dataTable 
[value]="results" 
[paginator]="true" 
[rows]=6 
class="ds-u-sans ds-c-table" 
(onSort)="handleSorting($event)"
>
  <p-column 
  *ngFor="let col of cols" 
  [field]="col.field" 
  [header]="col.header" 
  [sortable]="col.sortable" 
  [filter]="col.filter"
  >
    <ng-container *ngIf="col.header === selectedCol">
      <ng-template pTemplate="header">
        <div [ngClass]="sorted ? 'up' : 'down'"></div>
      </ng-template>
    </ng-container>

  </p-column>
</p-dataTable>

таблица-layout.component.ts

import { BrowserModule } from '@angular/platform-browser'
import { Component, OnInit, NgModule, ViewEncapsulation } from '@angular/core'
import { HttpClient } from '@angular/common/http'

import { cols } from './cols'

@Component({
  selector: 'app-table-layout',
  templateUrl: './table-layout.component.html',
  styleUrls: ['./table-layout.component.css'],
  encapsulation: ViewEncapsulation.None
})

export class TableLayoutComponent implements OnInit {

  ROOT_URL: string = 'https://jsonplaceholder.typicode.com/users'
  results: any[]
  sorted: boolean = false;
  cols: any[]
  selectedCol: string

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.getData();
    this.cols = cols
  }

  getData() {
    this.http.get<any[]>(this.ROOT_URL).subscribe(data => this.results = data)
  }

  handleSorting(event) {
    this.sorted = !this.sorted
    this.selectedCol = event.field
  }

}

cols.ts

export const cols = [
    { 
        field: 'id', 
        header: 'ID', 
        sortable: true 
    },
    { 
        field: 'name', 
        header: 'Name', 
        sortable: true, 
        filter: true 
    },
    { 
        field: 'username', 
        header: 'Username', 
        sortable: true, 
        filter: true 
    },
    { 
        field: 'address.zipcode', 
        header: 'Zipcode', 
        sortable: true, 
        filter: true 
    }
  ]