Multi select drop down in an ag grid

Question

I am trying to implement a multi select drop down inside a ag grid, but i am unable get anything.

My code is as below.

In app.componet.ts i have(Inside a columnDefs)

{headerName: 'product', field:'product', editable: this.editFunctionAll(this),cellRenderer: 
"productComponent" , width:120},

Then i have another component named as productComponent and i have as below:

@Component({
selector: 'lma-child',
template: `
<ng-select [items]="cities2"
               bindLabel="name"
               bindValue="id"
               [multiple]="true"
               placeholder="Select cities"
               [(ngModel)]="selectedCityIds">
</ng-select>
`});

 export class ProductComponent  {
 cities2 = [
   {id: 1, name: 'Vilnius'},
   {id: 2, name: 'Kaunas'},
   {id: 3, name: 'Pavilnys', disabled: true},
   {id: 4, name: 'Pabradė'},
   {id: 5, name: 'Klaipėda'}
 ];
 }

Here i am getting the ag grid cell as a just editable field.Not able catch whats happening. Please help me in this.

Regards!