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 :
- app.component.html
<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>
- app.component.ts
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() {}
}
- app.module.ts
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.