How to change dynamically dropdown values in Angular 8?

Question

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 components 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.

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
– Mridul, Commented Feb 3, 2020 at 9:27

Miroslav Maksimovic · Accepted Answer · 2020-02-03 09:38:21Z

1

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

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);
  }

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.

answered Feb 3, 2020 at 9:38

Miroslav Maksimovic

5496 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Arzu Suleymanov Over a year ago

what should be instead of event something?

Miroslav Maksimovic Over a year ago

You console log data and see what is there, for example, if it is an object like this: { value: 15 }, then you say: updateID(event) { this.model.managmentId = event.value } But in second case, on click method you can say directly: updateID(id: string) { this.model.managmentId = id }

Collectives™ on Stack Overflow

How to change dynamically dropdown values in Angular 8?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related