show input text directly it doesn't work when the value of dropdownlist changes because of another dropdownlist

Issue

I created dynamic dropdown lists cascading categories and subcategory, I created two dropdownlists, dropdownlist subcategories fill by categories corresponds, I want at the same time and directly display input type because of condition *ngIf="soucategory_id ==1", in my case it is mandatory to change dropdownlist Subcategories, how to solve this problem? show.component.ts

 constructor() { }
  ngOnInit(): void {

  }

  ChangeCategory(category:any) {
    this.souscategories = this.souscategoriesAll.filter((item:any) => item.category_id == category.target.value);
    console.log(this.souscategories)
  }

  ChangeSoucategory(souscategory:any) {
    this.soucategory_id = souscategory.target.value;
  }

show.component.html

<div class="form-group">
     <label>Categories <span class="text-hightlight">*</span></label>
     <select  class="form-control" (change)="ChangeCategory($event)">
        <option [value]="0">--select--</option>
        <option [value]="c.id" *ngFor="let c of categories">{{ c.name }}</option>
     </select>
   </div>

   <div class="form-group">
    <label>Souscategories <span class="text-hightlight">*</span></label>
    <select  class="form-control" (change)="ChangeSoucategory($event)">
       <option [value]="s.id" *ngFor="let s of souscategories">{{ s.name }}</option>
    </select>
   </div>
    
    <div class="form-group" *ngIf="soucategory_id==1">
        <label>type <span class="text-hightlight">*</span></label>
        <input type="text" name="type" id="type" class="form-control"/>
    </div>

Solution

After asking you for clarification, I created a demo using your code, but made some changes.

I mainly removed css classes to reduce the noise, gave them the correct type, corrected spelling, etc.

The only thing that I drastically changed was to create a getter needInput which encapsulates the subCategoryId === 1 logic.

Here is the demo

Answered By - skouch2022