I have created a component which would show the respective countries based on the city user selects using PrimeNg
.
If user selects London checkbox & clicks on submit, Request should go to Backend API and fetch the country name and show on UI as: Selected city is in UK.
Backend JSON Response:
data: {
"country" : "UK",
"status" : "success"
}
Project files are:
<h5>Select City</h5>
<div class="p-field-checkbox">
<p-checkbox name="group1" value="New York" [(ngModel)]="selectedCities" inputId="ny"></p-checkbox>
<label for="ny">New York</label>
</div>
<div class="p-field-checkbox">
<p-checkbox name="group1" value="San Francisco" [(ngModel)]="selectedCities" inputId="sf"></p-checkbox>
<label for="sf">London</label>
</div>
<p-button label="Submit"></p-button>
import { Component } from '@angular/core';
import {MenuItem} from 'primeng/api';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
selectedCities: string[] = [];
checked: boolean = false;
ngOnInit() {}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { ButtonModule } from 'primeng/button';
import { CheckboxModule } from 'primeng/checkbox';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
CheckboxModule,
FormsModule,
ButtonModule
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
UI Looks as below:
I am unable to figure how to store the selected city and show the corresponding country as I am new to Angular Development.
Any leads or help is highly appreciable.
app.component.html
<h5>Select City</h5>
<ng-container *ngFor="let city of cities; let i = index">
<div class="p-field-radiobutton">
<p-radioButton name="city" [value]="city" [(ngModel)]="selectedCity" id="i" (onClick)="selectedCountry = null">
</p-radioButton>
<label for="i">{{ city }}</label>
</div>
</ng-container>
<br>
<p-button label="Submit" (onClick)="onSubmit()"></p-button>
<br>
<br>
<label *ngIf="selectedCountry">
Selected city is {{ selectedCity}}<br>Selected country is {{selectedCountry}}</label>
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
selectedCity: string;
selectedCountry: string = null;
checked: boolean = false;
cities: string[] = [
'New York',
'London',
'Delhi',
'Mumbai',
'Chennai',
'Hongkong',
'Dhaka',
];
ngOnInit() {}
onSubmit() {
if (!this.selectedCity) {
alert('Please select a city');
return;
}
this.selectedCountry = this.getCountryName();
}
getCountryName() {
// make your api call here
// I am just mocking
let country;
switch(this.selectedCity) {
case 'New York':
country = 'USA';
break;
case 'London':
country = 'UK';
break;
case 'Delhi':
case 'Mumbai':
case 'Chennai':
country = 'India';
break;
case 'Hongkong':
country = 'China';
break;
case 'Dhaka':
country = 'Bangladesh';
break;
}
return country;
}
}
I've implemented a working demo at Stackblitz with radio buttons.
As I don't know your backend API. So, I've added predefined data for the demo.
See if that works for you.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.