How to fetch data from the backend for primeng drop down

When using components in primeng depending on the framework of your choice which may be angular or react or some other framework. We will be discussing today, using the primeng component to fetch data from the backend.
What you need to know about using the primeng component is you need to go to their documentation using this url:www.primefaces.org/primeng/dropdown, this link takes you straight to the dropdown component.
then you install primeng to your application using the following command.

npm install primeng --save
npm install primeicons --save

once they have been installed successfully you would see the following imports

import {AccordionModule} from 'primeng/accordian';
import {MenuItem} from 'primeng/api';

this would be part of your import array in your module.
Then, you import the primeng dropdown by adding the following command to your import array.

import {DropdownModule} from 'primeng/dropdown';

NB: If you have been using various components ranging from material U.I to primeng and several others you notice that any component you use requires you to import the module containing the component,
for efficiency and to minimize the size of the application during the build and increase the efficiency of the application.You can try to import all the components you would use in your application in one module and the export them so you can import them wherever you want to use them in your application.
The lesser the time to build the faster the application.
You create an empty array and you initialise it, after that you subscribe to a service you have created which will contain a function getting all the data from the backend.
Then you go to your template which will contain a customized code of the primeng snippet of code which is:

<p-dropdown [options]="cities" [(ngModel)]="selectedCity" optionLabel="name"></p-dropdown>

where options will contain the name that encompasses all the data you are getting from the backend. In this instance, I will be using mock data to explain exactly how it works in the backend it the same principles.
The code snippet contains mock data gotten from primeng documentation.

interface City {
    name: string,
    code: string
}

export class DropdownDemo {

    cities: City[];

    selectedCity: City;

    constructor() {
        this.cities = [
            {name: 'New York', code: 'NY'},
            {name: 'Rome', code: 'RM'},
            {name: 'London', code: 'LDN'},
            {name: 'Istanbul', code: 'IST'},
            {name: 'Paris', code: 'PRS'}
        ];
    }

}

this is a mock data but with an array name of cities which is the name initialised on the top code snippet, now for you to filter through and pick from one of the array options which could be either the name or the code from the options provided. You use the "optionLabel" which can be equal to any of the two elements assigned values which are "name" and "code". if you use the element "name" the drop-down will contain these values: 'New York', 'Rome', 'London', 'Istanbul', and 'Paris'. In that exact order. If you choose to say the optionLabel equals "code" instead you would see the following values: 'NY', 'RM', 'LDN', 'IST', and 'PRS'. In that exact order.

IN CONCLUSIONS

You can easily replicate these processes when working with a live backend it works the same way.
That's it, for now, happy coding.