Having an issue with displaying the country name and country code in a table using the Angular7 custom pipe

Question

Having an issue with displaying the country name and country code in a table using the Angular7 custom pipe

country code: "ab", "aa", "fr", ...

I need to create a custom pipe that will convert a countryCode into a countryName, such as:

"ab" → "Abkhazian"

,

"ch" → "Chinese"

,

"fr" → "France"

(and so on) when displayed in my table.
Even though the data in the request body must still be in countryCode format to send it to restfulApi.Can.
Any assistance on this matter would be greatly appreciated!
Thank you!

(I am utilizing angular 7)

*Note: The reason why the country code is displayed in my table is because I sent the country code to the POST method API. Therefore, making a GET request to display it will render the country code.

javascript html angular typescript

Answer 1

Answer №1

country-convertor.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'countryConvertor'
})
export class CountryConvertorPipe implements PipeTransform {

  transform(countryCode: string, args?: any): String | undefined {

    //A service holds a map with country codes as keys and descriptions as values
    const countryCodeMap: Map<string,string> = 'retrieve this map from a service' 
    return countryCodeMap.get(countryCode);
  }

}

To use the country code convertor in your HTML:

<td> {{ countryCode | countryConvertor }} </td>

Answer 2

country-convertor.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'countryConvertor'
})
export class CountryConvertorPipe implements PipeTransform {

  transform(countryCode: string, args?: any): String | undefined {

    //A service holds a map with country codes as keys and descriptions as values
    const countryCodeMap: Map<string,string> = 'retrieve this map from a service' 
    return countryCodeMap.get(countryCode);
  }

}

To use the country code convertor in your HTML:

<td> {{ countryCode | countryConvertor }} </td>

Having an issue with displaying the country name and country code in a table using the Angular7 custom pipe

Answer №1

Similar questions

When using Angular 2 Forms, the formControl.touched property will only be set to true when the text area is clicked, rather

Creating a responsive grid layout with HTML and CSS

The shared module for next/router is not found in the shared scope default within Next.js and @module-federation/nextjs-mf

comparing caching with jquery deferred against promise

What is the method for embedding a concealed form within a table?

Stop Angular 2 from loading on Internet Explorer

Creating a basic image carousel with JavaScript, CSS, and HTML

An iron-dropdown made of polymer featuring a trigger button made of paper-icon-button

Is it possible for node.js to execute promises without needing to await their fulfillment?

Displaying a component in a router view based on specific conditions

Inserting HTML code into the polymer

Events in the backbone view fail to trigger after a re-render

Change the color of specific elements in an SVG using React

Unlocking the Count of ng-repeat Elements in Angular JS 1

Using an array as the source for your Mui Autocomplete instead of JSON

Encountering the error "ReferenceError: __extends is not defined" is a common issue when modifying the rollup.config.js commonjs function in projects that use the ReactJS library

Tips for displaying lesser-known checkboxes upon clicking a button in Angular

Tips for creating objects with optional properties

Error encountered in Angular 7.2.0: Attempting to assign a value of type 'string' to a variable of type 'RunGuardsAndResolvers' is not allowed

Adjust image size while maintaining aspect ratio