Cascading dropdown of data in the same table

Question

I am trying to do a cascading dropdown whereby states selected will contain areas of individual states. The slight problem is that they are all together inside the same table in the database.

This is what the structure of the db looks like

for states

     {id: 2526, code: 's_abuja', label: 'Abuja', descr: '', category: 'state'}
     {id: 2527, code: 's_anambra', label: 'Anambra', descr: '', category: 'state'}
     {id: 2528, code: 's_enugu', label: 'Enugu', descr: '', category: 'state'}
     {id: 2529, code: 's_akwa_ibom', label: 'Akwa Ibom', descr: '', category: 'state'}

for areas

      {id: 1377, code: 's_abia_1', label: 'Aba North',descr:'',category:'local_government_area'}
      {id: 1378, code: 's_abia_2', label: 'Aba South', descr: '', category: 'local_government_area'}
      {id: 1394, code: 's_abuja_1', label: 'Abaji', descr: '', category: 'local_government_area'}
      {id: 1395, code: 's_abuja_2', label: 'Bwari', descr: '', category: 'local_government_area'}

In my angular application, I have applied this formula on the select tag

          <select
                class="form-control"
                id="field_civilState"
                name="civilState"
                formControlName="civilState"
                (change)="onChange($event.target.value)"
              >

.ts file import { IDictionary } from '/model/dictionary.model';

            civilStates: IDictionary[];
            lgas: IDictionary[];
          
           ngOnInit(){
           this.lgas = this.civilStates.filter(x => x.category === 1)[0].category;
         }

         onChange(dataValue) {
         this.lgas = this.civilStates.filter(x => x.category === dataValue)[0];
         }

Can anyone help solve this dilemma

Answer 1

.ts

 public tempLga: any[] = [];

 onChange(dataValue): void { 
 this.tempLga = [];
 this.tempLga = this.lgas.filter(e => e.code.includes(dataValue));
 }

.html

       <select
            class="form-control"
            id="field_civilState"
            name="civilState"
            formControlName="civilState"
            (change)="onChange($event.target.value)"
          >

       <select class="form-control">
                <option [ngValue]="null">Please Choose..</option>
                <option *ngFor="let data of tempLga" [value]="data.id"> 
                  {{data.label }}</option>
              </select>