# ACTIVITY 8: Angular Components

I created a folder and install angular in folder.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726810265799/d5ba047d-e78a-46df-ac84-42472d21cb65.png align="center")

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726810618734/bf8569b3-c147-47cc-bd31-e09cae08f025.png align="center")

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726585012415/9a7048e2-9109-4ec1-80ac-e6c374d1a6e6.png?auto=compress,format&format=webp align="left")

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726810754984/57c848b2-f934-47d9-9dfa-74f89c91c586.png align="left")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726810932541/9de7d0b8-d22f-4a47-9dcd-656e28cbfdf9.png align="left")

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726810833416/046c844b-88ff-42ea-a43c-b8d969199409.png align="left")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726811011321/2d3b7408-6a71-459f-b19e-ca6b02707f52.png align="left")

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726811087266/fe405941-428a-4bfa-b547-fc67c67de6cc.png align="left")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726811121167/3abdec4c-e3d6-4803-8229-9ed9f20605f0.png align="left")

**#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](https://github.com/RodelCalda/50-Angular-Components.git)

*