Angular Components
Creating new angular project
I created a new angular project using
ng new project-name
I configured my routing using app.module.ts imporing and using necessary module for the project
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { routes } from './app.routes';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HomeComponent } from './components/home/home.component';
import { DisplayhelloworldComponent } from './components/displayhelloworld/displayhelloworld.component';
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 { EvensumcalculatorComponent } from './components/evensumcalculator/evensumcalculator.component';
import { CountvowelsComponent } from './components/countvowels/countvowels.component';
import { CountconsonantsComponent } from './components/countconsonants/countconsonants.component';
import { HourstominutesconverterComponent } from './components/hourstominutesconverter/hourstominutesconverter.component';
import { AreaofcircleComponent } from './components/areaofcircle/areaofcircle.component';
import { CapitalizewordComponent } from './components/capitalizeword/capitalizeword.component';
import { AverageoffivenumbersComponent } from './components/averageoffivenumbers/averageoffivenumbers.component';
import { FindlargestnumberComponent } from './components/findlargestnumber/findlargestnumber.component';
import { FindsmallestnumberComponent } from './components/findsmallestnumber/findsmallestnumber.component';
import { LargestwordinsentenceComponent } from './components/largestwordinsentence/largestwordinsentence.component';
@NgModule({
declarations: [
AppComponent,
HomeComponent,
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,
EvensumcalculatorComponent,
CountvowelsComponent,
CountconsonantsComponent,
HourstominutesconverterComponent,
AreaofcircleComponent,
CapitalizewordComponent,
AverageoffivenumbersComponent,
FindlargestnumberComponent,
FindsmallestnumberComponent,
LargestwordinsentenceComponent
],
imports: [BrowserModule, FormsModule, RouterModule.forRoot(routes)],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
import { Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { DisplayhelloworldComponent } from './components/displayhelloworld/displayhelloworld.component';
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 { EvensumcalculatorComponent } from './components/evensumcalculator/evensumcalculator.component';
import { CountvowelsComponent } from './components/countvowels/countvowels.component';
import { CountconsonantsComponent } from './components/countconsonants/countconsonants.component';
import { HourstominutesconverterComponent } from './components/hourstominutesconverter/hourstominutesconverter.component';
import { AreaofcircleComponent } from './components/areaofcircle/areaofcircle.component';
import { CapitalizewordComponent } from './components/capitalizeword/capitalizeword.component';
import { AverageoffivenumbersComponent } from './components/averageoffivenumbers/averageoffivenumbers.component';
import { FindlargestnumberComponent } from './components/findlargestnumber/findlargestnumber.component';
import { FindsmallestnumberComponent } from './components/findsmallestnumber/findsmallestnumber.component';
import { LargestwordinsentenceComponent } from './components/largestwordinsentence/largestwordinsentence.component';
export const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'displayHelloWorld', component: DisplayhelloworldComponent },
{ path: 'showHelloButton', 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: 'evenoOddChecker', 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: 'evenSumCalculator', component: EvensumcalculatorComponent },
{ path: 'countVowels', component: CountvowelsComponent },
{ path: 'countConsonants', component: CountconsonantsComponent },
{
path: 'hoursToMinutesConverter',
component: HourstominutesconverterComponent,
},
{ path: 'areaOfCircle', component: AreaofcircleComponent },
{ path: 'capitalizeWord', component: CapitalizewordComponent },
{ path: 'averageOfFiveNumbers', component: AverageoffivenumbersComponent },
{ path: 'findLargestNumber', component: FindlargestnumberComponent },
{ path: 'findSmallestNumber', component: FindsmallestnumberComponent },
{ path: 'largestWordInSentence', component: LargestwordinsentenceComponent },
];
I used router link to navigate in different pages
<h1>50 Angular Components</h1>
<ol>
<li><a [routerLink]="['/displayHelloWorld']">Display Hello World</a></li>
<li><a [routerLink]="['/showHelloButton']">Show Hello Button</a></li>
<li><a [routerLink]="['/displayName']">Display Name</a></li>
<li><a [routerLink]="['/counter']">Counter</a></li>
<li><a [routerLink]="['/simpleForm']">Simple Form</a></li>
<li><a [routerLink]="['/userAge']">User Age</a></li>
<li><a [routerLink]="['/userGreeting']">User Greeting</a></li>
<li><a [routerLink]="['/calculator']">Calculator</a></li>
<li><a [routerLink]="['/textLength']">Text Length</a></li>
<li><a [routerLink]="['/currencyConverter']">Currency Converter</a></li>
<li><a [routerLink]="['/evenoOddChecker']">Even Or Odd Checker</a></li>
<li><a [routerLink]="['/wordReverser']">Word Reverser</a></li>
<li><a [routerLink]="['/showDate']">Show Date</a></li>
<li><a [routerLink]="['/showUsername']">Show Username</a></li>
<li><a [routerLink]="['/multiplicationTable']">Multiplication Table</a></li>
<li><a [routerLink]="['/simpleLogin']">Simple Login</a></li>
<li><a [routerLink]="['/fahrenheitToCelsius']">Fahrenheit To Celsius</a></li>
<li><a [routerLink]="['/bookmarkList']">Bookmark List</a></li>
<li><a [routerLink]="['/characterCounter']">Character Counter</a></li>
<li><a [routerLink]="['/palindromeChecker']">Palindrome Checker</a></li>
<li><a [routerLink]="['/temperatureConverter']">Temperature Converter</a></li>
<li><a [routerLink]="['/shoppingList']">Shopping List</a></li>
<li><a [routerLink]="['/factorialCalculator']">Factorial Calculator</a></li>
<li><a [routerLink]="['/todoManager']">Todo Manager</a></li>
<li><a [routerLink]="['/guessNumberGame']">Guess Number Game</a></li>
<li><a [routerLink]="['/wordCounter']">Word Counter</a></li>
<li>
<a [routerLink]="['/randomNumberGenerator']">Random Number Generator</a>
</li>
<li>
<a [routerLink]="['/multiplicationChecker']">Multiplication Checker</a>
</li>
<li><a [routerLink]="['/uppercaseConverter']">Uppercase Converter</a></li>
<li><a [routerLink]="['/wordShuffler']">Word Shuffler</a></li>
<li><a [routerLink]="['/bmiSolver']">BMI Solver</a></li>
<li><a [routerLink]="['/usernameValidator']">Username Validator</a></li>
<li><a [routerLink]="['/interestCalculator']">Interest Calculator</a></li>
<li>
<a [routerLink]="['/compoundInterestCalculator']"
>Compound Interest Calculator</a
>
</li>
<li><a [routerLink]="['/fibonacciGenerator']">Fibonacci Generator</a></li>
<li><a [routerLink]="['/oddSumCalculator']">Odd Sum Calculator</a></li>
<li><a [routerLink]="['/currencyFormatter']">Currency Formatter</a></li>
<li><a [routerLink]="['/randomQuoteDisplay']">Random Quote Display</a></li>
<li><a [routerLink]="['/uppercaseGreeting']">Uppercase Greeting</a></li>
<li><a [routerLink]="['/divisibleChecker']">Divisible Checker</a></li>
<li><a [routerLink]="['/evenSumCalculator']">Even Sum Calculator</a></li>
<li><a [routerLink]="['/countVowels']">Count Vowels</a></li>
<li><a [routerLink]="['/countConsonants']">Count Consonants</a></li>
<li>
<a [routerLink]="['/hoursToMinutesConverter']"
>Hours to Minutes Converter</a
>
</li>
<li>
<a [routerLink]="['/areaOfCircle']">Area of Circle</a>
</li>
<li>
<a [routerLink]="['/capitalizeWord']">Capitalize Word</a>
</li>
<li>
<a [routerLink]="['/averageOfFiveNumbers']">Average Of Five Numbers</a>
</li>
<li>
<a [routerLink]="['/findLargestNumber']">Find Largest Number</a>
</li>
<li>
<a [routerLink]="['/findSmallestNumber']">Find Smallest Number</a>
</li>
<li>
<a [routerLink]="['/largestWordInSentence']">Largest Word in Sentence</a>
</li>
</ol>
Components
Component 1: displayhelloworld
I used h1 element to display a “Hello world” message in the screen
Component 2: showhellobutton
I used two button for showing and hiding the message
The show function is setting the message into “Hello world”
The hide function is setting the message into empty string
Component 3: displayname
I used input element to get the name of the user, it has a reference variable “#nameInput” that is passed in showName function.
The value of the input element is set to name variable
Component 4: counter
The count variable is bound in the h1 element
When the button is clicked, the function increment will add 1 to the coun
Component 5: simpleform
I created a form with inputs that has reference variable bound to h1 elements, it is passed to the submit function when the form is submitted
Component 6: userage
The birthdate from input is converted into milliseconds using Date class, it is then compared to the milliseconds of the current date, to calculate the age of the user
Component 7: usergreeting
The entered name is used to greet the user, it is bounded to the h1 element.
The function enter is responsible for setting the greeting with the set greetings.
Component 8: calculator
The two numbers is used to multiply, divide, add, or subtract. The user can choose of whatever operation to be performed.
Component 9: textlength
The getLength function sets the text length to the length of whatever the user entered.
Component 10: currencyconverter
The peso value from the user is converted into dollar.
Component 11: evenoddchecker
The inputted value is checked if even or odd by knowing if its remainder is 0 when divided by 2.
Component 12: wordreverser
The text from the user is being reversed using various built in functions of Array class.
Component 13: showdate
The current date is shown to the user using the Date class.
Component 14: showusername
The username from the user is set to the username variable that is bound to the h1 element.
Component 15: multiplicationtable
The number from the user calculated to solve its multiplication table from 1 to 10, each column is added to the table array, it is then showed to the user.
Component 16: simplelogin
This is just a simple login structure
Component 17: fahrenheittocelsius
The celsius value is converted into fahrenheit
Component 18: bookmarklist
The link provided by the user is added to the href and value of the anchor tag, the user can click the link and redirect to it.
Component 19: charactercounter
The character count from the user inputted text will shown to them.
Component 20: palindromechecker
The text from the user is reversed and compare to the original to check if it is a palindrome.
Component 21: temperatureconverter
The temperature from the user can be converted from celsius to fahrenheit, and vice versa.
Component 22: shoppinglist
The items from the items is added to the shoppingList array when add to card button is clicked. It can be also removed by clicking the remove button.
Component 23: factorialcalculator
The factorial of the number inputted from the user will be calculated using the factorial function.
Component 24: todomanager
User can add and remove items from todoList array.
Component 25: guessnumbergame
This program can generate random number and check if the user guess is matched, it can also generate new random number.
Component 26: wordcounter
It will count the words from the text user provided.
Component 27: randomnumbergenerator
It generates random number from the specified range
Component 28: multiplicationchecker
The number will be checked if it is multiple of the specified number
Component 29: uppercaseconverter
it will convert all the text from the user into uppercase.
Component 30: wordshuffler
It will shuffle the characters from a word, I used Fisher-Yates algorithm to randomize the position of each character
Component 31: bmisolver
It will calculate the body mass index of a person by getting weight and height of the user
Component 32: usernamevalidator
The username from the user is checked and validated using custom rules.
Component 33: interestcalculator
Using princial, rate, and time, interest is calculated using the interest formula.
Component 34: compoundinterestcalculator
Using princial, rate, time, and frequency, comound interest is calculated using the compound interest formula.
Component 35: fibonaccigenerator
The fibonacci sequence if calculated using recursive fibonacci function.
Component 36: oddsumcalculator
The odd numbers from all the numbers to specified range is summed.
Component 37: currencyformatter
The php currency is converted to dollar and euro currency.
Component 38: randomquotedisplay
Random quote is showed to the user using random number.
Component 39: uppercasegreeting
The name of the user in the greeting message if uppercased.
Component 40: divisiblechecker
two numbers is compared if the first number if divisible to the second number.
Component 41: evensumcalculator
The even numbers from all the numbers to specified range is summed.
Component 42: countvowels
The vowels from a text is counted
Component 43: countconsonants
The consonant from a text is counted
Component 44: hourstominutesconverter
Hours is converted into minutes
Component 45: areaofcircle
Area of circle is calculated using the formula for getting the area of a circle using its radius
Component 46: capitalizeword
The first letter of the text if converted into uppercase, capitalizing it
Component 47: averageoffivenumbers
The average of five numbers is calculated
Component 48: findlargestnumber
The largest number out of three is shown to the user
Component 49: findsmallestnumber
The smallest number out of three is shown to the user
Component 50: largestwordinsentence
The longest word in a sentence is shown to the user.