page-header.component.html

<ng-container *ngTemplateOutlet="title ? pageHeaderOriginal : pageHeaderNew"></ng-container>


<ng-template #pageHeaderNew>
  <!-- Page Header New -->
  <div class="block justify-between page-header sm:flex">
    <ol class="flex items-center whitespace-nowrap min-w-0">
      <li class="text-sm" *ngFor="let item of pathTitle;let l = last">
        <a class="flex items-center text-gray-500 hover:text-primary dark:text-white" href="javascript:void(0);">
          {{item}}
          <svg *ngIf="!l"
            class="flex-shrink-0 mx-3 overflow-visible h-2.5 w-2.5 text-gray-300 dark:text-white/10 rtl:rotate-180"
            width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14" stroke="currentColor"
              stroke-width="2" stroke-linecap="round" />
          </svg>
        </a>
      </li>
    </ol>
  </div>
  <!-- Page Header Close -->
</ng-template>


<ng-template #pageHeaderOriginal>
  <!-- Page Header Original -->
  <div class="block justify-between page-header sm:flex">
    <div>
      <h3 class="text-gray-700 hover:text-gray-900 dark:text-white dark:hover:text-white text-2xl font-medium">{{title}}
      </h3>
    </div>
    <ol class="flex items-center whitespace-nowrap min-w-0">
      <li class="text-sm">
        <a class="flex items-center font-semibold text-primary hover:text-primary dark:text-primary truncate"
          href="javascript:void(0);">
          {{activeitem}}
          <i
            class="ti ti-chevrons-right flex-shrink-0 mx-3 overflow-visible text-gray-300 dark:text-gray-300 rtl:rotate-180"></i>
        </a>
      </li>
      <li class="text-sm text-gray-500 hover:text-primary dark:text-white/70 " aria-current="page">
        {{title1}}
      </li>
    </ol>
  </div>
  <!-- Page Header Close -->
</ng-template>