how to create a dependent drop down list using angular?

I have a drop down list with the product names and now I want to create another drop down list which will display product sub types depending on the product selected. For example if the product name laptop is selected from a drop down list, I want to display another drop down list which contains names of laptops. How do I do this without making any changes to the backend?

export class Service {

  constructor(protected httpClient: HttpClient) {

  }

  public getTemplateData(start:number,limit:number):Observable<any>{
    return this.httpClient.post('/p-services/atomic-services/TemplateData',{
      startIndex:start,
      pageLimit:limit
    });
  }
      
export class ConfigManagerComponent {

  productData:any;
  totalRecords: number = 0;
  pageSize: number = 5;
  startIndex: number = 0;
  pageIndex: number;
DROPDOWN_LIST: templateData[]; 
  
  constructor(private Service: Service, private _formBuilder: FormBuilder,  private dialog: MatDialog) { }

  ngOnInit() {

  CodeNextBtn() {
          this.Service.getTemplateData(0,this.pageSize).subscribe(
            (templateResponse) =>{
              this.productData=         //binding database values to productData
  templateResponse.productData;
              this.totalRecords=templateResponse.totalRecords;
              this.referenceShowProgressBar
              this.DROPDOWN_LIST = templateResponse.productData;
  

            },
             (error) => {
              console.error(error);
              this.referenceShowProgressBar = false;
            }
            
          );

        } 

}

export class templateData{
  name?: string;
  sub_type?:string;
access_type?:string;
 
}
<mat-card style="margin-top: 10px;" *ngIf="showDetails">
  <div>
    <h1 class="header-result"> Data</h1>
  </div>

  <form [formGroup]="templateDataFormGroup" fxLayout fxLayout.xs="column" fxLayoutGap="10px">



<mat-form-field appearance="fill">
  <mat-label>Product Name</mat-label>
  <select matNativeControl >
    <option *ngFor="let DROPDOWN_LIST of DROPDOWN_LIST" [value]="DROPDOWN_LIST.product_name"
      [selected]="DROPDOWN_LIST.product_name">
      {{DROPDOWN_LIST.product_name}}
    </option>
  </select>
</mat-form-field>
</form>
</mat-card>

Source: Angular Questions