How to change dropdown value from child component in angular 8

Question

Tried to change dropdown value from child component in angular 8 but i do not know how to do it.If anyone know please help to find solution.

If i click France button want to set dropdown value France.
If i click Germany button want to set dropdown value Germany.
If i click Italy button want to set dropdown value Italy.

app.component:

<select name="city" class="rounded-inputs20 select-select col-md-3" (change)="onChange($event.target.value)">
  <option *ngFor="let country of countries"  [value]="country.id">{{country.name}}</option>
</select>

body.component:

<button (click)="changeVal('France')">France</button>

<button (click)="changeVal('Germany')">Germany</button>

<button (click)="changeVal('Italy')">Italy</button>

Demo::https://stackblitz.com/edit/angular-dropdown-geishz?file=app%2Fapp.component.html

Answer 1

You need to implement event binding here to pass the data from body component to app component and for which you need to make use of Output() and EventEmitter() .

So modified files:

body.component.ts:

import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-body',
  templateUrl: './body.component.html',
  styleUrls: ['./body.component.css']
})
export class BodyComponent implements OnInit {

  @Output() valueChange = new EventEmitter()

  constructor() { }

  ngOnInit() {
  }

  changeVal(val){
    this.valueChange.emit(val);
  }

}

Include [(ngModel)]='selectedCountry' to track the dropdown changes in app component html as follows,

app.component.html:

<p>
    App Component:
</p>

<select name="selectedCountry"  [(ngModel)]='selectedCountry' class="rounded-inputs20 select-select col-md-3" (change)="onChange($event.target.value)">
  <option *ngFor="let country of countries; let i = index" [value]="country.id"> 
    {{country.name}}</option>
</select>


<app-body (valueChange)="getValueChange($event)"></app-body>

In above code, (valueChange)="getValueChange($event)" is where you receive the data from the respective button clicked.

And then in app component ts file, you can include a function to handle the button click changes happen in body component and change the dropdown selection by setting the value of this.selectedCountry = selectedOption.id,

  getValueChange(val) {
    const selectedOption = this.countries.find(x => x.name == val);
    this.selectedCountry = selectedOption.id;
    this.onChange(selectedOption);
  }

app.component.ts:

import { Component, OnInit  } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  name = 'Angular 5';

  cities = {};

  countries = [{
    id: 1, name: 'France' 
  },
  {
    id: 2, name: 'Germany' 
  },
  {
    id: 3, name: 'Italy' 
  },
  ];

  selectedCountry: any = this.countries[0].id;

  ngOnInit() {
    this.cities = this.countries.filter(x => x.id == 1);
  }

  onChange(deviceValue) {
    this.cities = this.countries.filter(x => x.id == deviceValue);
    console.log('onchange ', deviceValue)
  }

  getValueChange(val) {
    const selectedOption = this.countries.find(x => x.name == val);
    this.selectedCountry = selectedOption.id;
    this.onChange(selectedOption);
  }

}

Forked Stackblitz:

https://stackblitz.com/edit/angular-dropdown-65tfxg