Everything about Dependent Dropdown in Angular: Country State City Dropdown

Опубликовано: 11 Октябрь 2024
на канале: Coding Birds Online
1,451
13

Learn everything about Dependent Dropdown in Angular with a Country-State-City cascading dropdown example.

In this step-by-step guide, you'll learn how to build dynamic cascading dropdowns in Angular and PHP REST APIs.

In this video you will see Dependent Dropdown in Angular using REST APIs: Dependent dropdowns mean one dropdown is dependent on another dropdown For example if we consider the example of
Country State City dropdown in Angular, so here State is dependent on Country, City is dependent on the state.

In the tutorial, we are using PHP REST API developed in core PHP and MySQL as a Database.

Timestamps:

00:10 - Dependent & cascading dropdown in Angular
00:58 - Demo: Country State City dropdown
02:32 - Angular application code walkthrough
10:00 - Pointing of PHP REST APIs from the environment file
11:35 - REST API code walkthrough
12:04 - Importing the Country, State & City SQL files to the database
15:32 - Avoiding CORS Error in local
17:13 - Call REST API from POSTMAN
21:42 - Let's Recap again

💡 Setup REST APIs in your local:
Step 1: Create a folder named 'country-state-city-dropdown-api' inside your '/xampp/htdocs/'
Step 2: Download all files from https://github.com/codingbirdsonline/... inside the folder.
Step 3: Create database 'dependent_dropdown' and import all 3 SQL files.

💡 Setup Country State City Angular App UI Code:
Step 1: Either clone the repository from https://github.com/codingbirdsonline/... dependent-dropdown and hit the 'npm install' command.
Step 2: Update your REST API URL to the environments.ts file
OR
🌍 Visit #CodingBirdsOnline for a detailed explained code.
https://codingbirdsonline.com/country...

If you found this video helpful, please like, share, and subscribe to our channel for more tutorials
on web development and Angular. Your feedback is valuable, so feel free to leave your questions and comments below.
Thank you for watching! 🚀

#angular #typescript #php #frontend #frontenddeveloper #fullstack #restapi