I created a folder and install angular in folder.

Created components folder using terminal. code: ng generate component components (name of components).

Create a app.module.ts inside of the app folder.

in app.module create a route const to provide routing in components.

Create a Ngmodule for imports, declaration, providers, and bootstrap. Export class AppModule.

In app.component.html create a html code to provide the link of the components

#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: randomcolorgenerator

Generate a random color each time a button is clicked. The color will be displayed as both the color name (in hex code or RGB) and the background color of an element.

#42 component name: qouteoftheday

Will display a random motivational quote each time the component is loaded or a button is clicked. You can use an array of quotes and select one at random.

#43 component name: imagecarousel

A carousel of images that users can navigate through. Users can click "Next" and "Previous" buttons to cycle through the images.

#44 component name: stopwatch

A simple stopwatch. Users can start, stop, and reset the stopwatch. It will display the elapsed time in seconds.

#45 component name: passwordstrengthchecker

Allow the user to input a password and display the strength of the password based on length, use of numbers, special characters, and uppercase letters.

#46 component name: quizgame

This component will present a question to the user, allow them to select an answer, and provide feedback on whether the answer is correct or not.

#47 component name: timer

This component will allow the user to set a countdown timer. The user can input a time in seconds or minutes, and the countdown will start when they press a button. It will display the remaining time and stop when the timer reaches zero.

#48 component name: colorpicker

This component will allow users to select a color from a palette and display the selected color's name and a sample of that color.

#49 component name: weather-widget

This component will allow users to input a city name and fetch the current weather information for that city.

#50 component name: moodtracker

Users can select their mood from a predefined list (e.g., Happy, Sad, Neutral, Excited, Angry). When they select a mood and submit, it displays the selected mood on the screen along with the date and time , Users can also see a history of their mood entries.

github: https://github.com/RodelCalda/50-Angular-Components.git

*