Data Binding - Dropdown selection and displaying relatively Data

I have a dropdown with country code and university info. displayed for all the countries. when user pick a countryCode from the dropdown, I need to display University info related to that country which is selected from the dropdown. It's databinding issue where I am having problems. My Files are:

app.component.ts

import { Component, OnInit } from '@angular/core';
import { CellClickedEvent, ColDef } from 'ag-grid-community';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { FormGroup, FormControl, Validators} from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'University API Info - http://universities.hipolabs.com/search?name=middle';
  cCodeName = ['AG', 'CA', 'US']; //Dropdown list values

  rowData$: Observable<any[]> | undefined;

  colDefs: ColDef[] = [
    { field: 'name', width: 400, rowGroup:true, sortable: true, filter: true},
    { field: 'web_pages'},
    { field: 'country'},
    { field: 'alpha_two_code'}
  ];

  defaultColDef: ColDef = {
    sortable: true, filter: true
  }
  //autoGroupColumnDef = { minWidth: 20 };
  groupDefaultExpanded = 1;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    //API data
    this.rowData$ = this.http.get<any[]>('http://universities.hipolabs.com/search?name=middle');    
  }

  onCellClicked(event: CellClickedEvent) {
    console.log(event.value); 
  }


  //selectedVal: any;
  public selectedVal: any;
  public valueSelected(_val:any) {
    console.log('selectedVal: ', this.selectedVal);    
  }

}

app.component.html:

<div class="container">
  
  <h1> {{ title }}</h1>


<select style="margin-bottom: 30px;"
    [(ngModel)]="selectedVal" (ngModelChange)="valueSelected($event)">
    <option default [ngValue]="null">Pick a Country</option>
    <option *ngFor="let cName of cCodeName">{{cName}}</option>
  </select>

  <input type="text" placeholder="Optional -- Enter Country  " style="margin-left: 15px;"/>
  <div><b>University Info.</b></div>
  <div *ngFor="let data of rowData$|async">
    <ng-container *ngIf = "(data.alpha_two_code == 'CA' || 
      data.alpha_two_code == 'GB' || data.alpha_two_code == 'US')">
        <b>Name: </b>{{data.name}}
        <b>Web Page: </b>{{data.web_pages}}
        <b>Country: </b>{{data.country}}
        <b>Code: </b>{{data.alpha_two_code}}
    </ng-container>

  </div>

  <ag-grid-angular #agGrid
    class="ag-theme-alpine"
    style="height:500px; width: 90%; margin-top: 20px;"
    [rowData]="rowData$ | async"
    [columnDefs]="colDefs"
    [defaultColDef]="defaultColDef"
    [groupDefaultExpanded]="groupDefaultExpanded"
  
    (cellClicked)="onCellClicked($event)" >
  </ag-grid-angular>

</div>

I need to display the data in the grid but I was testing it just in a divContainer for now.

if someone can help me, I would really appreciate.

thanks

I have a dropdown with country code and university info. displayed for all the countries. when user pick a countryCode from the dropdown, I need to display University info related to that country which is selected from the dropdown. It's databinding issue where I am having problems.