I have dropdown which is related another dropdown with ID. I would like to change dynamically when I change dropdown value it should automatically change in another one. In backend I am using aspnet core and getting data using services.

My ponents looks like:

   ngOnInit() {    
    this.model.managementId = 1    // this should be also dynamic which I don't know how    
    this.model.mfp = this.getManagementsForProject()
    this.range = this.getRange()
  }

  getRange() {
    this.mgmtSerive.getRange(this.model.managementId).subscribe(h => this.range = h)
  }

  getManagementsForProject() {
    this.ms.getManagementsForProject().subscribe(u => this.model.mfp = u);
  }

My html dropdowns:

<div class="row">
      <div class="col-3 mt-3 labelText">
        <span class="spanText">Network</span>
      </div>
      <div class="col-9">
        <mat-form-field class="example-full-width">
          <select matNativeControl required name="managementId" 
         [(ngModel)]="model.managementId">
            <option value="-1" disabled>--Please select network--</option>
            <option *ngFor="let item of model.mfp" [ngValue]="item.managementId">
              {{ item.managementName }}
            </option>
          </select>
        </mat-form-field>
      </div>
    </div>




<div class="row">
      <div class="col-3 mt-3 labelText">
        <span class="spanText">IP Address</span>
      </div>
      <div class="col-9">
        <mat-form-field class="example-full-width">
          <select matNativeControl required name="ipAddress" [(ngModel)]="model.ipAddress">
            <option value="-1" disabled>--Available Networks--</option>
            <option *ngFor="let item of range">
              {{ item }}
            </option>
          </select>
        </mat-form-field>
      </div>
    </div>

My backend methods looks like:

        [HttpGet("range/{id}")]
        public IActionResult GetRange(int id)
        {
            var selectedNetworkRange = _context.NetworkRanges.FirstOrDefault(x => 
            x.ManagementId == id);
            var vmIpAddresses = _context.VirtualMachines.Select(x => x.IpAddress);
            if (selectedNetworkRange != null)
            {
                var cidr = selectedNetworkRange?.Start + "-" + selectedNetworkRange?.End;
                var cidrRange = IPAddressRange.Parse(cidr)
                    .AsEnumerable()
                    .Select(adr => adr.ToString());
                var result = cidrRange.Except(vmIpAddresses).ToList();
                return Ok(result);
            }

            return Ok("Something failed");
        }

    [HttpGet("managementforproject")]
    public IActionResult GetManagementForProject()
    {
        var model = from management in _context.Managements
            select new {ManagementName = management.Name, ManagementId = management.Id};
        return Ok(model);
    }

When I change management dropdown I would like dynamically update Range dropdown. I know I am using managemntId = 1 inside ngOnInit but how to change dynamically I don't know.

I have dropdown which is related another dropdown with ID. I would like to change dynamically when I change dropdown value it should automatically change in another one. In backend I am using aspnet core and getting data using services.

My ponents looks like:

   ngOnInit() {    
    this.model.managementId = 1    // this should be also dynamic which I don't know how    
    this.model.mfp = this.getManagementsForProject()
    this.range = this.getRange()
  }

  getRange() {
    this.mgmtSerive.getRange(this.model.managementId).subscribe(h => this.range = h)
  }

  getManagementsForProject() {
    this.ms.getManagementsForProject().subscribe(u => this.model.mfp = u);
  }

My html dropdowns:

<div class="row">
      <div class="col-3 mt-3 labelText">
        <span class="spanText">Network</span>
      </div>
      <div class="col-9">
        <mat-form-field class="example-full-width">
          <select matNativeControl required name="managementId" 
         [(ngModel)]="model.managementId">
            <option value="-1" disabled>--Please select network--</option>
            <option *ngFor="let item of model.mfp" [ngValue]="item.managementId">
              {{ item.managementName }}
            </option>
          </select>
        </mat-form-field>
      </div>
    </div>




<div class="row">
      <div class="col-3 mt-3 labelText">
        <span class="spanText">IP Address</span>
      </div>
      <div class="col-9">
        <mat-form-field class="example-full-width">
          <select matNativeControl required name="ipAddress" [(ngModel)]="model.ipAddress">
            <option value="-1" disabled>--Available Networks--</option>
            <option *ngFor="let item of range">
              {{ item }}
            </option>
          </select>
        </mat-form-field>
      </div>
    </div>

My backend methods looks like:

        [HttpGet("range/{id}")]
        public IActionResult GetRange(int id)
        {
            var selectedNetworkRange = _context.NetworkRanges.FirstOrDefault(x => 
            x.ManagementId == id);
            var vmIpAddresses = _context.VirtualMachines.Select(x => x.IpAddress);
            if (selectedNetworkRange != null)
            {
                var cidr = selectedNetworkRange?.Start + "-" + selectedNetworkRange?.End;
                var cidrRange = IPAddressRange.Parse(cidr)
                    .AsEnumerable()
                    .Select(adr => adr.ToString());
                var result = cidrRange.Except(vmIpAddresses).ToList();
                return Ok(result);
            }

            return Ok("Something failed");
        }

    [HttpGet("managementforproject")]
    public IActionResult GetManagementForProject()
    {
        var model = from management in _context.Managements
            select new {ManagementName = management.Name, ManagementId = management.Id};
        return Ok(model);
    }

When I change management dropdown I would like dynamically update Range dropdown. I know I am using managemntId = 1 inside ngOnInit but how to change dynamically I don't know.

• javascript
• c#
• angular
• typescript
• asp-core

Share Improve this question Follow asked Feb 3, 2020 at 9:22 Arzu SuleymanovArzu Suleymanov 69122 gold badges1313 silver badges3939 bronze badges 2

• 2 You need to detect the change in ngModel value of the first drop down using (ngModelChange) and then pass that value to bind next drop down values. – Mridul Commented Feb 3, 2020 at 9:27
• @Mridul works like charm – Arzu Suleymanov Commented Feb 3, 2020 at 17:01

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

You could implement change event on tag or click on tag.

1. Change

Your html:

 <div class="col-9">
    <mat-form-field class="example-full-width">
      <select (change)="updateID($event)" matNativeControl required name="managementId" 
     [(ngModel)]="model.managementId">
        <option value="-1" disabled>--Please select network--</option>
        <option *ngFor="let item of model.mfp" [ngValue]="item.managementId">
          {{ item.managementName }}
        </option>
      </select>
    </mat-form-field>
  </div>
</div>

Your ts:

ngOnInit() {    
    this.model.managementId = 1    // this should be also dynamic which I don't know how    
    this.model.mfp = this.getManagementsForProject()
    this.range = this.getRange()
  }
  
  updateID(event) {
  this.model.managmentId = event.something probably
  }

  getRange() {
    this.mgmtSerive.getRange(this.model.managementId).subscribe(h => this.range = h)
  }

  getManagementsForProject() {
    this.ms.getManagementsForProject().subscribe(u => this.model.mfp = u);
  }

2. Click

Your html:

 <div class="col-9">
    <mat-form-field class="example-full-width">
      <select matNativeControl required name="managementId" 
     [(ngModel)]="model.managementId">
        <option value="-1" disabled>--Please select network--</option>
        <option (click)="updateID(item.managmentId)" *ngFor="let item of model.mfp" [ngValue]="item.managementId">
          {{ item.managementName }}
        </option>
      </select>
    </mat-form-field>
  </div>
</div>

Your ts: would be the same as #1.