tripathics / state-district-maintainance

State District Maintainance - Task given by Jivrus for Internship

State & District Maintainance

A webpage to maintain state & district using HTML, CSS and Angular

Components overview

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.

state-district.service

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

Properties:

• STATES: State[]: An array of State. States and districts in the app are provided from here.

Methods:

• getStates(): Returns the STATES array.
• addState(stateName: string): Creates a newState provided the name of the state and appends to the STATES array.
• getDistricts(stateId: number): Returns the list of districts under a state provided the stateId.
• addDistrict(stateId: number, districtName: string): Creates a district using the districtName provided and appends to the list of districts under the state having id of stateId.

Reference

Interfaces

• State, District:
  • TS file: place.ts

Services

• state-district service:
  • TS Class: state-district.service.ts

Components

• 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