job-detail.component.html

<div>
  <div class="card">
    <div class="card-body">
      <div class="d-md-flex align-items-center pb-3 border-bottom">
        <div class="d-flex align-items-center">
          <img
            [src]="jobDetail.image"
            alt="pic"
            class="img-fluid rounded-lg flex-shrink-0"
            width="50"
          />
          <div class="ml-3">
            <h4 class="card-title">{{ jobDetail.title }}</h4>
            <h6 class="card-subtitle mb-0">{{ jobDetail.location }}</h6>
          </div>
        </div>

        <div class="ml-auto mt-2 mt-md-0">
          <a routerLink="/apps/jobs" class="btn btn-primary mr-2">
            Back to Jobs
          </a>
          <a routerLink="/apps/apply-job" class="btn btn-success">
            Apply for Job
          </a>
        </div>
      </div>

      <h4 class="mt-4 card-title">Job Description</h4>
      <p>{{ jobDetail.description }}</p>
      <h4 class="card-title pt-2 border-top">Qualifications</h4>
      <ul class="list-unstyled">
        <li *ngFor="let qua of jobDetail.qualification" class="py-1">
          <i class="mdi mdi-radiobox-marked text-info"></i>
          {{ qua }}
        </li>
      </ul>
    </div>
  </div>

  <h4 class="card-title mt-4 pb-2 border-bottom">Related Jobs</h4>

  <div *ngIf="similarJobs.length === 0">
    <div class="card">
      <div class="card-body">
        <span>No matching job found !!</span>
      </div>
    </div>
  </div>

  <div class="row justify-content-center">
    <div
      class="col-md-6 d-flex align-items-stretch"
      *ngFor="let job of similarJobs"
    >
      <div class="card w-100">
        <div class="card-body">
          <div *ngIf="job.featured">
            <button
              class="btn btn-circle btn-warning featured-btn d-flex align-items-center justify-content-center"
            >
              <i class="mdi mdi-star font-18"></i>
            </button>
          </div>
          <div class="d-md-flex align-items-start mb-3">
            <img
              [src]="job.image"
              alt="pic"
              width="80"
              class="rounded-lg flex-shrink-0"
            />
            <div class="ml-md-3 ml-0 mt-2 mt-md-0">
              <a
                [routerLink]="['/apps/job-detail/', job.id]"
                class="card-title font-16"
              >
                {{ job.title }}
              </a>
              <p class="mb-1">{{ job.location }}</p>
              <p>
                <span
                  *ngIf="job.jobType === 'Full time'"
                  class="badge badge-danger px-2 font-medium"
                  ><i class="fas fa-circle font-10 mr-1"></i>Full time</span
                >
                <span
                  *ngIf="job.jobType === 'Part time'"
                  class="badge badge-success px-2 font-medium"
                  ><i class="fas fa-circle font-10 mr-1"></i>Part time</span
                >
                <span
                  *ngIf="job.jobType === 'Internship'"
                  class="badge badge-primary px-2 font-medium"
                  ><i class="fas fa-circle font-10 mr-1"></i>Internship</span
                >
              </p>
            </div>
          </div>

          {{ job.description }}
        </div>
      </div>
    </div>
  </div>
</div>