How to customize the angular-material-extensions/select-country

user_14368766 0
Viewed 38

I'm developping the angular frontend of an existing API and I'm using angular-material-extensions/select-country to implement the country selection dropdown. The implementation was done and client was satisfied with how good the @angular-material-extensions/select-country looks. But I'm facing a problem when connecting the country selection to the API. For in the api, countries are designed a different way, following this interface pattern:

 country interface {
    "code": number,
    "message": String,
    "result": [
    {
     "name": String,
     "refDatas": [
       {
         "code": number,
         "name": String, 
         "translated_To_French": String
         "translated_To_German": String
         "translated_To_Spanish": String
         "translated_To_Portuguese": String
       }
     ]
   }
   ]
}

But the @angular-material-extensions/select-country library's interface is like this:

country interface {
  name: string;
  alpha2Code: string;
  alpha3Code: string;
  numericCode: string;
  callingCode: string;
}

Obviously the library needs this 5 properties to function and I just don't know how to match it to the API payload? As you can see in both sides we have "name", so name property causes no problem, but for the alpha2Code, alpha3Code, numericCode and callingCode I don't know the role that they play in the library. The only solution was to assign "code" to "numericCode", but it caused the app to break and I can't change the API design about countries either. Any help to bypass this impediment is much appreciated.

angular
1 Answers

You have way broad to achieve. First define two interfaces, one that matches the API's payload and the second that matches the library's interface. You should have these two:

export interface apiCountries {
  code: number,
  message: String,
  result: [
  {
   name: String,
   refDatas: [
     {
       code: number,
       name: String,
       translated_To_French: String,
       translated_To_German: String,
       translated_To_Spanish: String,
       translated_To_Portuguese: String
     }
   ]
 }
 ]
}
export interface libraryCountries {
      name: string,
      alpha2Code: string,
      alpha3Code: string,
      numericCode: string,
      callingCode: string,
    }


apiFetched : apiCountries = {
  code: 0,
  message: '',
  result: [
     {           
       name: '',
       refDatas: [   
         {
           code: 0,
            name: '',
            translated_To_French: '',
            translated_To_German: '',
            translated_To_Spanish: '',
            translated_To_Portuguese: ''
          }
         ],
       }
    ],
}

data : libraryCountries = {
    name: '',
    alpha2Code: '',
    alpha3Code: '',
    numericCode: '',
    callingCode: '',            
}  

dataCountries: libraryCountries[]
predefinedCountries : libraryCountries[]

Then create getCountries() function:

getCountries() {
      return this.service.serviceMethodToFetchCountries()
      .pipe(
        map((response) => response)
      ).subscribe( (obj) => {
        for (const nat of Object.values(obj)[2]) {
             for (const data of nat.refDatas) {
               this.data = {
                name: data.name,
                alpha2Code: data.name.substring(0,2),
                alpha3Code: data.name.substring(0,3),
                numericCode: data.code.toString(),
                callingCode: ''
              };
              this.dataCountries.push(this.data);
              this.predefinedCountries = this.dataCountries;
             }

        }; }

       )

    }

And make:

ngOnInit(): void {
  this.getCountries()
}

And then pass the predefinedCountries variable to [countries] inside the template i.e [countries]="predefinedCountrie".

user_111106100
Related