ACTIVITY 14: Angular Components
Goal:
Create 50 Angular components, each with different functionality, based on the provided list and your own examples. Ensure all components are well organized and navigable from the main app component.
Instructions:
Create 50 Components:
Implement 40 components from the provided instructions.
Create 10 additional components based on your own unique ideas.
In the app.component, add a header or navbar that includes links to all 50 components. This will allow users to easily navigate between them.
Note: Focus on using only HTML and TypeScript. For now, avoid using any CSS or external designs. The purpose is to practice functionality, not design.
Commit and Push to GitHub:
For each component, create a separate commit with the following format:
Example commit message: #1displayhelloworld
Ensure there are 50 commits in total, each corresponding to a different component.
Push the entire project to a GitHub repository.
Documentation on Hashnode:
Write a short blog post on Hashnode explaining the project and components you built.
Include code snippets where necessary and explain the functionality of the components briefly.
Provide the link to your GitHub repository in the post so that others can access your code.
Share on Portal:
- Once you’ve completed the Hashnode documentation, share the link to your post on our portal.
Important Notes:
This is a practice activity to help you master Angular.
You must not use AI to genrate any of the code. However, you are free to search for solutions on platforms like Google if needed.
Focus on functionality first and do not use CSS or external design tools. Stick to HTML and TypeScript only.
You are allowed to use AI tools only for writing documentation, like the Hashnode blog post.
Good luck, and have fun mastering Angular!
Step 1: For this task, I made a folder called AngularComponents on the command prompt and installed the required packages.
Step 2: inside the src folder, the app folder , I created a folder named Components
Step 3: Inside this of components folder, I use the terminal to generate 50 components each.
Step 4: I created a app.module.ts to set up, and configure the routes, imports, and declarations.
import {RouterModule, Routes} from "@angular/router";
import {CommonModule} from "@angular/common";
import {NgModule} from "@angular/core";
import {BrowserModule} from "@angular/platform-browser";
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
import {AppComponent} from "./app.component";
import {DisplayhelloworldComponent} from './Components/displayhelloworld/displayhelloworld.component';
import { FormsModule } from "@angular/forms";
import {ShowhellobuttonComponent} from './Components/showhellobutton/showhellobutton.component';
import {DisplaynameComponent} from './Components/displayname/displayname.component';
import {CounterComponent} from './Components/counter/counter.component';
import {SimpleformComponent} from './Components/simpleform/simpleform.component';
import {UserageComponent} from './Components/userage/userage.component';
import {UsergreetingComponent} from './Components/usergreeting/usergreeting.component';
import {CalculatorComponent} from './Components/calculator/calculator.component';
import {TextlengthComponent} from './Components/textlength/textlength.component';
import {CurrencyconverterComponent} from './Components/currencyconverter/currencyconverter.component';
import {EvenoddcheckerComponent} from './Components/evenoddchecker/evenoddchecker.component';
import {WordreverserComponent} from './Components/wordreverser/wordreverser.component';
import {ShowdateComponent} from './Components/showdate/showdate.component';
import {ShowusernameComponent} from './Components/showusername/showusername.component';
import {MultiplicationtableComponent} from './Components/multiplicationtable/multiplicationtable.component';
import {SimpleloginComponent} from './Components/simplelogin/simplelogin.component';
import {FahrenheittocelsiusComponent} from './Components/fahrenheittocelsius/fahrenheittocelsius.component';
import {BookmarklistComponent} from './Components/bookmarklist/bookmarklist.component';
import {CharactercounterComponent} from './Components/charactercounter/charactercounter.component';
import {PalindromecheckerComponent} from './Components/palindromechecker/palindromechecker.component';
import {TemperatureconverterComponent} from './Components/temperatureconverter/temperatureconverter.component';
import {ShoppinglistComponent} from './Components/shoppinglist/shoppinglist.component';
import {FactorialcalculatorComponent} from './Components/factorialcalculator/factorialcalculator.component';
import {TodomanagerComponent} from './Components/todomanager/todomanager.component';
import {GuessnumbergameComponent} from './Components/guessnumbergame/guessnumbergame.component';
import {WordcounterComponent} from './Components/wordcounter/wordcounter.component';
import {RandomnumbergeneratorComponent} from './Components/randomnumbergenerator/randomnumbergenerator.component';
import {MultiplicationcheckerComponent} from './Components/multiplicationchecker/multiplicationchecker.component';
import {UppercaseconverterComponent} from './Components/uppercaseconverter/uppercaseconverter.component';
import {WordshufflerComponent} from './Components/wordshuffler/wordshuffler.component';
import {BmisolverComponent} from './Components/bmisolver/bmisolver.component';
import {UsernamevalidatorComponent} from './Components/usernamevalidator/usernamevalidator.component';
import {InterestcalculatorComponent} from './Components/interestcalculator/interestcalculator.component';
import {CompoundinterestcalculatorComponent} from './Components/compoundinterestcalculator/compoundinterestcalculator.component';
import {FibonaccigeneratorComponent} from './Components/fibonaccigenerator/fibonaccigenerator.component';
import {OddsumcalculatorComponent} from './Components/oddsumcalculator/oddsumcalculator.component';
import {CurrencyformatterComponent} from './Components/currencyformatter/currencyformatter.component';
import {RandomquotedisplayComponent} from './Components/randomquotedisplay/randomquotedisplay.component';
import {UppercasegreetingComponent} from './Components/uppercasegreeting/uppercasegreeting.component';
import {DivisiblecheckerComponent} from './Components/divisiblechecker/divisiblechecker.component';
import {GradecalculatorComponent} from './Components/gradecalculator/gradecalculator.component';
import {SpeedconverterComponent} from './Components/speedconverter/speedconverter.component';
import {ColorchangerComponent} from './Components/colorchanger/colorchanger.component';
import {LeapyearcheckerComponent} from './Components/leapyearchecker/leapyearchecker.component';
import {TemperaturealertComponent} from './Components/temperaturealert/temperaturealert.component';
import {DiscountcalculatorComponent} from './Components/discountcalculator/discountcalculator.component';
import {LetterreplacerComponent} from './Components/letterreplacer/letterreplacer.component';
import {SimplesliderComponent} from './Components/simpleslider/simpleslider.component';
import {PasswordstrengthcheckerComponent} from './Components/passwordstrengthchecker/passwordstrengthchecker.component';
import {MemorymatchgameComponent} from './Components/memorymatchgame/memorymatchgame.component';
const routes: Routes =[
{path:'',component: DisplayhelloworldComponent},
{path:'showbellbutton',component: ShowhellobuttonComponent},
{path:'displayname',component: DisplaynameComponent},
{path:'counter',component: CounterComponent},
{path: 'simpleform', component: SimpleformComponent},
{path: 'userage', component: UserageComponent},
{path: 'usergreeting',component: UsergreetingComponent},
{path: 'calculator',component:CalculatorComponent},
{path: 'textlength',component:TextlengthComponent},
{path: 'currencyconverter',component:CurrencyconverterComponent},
{path: 'evenoddchecker',component:EvenoddcheckerComponent},
{path: 'wordreverser',component:WordreverserComponent},
{path: 'showdate',component: ShowdateComponent},
{path: 'showusername',component: ShowusernameComponent},
{path: 'multiplicationtable',component: MultiplicationtableComponent},
{path: 'simplelogin',component: SimpleloginComponent},
{path: 'fahrenheittocelsius',component: FahrenheittocelsiusComponent},
{path: 'bookmarklist',component: BookmarklistComponent},
{path: 'charactercounter',component: CharactercounterComponent},
{path: 'palindromechecker',component: PalindromecheckerComponent},
{path: 'temperatureconverter',component: TemperatureconverterComponent},
{path: 'shoppinglist',component: ShoppinglistComponent},
{path: 'factorialcalculator',component: FactorialcalculatorComponent},
{path: 'todomanager',component:TodomanagerComponent},
{path: 'guessnumbergame',component:GuessnumbergameComponent},
{path: 'wordcounter',component: WordcounterComponent},
{path: 'randomnumbergenerator',component: RandomnumbergeneratorComponent},
{path: 'multiplicationchecker',component: MultiplicationcheckerComponent},
{path: 'uppercaseconverter',component:UppercaseconverterComponent},
{path: 'wordshuffler',component:WordshufflerComponent},
{path: 'bmisolver',component: BmisolverComponent},
{path: 'usernamevalidator',component: UsernamevalidatorComponent},
{path: 'interestcalculator',component: InterestcalculatorComponent},
{path: 'compoundinterestcalculator',component: CompoundinterestcalculatorComponent},
{path: 'fibonaccigenerator',component: FibonaccigeneratorComponent},
{path: 'oddsumcalculator',component: OddsumcalculatorComponent},
{path: 'currencyformatter',component: CurrencyformatterComponent},
{path: 'randomquotedisplay',component: RandomquotedisplayComponent},
{path: 'uppercasegreeting',component:UppercasegreetingComponent},
{path: 'divisiblechecker',component: DivisiblecheckerComponent},
{path: 'gradecalculator',component: GradecalculatorComponent},
{path: 'speedconverter',component: SpeedconverterComponent},
{path: 'colorchanger',component: ColorchangerComponent},
{path: 'leapyearchecker',component:LeapyearcheckerComponent},
{path: 'temperaturealert',component:TemperaturealertComponent},
{path: 'discountcalculator',component: DiscountcalculatorComponent},
{path: 'letterreplacer',component: LetterreplacerComponent},
{path: 'simpleslider',component: SimplesliderComponent},
{path: 'passwordstrengthchecker',component: PasswordstrengthcheckerComponent},
{path: 'memorymatchgame',component: MemorymatchgameComponent},
]
@NgModule({
imports: [
CommonModule,
BrowserModule,
BrowserAnimationsModule,
RouterModule.forRoot(routes, {enableTracing: true}),
FormsModule,
],
declarations: [
AppComponent,
DisplayhelloworldComponent,
ShowhellobuttonComponent,
DisplaynameComponent,
CounterComponent,
SimpleformComponent,
UserageComponent,
UsergreetingComponent,
CalculatorComponent,
TextlengthComponent,
CurrencyconverterComponent,
EvenoddcheckerComponent,
WordreverserComponent,
ShowdateComponent,
ShowusernameComponent,
MultiplicationtableComponent,
SimpleloginComponent,
FahrenheittocelsiusComponent,
BookmarklistComponent,
CharactercounterComponent,
PalindromecheckerComponent,
TemperatureconverterComponent,
ShoppinglistComponent,
FactorialcalculatorComponent,
TodomanagerComponent,
GuessnumbergameComponent,
WordcounterComponent,
RandomnumbergeneratorComponent,
MultiplicationcheckerComponent,
UppercaseconverterComponent,
WordshufflerComponent,
BmisolverComponent,
UsernamevalidatorComponent,
InterestcalculatorComponent,
CompoundinterestcalculatorComponent,
FibonaccigeneratorComponent,
OddsumcalculatorComponent,
CurrencyformatterComponent,
RandomquotedisplayComponent,
UppercasegreetingComponent,
DivisiblecheckerComponent,
GradecalculatorComponent,
SpeedconverterComponent,
ColorchangerComponent,
LeapyearcheckerComponent,
TemperaturealertComponent,
DiscountcalculatorComponent,
LetterreplacerComponent,
SimplesliderComponent,
PasswordstrengthcheckerComponent,
MemorymatchgameComponent,
],
providers: [
],
bootstrap: [
AppComponent
]
})
export class AppModule {}
Step 5: I modified the app.component.html to connect all of the components using navbar and routerlink.
<nav>
<a routerLink="">Display Hello World</a><br>
<a routerLink="showhellobutton">Show Hello Button</a><br>
<a routerLink="displayname">Display Name</a><br>
<a routerLink="counter">Counter</a> <br>
<a routerLink="simpleform">Simple Form</a><br>
<a routerLink="userage">User Age</a><br>
<a routerLink="calculator">Calculator</a><br>
<a routerLink="usergreeting">User Greeting</a><br>
<a routerLink="usernamevalidator">Username Validator</a><br>
<a routerLink="textlength">Text Length</a><br>
<a routerLink="interestcalculator">Interest Calculator</a><br>
<a routerLink="compoundinterestcalculator">Compound Interest Calculator</a><br>
<a routerLink="fibonaccigenerator">Fibonacci Generator</a><br>
<a routerLink="oddsumcalculator">Odd Sum Calculator</a><br>
<a routerLink="currencyformatter">Currency Formatter</a><br>
<a routerLink="randomquotedisplay">Random Quote Display</a><br>
<a routerLink="uppercasegreeting">Uppercase Greeting</a><br>
<a routerLink="divisiblechecker">Divisible Checker</a><br>
<a routerLink="gradecalculator">Grade Calculator</a><br>
<a routerLink="speedconverter">Speed Converter</a><br>
<a routerLink="colorchanger">Color Changer</a><br>
<a routerLink="leapyearchecker">Leap Year Checker</a><br>
<a routerLink="temperaturealert">Temperature Alert</a><br>
<a routerLink="discountcalculator">Discount Calculator</a><br>
<a routerLink="letterreplacer">Letter Replacer</a><br>
<a routerLink="simpleslider">Simple Slider</a><br>
<a routerLink="passwordstrengthchecker">Password Strength Checker</a><br>
<a routerLink="memorymatchgame">Memory Match Game</a><br>
<a routerLink="wordreverser">Word Reverser</a><br>
<a routerLink="wordshuffler">Word shuffler</a>
<a routerLink="wordcounter">Word Counter</a><br>
<a routerLink="uppercaseconverter">Uppercase Converter</a><br>
<a routerLink="todomanager">To Do Manager</a><br>
<a routerLink="temperatureconverter">Temperature Converter</a><br>
<a routerLink="simplelogin">Simple Login</a><br>
<a routerLink="showusername">Show Username</a><br>
<a routerLink="showdate">Show Date</a><br>
<a routerLink="shoppinglist">Shopping List</a><br>
<a routerLink="randomnumbergenerator">Random Number Generator</a><br>
<a routerLink="palindromechecker">Palindrome Checker</a><br>
<a routerLink="multiplicationtable">Multiplication Table</a><br>
<a routerLink="multiplicationchecker">Multiplication Checker</a><br>
<a routerLink="guessnumbergame">Guess Number Game</a><br>
<a routerLink="fahrenheittocelsius">Fahrenheit To Celsius</a><br>
<a routerLink="factorialcalculator">Factorial Calculator</a><br>
<a routerLink="evenoddchecker">Even Odd Checker</a><br>
<a routerLink="currencyconverter">Currency Converter</a><br>
<a routerLink="charactercounter">Character Counter</a><br>
<a routerLink="bookmarklist">Bookmark List</a><br>
<a routerLink="bmisolver">BMI Solver</a><br>
</nav>
<router-outlet></router-outlet>
Step 6: Lastly, I pushed and committed each of the components in my GitHub repository.
git add .
git commit -m "#name of components"
git push -u origin main
- Component Name: displayhelloworld
Display the text "Hello World" on the screen using a variable from the TypeScript file.
Component Name:showhellobutton
Create a button, and when the user clicks the button, "Hello World" is displayed on the screen.
- Component name: displayname
User inputs their name, and when the button is clicked, their name is displayed on the screen.
Component name: counter
Create a counter that increases by 1 when the user clicks a button.
- Component name: simpleform
Create a form with text inputs and a submit button, display the submitted input data.
- Component name: userage
Input user’s birth year, and when the button is clicked, display their age.
Component name: calculator
Create a simple calculator with add, subtract, multiply, and divide functionalities.
Component name: usergreeting
User inputs their name, and when clicked, display a personalized greeting.
Component name: usernamevalidator
Input a username and check its validity based on predefined rules (Create a variable).
Component name: textlenght
Input a string, and when the button is clicked, display the length of the string.
Component name: interestcalculator
Input principal, rate, and time, and calculate simple interest.
Component name: Compound Interest Calculator
Calculate compound interest when principal, rate, time, and frequency are input.
Component name: Fibonacci Generator
Generate and display the first N Fibonacci numbers when a button is clicked.
Component name: Odd Sum Calculator
Input a number, and calculate the sum of odd numbers up to that number.
Component name: Currency Formatter
Input a number and format it as currency when a button is clicked (Dollar, Php, Euro - search euro conversion).
Component name: Random Quote Display
Display a random quote when a button is clicked (use list data structures).
Component name: Uppercase Greeting
User inputs their name, and when the button is clicked, display the name in uppercase.
Component name: Divisible Checker
Input two numbers, and check if the first is divisible by the second.
Component name: Grade Calculator
Input student grades and calculate the average, then display the corresponding letter grade.
Component name: Currency Converter
Component name: Even Odd Checker
Component name: Character Counter
Input a string and count the number of characters in it.
Component name: Multiplication Table
Input a number and generate its multiplication table.
Component name: Temperature Converter
Convert temperature from Celsius to Fahrenheit and vice versa.
Component name: Word Counter
Input a string and count the number of words in it.
Component name: Factorial Calculator
Input a number and calculate its factorial when a button is clicked.
Component name: Show Date
Create a button that shows the current date and time when clicked.
Component name: Word shuffler
Input a word and shuffle its letters randomly.
Component name: Random Number Generator
Generate and display a random number between a specified range when a button is clicked.
component name: Multiplication Checker
Check if a number is a multiple of another number.
Component name: Simple Slider
A slider input to adjust a volume
Component name: Discount Calculator
Input a price and discount rate, then calculate the discounted price.
Component name: Leap Year Checker
allows users to input a year and checks whether it's a leap year or not
Component name: Guess Number Game
Create a number guessing game where the user inputs guesses.
Component name: BMI Solver
Input height and weight, calculate and display the BMI.
Component name: Bookmark List
Allow users to input URLs and display them using anchor tags.
Component name: Fahrenheit To Celsius
Convert temperature from Fahrenheit to Celsius when the user inputs a value.
Component name: Speed Converter
Input a speed in kilometers per hour and convert it to miles per hour.
Component name: Uppercase Converter
Input a string and convert it to uppercase when the button is clicked.
Component name: Palindrome Checker
Input a word and check if it's a palindrome.
Component name: Shopping List
Create a shopping list where users can add and remove items (use list data structure).
Component name: To Do Manager
Create a simple to-do list where users can add and remove tasks (use list data structure).
Component name: Simple Login
Create a simple login form with email and password fields.
Component name: Show Username
User inputs their username, and on clicking a button, their username is displayed on the screen.
Component name: Word Reverser
Input a word, and when the button is clicked, display the word reversed.
Component name: Color Changer
Create buttons to change the background color of a div.
Component name: Temperature Alert
allows users to input a temperature and display a message indicating whether it's too hot, too cold, or just right,
Component name: Letter Replacer
allows users to input a word, specify a letter to replace, and replace it with another letter
Component name: Memory Match Game
users flip “?“ to find matching pairs. If the two image match, they remain flipped; otherwise, they turn back over.
Component name: Password Strength Checker
Input a password and display its strength (weak, medium, strong) based on length and character types.
