How to show different text content for dynamic ngClass in Angular17 --

Question

I am posting my question here although I have doubt in my mind if this is at all achievable. My case scenario is a bit typical. So please bear with me if some of it appears verbose/weird.

I am saving job description through my nG17 and .NetCore 8 app. The Job model has an enum type as one of its properties. So naturally upon ef-migration, the corresponding table column is of integer type. Saving new job is working okay. Now upon retrieving data from db API is giving me integer values for the 'type' field. What I want, is to show corresponding job-type text name instead of the integer value in my job details column. Also, different css classes[with different color codes] to be applied for the job types. Let me post some of the relevant code blocks to portray what I have done. It will be easier for you to understand.

Job.cs -

public class Job
{
    public int Id { get; set; }
    public string Title { get; set; } = string.Empty;
    public string Description { get; set; } = string.Empty;
    public string Location { get; set; } = string.Empty;
    public Type? Type { get; set; }
    public string CompanyName { get; set; }
}

Type enum -

public enum Type
{
    Permanent,
    Temporary,
    Internship,
    Contract
}

WebAPI JobDetails endpoint -

[HttpGet("{id}")]
[Authorize(Roles ="Employer, Employee")]
public async Task<ActionResult> GetSelectedJobDetails(int id)
{
    if(id>0)
    {
        var selectedJobDetails = await _dbContext.Jobs.Where(j => j.Id == id)
                                       .Select(g => new Job
                                       {
                                           Id = g.Id,
                                           Title=g.Title,
                                           Description=g.Description,
                                           CompanyName=g.CompanyName,
                                           Type= (Hirect.API.Models.Type?)(g.Type),
                                           LastDate=g.LastDate,
                                           Location=g.Location,
                                       }).FirstAsync();

        if(selectedJobDetails!=null)
        {
            return Ok(selectedJobDetails);
        }
        else
        {
            return NotFound(new
            {
                Message = "Cannot find details corresponding to the selected job!"
            });
        }
    }
    else
    {
        return BadRequest(new
        {
            Message= "Cannot find details corresponding to the selected job!"
        });
    }
}

Inside my angular component where I am binding the fetched values to html controls,

<div class="row" style="margin-top:13px">
            <div class="col-md-6">
                Type: 
            </div>

            <div class="col-md-6" [ngClass]="{'permanent_type':selectedJobDetails.type=='0',
                                              'temporary_type':selectedJobDetails.type=='1',
                                              'internship_type':selectedJobDetails.type=='2',
                                              'contract_type':selectedJobDetails.type=='3'
            }">
                {{selectedJobDetails.type}}
            </div>
            </div>

Finally the css file for this component -

.permanent_type
{
    color:white;
    background-color: darkblue;
    content: 'Permanent';
    border-radius: 7px;
}

.temporary_type
{
    color:white;
    background-color: lightcoral;
    content: 'Temporary';
    border-radius: 7px;
}

.internship_type
{
    color:blue;
    background-color: goldenrod;
    content: 'Internship';
    border-radius: 7px;
}

.contract_type
{
    background-color: green;
    color: white;
    content: 'Contract';
    border-radius: 7px;
}

As you can see I created 4 different css classes for the 4 types of jobs and used ngClass to dynamically apply classes based on value of selectedJobDetails.type. I tried putting 'content' to each of the classes to apply the different texts. The css classes are being applied absolutely correctly. I'm getting different colored divs for corresponding job types. But the values are still showing as 0,1,2,3. What I want instead is Permanent for 0, Temporary for 1, Internship for 2 and Contract for 3, as the enum Type shows.

So, help needed. How can I do this? Is this possible? What approach should I adopt? Where does the code/logic need modification/addition in order to help me achieve my goal? What do I do? As you can see, putting 'content' inside the css classes manually didn't do it. Please suggest some neat and effective tweaks!

Thanking you in anticipation,

Answer 1

First define the constant enum outside the component, then create a property that will store this enum value, so that you can use it in the HTML:

export enum TypeEnum {
  Permanent,
  Temporary,
  Internship,
  Contract,
}

export class SomeComponent {
  typeEnum: typeof TypeEnum = TypeEnum; // <- updated here!
  selectedJobDetails = { type: 0};

HTML Usage:

<div class="row" style="margin-top:13px">
   <div class="col-md-6">
            Type: 
        </div>
        <div class="col-md-6" [ngClass]="{'permanent_type':selectedJobDetails.type=='0',
                                          'temporary_type':selectedJobDetails.type=='1',
                                          'internship_type':selectedJobDetails.type=='2',
                                          'contract_type':selectedJobDetails.type=='3'
        }">
            {{typeEnum[+selectedJobDetails.type]}}
        </div>
        </div>