How to create a Dictionary with Key/Value pairs in angular?

Question

Using the concept Dictionary I want to do the following task.

1. Closed
2. Open
3. Cancelled
4. Rejected
5. Saved
6. Draft
7. Pending Approval

This the different statuses . Now my table is like following

 Purchase Order            Status
 PO1                       closed
 PO2                       pending_approval
 PO3                       open
 PO4                       Draft
 PO5                       Cancelled
 PO6                       Rejected
 PO7                       Saved

Now I need each status in different color using the badge

Method to use is dictionary method.

1. Can anybody tell me what is dictionary method?(brief explanation)

2. And Kindly give me the solution too

Answer 1

Courtesy from Konrad Rudolph answer

Dictionary is the “correct” name of the interface (= the ADT), i.e. an associative container that maps (usually unique) keys to (not necessarily unique) values.

To summarize: a dictionary is an ADT that maps keys to values. There are several possible implementations of this ADT, of which the hash table is one. Hash is a misnomer but in context it’s equivalent to a dictionary that is implemented in terms of a hash table.

Solution 1

Straight forward you can use Map type as recommendation

    //Using Map
    let map = new Map<string, string>();

    map.set("PO1", "closed"); 
    map.set("PO2", "pending_approval");
    map.set("PO3", "open");
    map.set("PO4", "Draft");
    map.set("PO5", "Cancelled");
    map.set("PO6", "Rejected");
    map.set("PO7", "Saved");
    
    //get item
    console.log(map.get('PO1'));
    console.log(map.get('PO5'));
    
    //has item
    console.log(map.has('PO1'));
    console.log(map.has('PO5'));
    
    //delete item
    console.log(map.delete('PO1'));
    console.log(map.delete('PO5'));

Solution 2

But if you want custom additional methods you can also create a Dictionary implementation in typescript like as shown below

    //Using Dictionary
    let dict = new Dictionary();
   
    dict.set("PO1", "closed"); 
    dict.set("PO2", "pending_approval");
    dict.set("PO3", "open");
    dict.set("PO4", "Draft");
    dict.set("PO5", "Cancelled");
    dict.set("PO6", "Rejected");
    dict.set("PO7", "Saved");
    
    //get item
    console.log(map.get('PO1'));
    console.log(map.get('PO5'));

    //has item
    console.log(map.has('PO1'));
    console.log(map.has('PO5'));

    //delete item
    console.log(map.delete('PO1'));
    console.log(map.delete('PO5'));

dictionary.ts

    export class Dictionary {
      items = {};
      constructor() {
        this.items = {};
      }
      public has(key) {
        return key in this.items;
      }
      public set(key,value) {
        this.items[key] = value;
      }
      public get(key) {
        return this.items[key];
      }
      public delete(key) {
        if( this.has(key) ){
          delete this.items[key]
          return true;
        }
        return false;
      }
    }

Working Demo