Create and Name your GitHub repository AngularBasicRouting

To create a folder for your Angular project on your desktop or in any other location, use the command mkdir [folder name] in your terminal, navigating to the desired location first.

Once you've created a folder for your Angular project, open a command prompt (cmd) window in that folder and type ng new [name of your angular app] to create a new Angular application.

This is the Angular application folder

Open the angular app on any editor

To organize your components, create a folder named "components" within your Angular project's directory.

Generate 50 Components

Create 50 Angular components, each with different functionality, based on the provided list and your own examples.

Add `app.module.ts`

Ensure the app.module.ts file is set up to include the necessary imports for routing, form handling, animations, and the 50 components.

Remove `standalone: true` and `imports: []` from 50 Components

In each component's .ts file, remove the lines standalone: true and imports: [], since they are not needed in this project setup.

Update `main.ts`

Modify the main.ts file in your Angular project to configure the application's bootstrapping process, potentially including customizations or additional setup.

Update `app.component.html`

The app.component.html file now features navigation links to the 50 components, allowing users to easily access different sections of the application

This Is the sample output:

#1 component name: displayhelloworld

Display the text "Hello World" on the screen using a variable from the TypeScript file.

#2 component name: showhellobutton

Create a button, and when the user clicks the button, "Hello World" is displayed on the screen.

#3 component name: displayname

User inputs their name, and when the button is clicked, their name is displayed on the screen.

#4 component name: counter

Create a counter that increases by 1 when the user clicks a button.

#5 component name: simpleform

Create a form with text inputs and a submit button, display the submitted input data.

#6 component name: userage

Input user’s birth year, and when the button is clicked, display their age

#7 component name: usergreeting

User inputs their name, and when clicked, display a personalized greeting.

#8 component name: calculator

Create a simple calculator with add, subtract, multiply, and divide functionalities.

#9 component name: textlength

Input a string, and when the button is clicked, display the length of the string

#10 component name: currencyconverter

Input a value in one currency, convert it to another currency on button click (1 dollar = 56 Php).

#11 component name: evenoddchecker

Input a number and check if it is even or odd.

#12 component name: wordreverser

Input a word, and when the button is clicked, display the word reversed.

#13 component name: showdate

Create a button that shows the current date and time when clicked.

#14 component name: showusername

User inputs their username, and on clicking a button, their username is displayed on the screen.

#15 component name: multiplicationtable

Input a number and generate its multiplication table.

#16 component name: simplelogin

Create a simple login form with email and password fields.

#17 component name: fahrenheittocelsius

Convert temperature from Fahrenheit to Celsius when the user inputs a value.

#18 component name: bookmarklist

Allow users to input URLs and display them using anchor tags.

#19 component name: charactercounter

Input a string and count the number of characters in it.

#20 component name: palindromechecker

Input a word and check if it's a palindrome.

#21 component name: temperatureconverter

Convert temperature from Celsius to Fahrenheit and vice versa.

#22 component name: shoppinglist

Create a shopping list where users can add and remove items (use list data structure).

#23 component name: factorialcalculator

Input a number and calculate its factorial when a button is clicked.

#24 component name: todomanager

Create a simple to-do list where users can add and remove tasks (use list data structure).

#25 component name: guessnumbergame

Create a number guessing game where the user inputs guesses.

#26 component name: wordcounter

Input a string and count the number of words in it.

#27 component name: randomnumbergenerator

Generate and display a random number between a specified range when a button is clicked.

#28 component name: multiplicationchecker

Check if a number is a multiple of another number.

#29 component name: uppercaseconverter

Input a string and convert it to uppercase when the button is clicked.

#30 component name: wordshuffler

Input a word and shuffle its letters randomly.

#31 component name: bmisolver

Input height and weight, calculate and display the BMI.

#32 component name: usernamevalidator

Input a username and check its validity based on predefined rules (Create a variable).

#33 component name: interestcalculator

Input principal, rate, and time, and calculate simple interest.

#34 component name: compoundinterestcalculator

Calculate compound interest when principal, rate, time, and frequency are input.

#35 component name: fibonaccigenerator

Generate and display the first N Fibonacci numbers when a button is clicked.

#36 component name: oddsumcalculator

Input a number, and calculate the sum of odd numbers up to that number.

#37 component name: currencyformatter

Input a number and format it as currency when a button is clicked (Dollar, Php, Euro - search euro conversion).

#38 component name: randomquotedisplay

Display a random quote when a button is clicked (use list data structures).

#39 component name: uppercasegreeting

User inputs their name, and when the button is clicked, display the name in uppercase.

#40 component name: divisiblechecker

Input two numbers, and check if the first is divisible by the second.

#41 component name: namegenerator

The namegenerator component allows users to generate random names by clicking a button. It uses a list of names to generate a random selection.

#42 component name: agegenerator

The namegenerator component allows users to calculate their age based on their birthdate.

#43 component name: spellingchecker

The spellingchecker component allows users to type a sentence and checks the spelling of each word against a pre-defined dictionary.

#44 component name: englishchecker

The englishchecker component allows users to input a sentence and checks if it is written in English.

#45 component name:productlist

The weather-widget-component displays current weather information for a specified location. It utilizes an external weather API to fetch data and presents it in a user-friendly format.

#46 component name:interactive-quiz

The chatbot component allows users to interact with a conversational AI, providing a simulated human-like chat experience.

#47 component name:chatbot

The interactive-quiz component provides a user interface for taking a quiz with multiple-choice questions. It allows users to select answers, receive feedback, and track their progress.