A webpage to maintain state & district using HTML, CSS and Angular
App components:
<app-root>
: The root component which angular includes by default in index.html<app-header>
: This is the heading of the page cotaining the title- "State & District Maintainance"<app-state-view>
: This provides the interface to view states from a dropdown menu. It has two child components:<app-state-adder>
: On clicking the Add New button, this component appears showing an input box, ✔️ (add button) and ❌ (cancel button).
Add a new state into the states list using this component.<app-district-view>
: To view districts under the selected state. Has one child component:<app-district-adder>
: Same as<app-state-adder>
, but adds a district under the selected state from input box.
The states and districts in the app are provided by the state-district service. The app is just a frontend so it stores the state & districts in STATES
array- a property of the state-district service.
State and District are implemented in place.ts:
export interface State {
id: number;
name: string;
districts: District[];
}
export interface District {
id: number;
name: string;
}
STATES: State[]
: An array ofState
. States and districts in the app are provided from here.
getStates()
: Returns theSTATES
array.addState(stateName: string)
: Creates anewState
provided the name of the state and appends to theSTATES
array.getDistricts(stateId: number)
: Returns the list of districts under a state provided thestateId
.addDistrict(stateId: number, districtName: string)
: Creates a district using thedistrictName
provided and appends to the list of districts under the state having id ofstateId
.
- State, District:
- TS file: place.ts
- state-district service:
- TS Class: state-district.service.ts
- app-state-view:
- TS Class: state-view.component.ts
- Template: state-view.component.html
- app-state-adder:
- TS Class: state-adder.component.ts
- Template: state-adder.component.html
- app-district-view:
- TS Class: district-view.component.ts
- Template: district-view.component.html
- app-district-adder:
- TS Class: district-adder.component.ts
- Template: district-adder.component.html