# Angular Components

# Creating new angular project

I created a new angular project using

```plaintext
ng new project-name
```

I configured my routing using app.module.ts imporing and using necessary module for the project

```plaintext
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 {}
```

```plaintext
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

```plaintext
<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**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726741156966/2bec95ad-f9cb-4884-9008-955af232dde9.png align="center")

I used h1 element to display a “Hello world” message in the screen

### Component 2: **showhellobutton**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726675153626/91689cb5-659d-479e-af6e-2a778eacd252.png align="center")

I used two button for showing and hiding the message

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726675187152/6d10aea2-89db-449e-926e-f102937c6940.png align="center")

The show function is setting the message into “Hello world”

The hide function is setting the message into empty string

### Component 3: **displayname**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726675916046/5abc9c44-f78a-4198-bb5c-664662722b35.png align="center")

I used input element to get the name of the user, it has a reference variable “#nameInput” that is passed in showName function.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726676883855/3958fe3f-3eeb-49ba-85b7-4238969556bf.png align="center")

The value of the input element is set to name variable

### Component 4: **counter**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726677016741/8bb82d21-ae2a-4cd1-8bfe-e2fbc4c6649d.png align="center")

The count variable is bound in the h1 element

When the button is clicked, the function increment will add 1 to the coun

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726677156498/6fdc3d9d-491a-49d6-97fe-5d0cf701da87.png align="center")

### Component 5: **simpleform**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726678461202/90b1fb00-27e8-4fe9-b595-ca695615d9fa.png align="center")

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726679194058/ca67b310-16e8-4343-8a77-703e210445c5.png align="center")

### Component 6: **userage**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726679368235/5fbef53e-281a-443d-b975-12ccbc3497fd.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726679410198/a18f5b92-d45f-438a-8270-f46f41daad17.png align="center")

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**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726680438888/27c53d41-8d64-4b7d-8323-60d5a32f9804.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726680457834/d3b3bb76-f7cc-4296-9fef-6994bece7fc0.png align="center")

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**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726680653066/292c10b8-6105-4a28-ba68-30716081b452.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726680661485/3ab156fe-9fc4-4f9c-bedb-b34300ffe649.png align="center")

The two numbers is used to multiply, divide, add, or subtract. The user can choose of whatever operation to be performed.

### Component 9: **textlength**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726681281155/1aa5d3c1-57cf-49cf-bffb-7c5046460aa1.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726681289444/1aaa00b9-d585-4cb7-8ea7-66a23595c8eb.png align="center")

The getLength function sets the text length to the length of whatever the user entered.

### Component 10: **currencyconverter**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726681670037/74382f53-5ca4-4501-a074-b69c861bb088.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726681678416/c6af595f-5f3f-4768-adac-ebe7edade3de.png align="center")

The peso value from the user is converted into dollar.

### Component 11: **evenoddchecker**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726681924878/290106e8-c0e5-465f-b322-d8761c4e6b54.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726681932964/083efa5d-0601-45b2-9837-77e6f8b46311.png align="center")

The inputted value is checked if even or odd by knowing if its remainder is 0 when divided by 2.

### Component 12: **wordreverser**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726682017491/79233be3-3437-4ae3-afed-c5f344dd489d.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726682024420/bb53b1f4-2d62-4acc-8740-d29677e22ec0.png align="center")

The text from the user is being reversed using various built in functions of Array class.

### Component 13: **showdate**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726682200155/51c81917-25ea-46b9-a702-78a70571dae4.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726682215655/0725b2cf-c99b-4c55-9516-b6e40423e5c7.png align="center")

The current date is shown to the user using the Date class.

### Component 14: **showusername**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726682336165/e8fe72a2-dc07-4300-b634-f094051d4751.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726682343597/d954373c-8dc6-4ddf-9ed9-e67aebdba967.png align="center")

The username from the user is set to the username variable that is bound to the h1 element.

### Component 15: **multiplicationtable**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726682552319/4625f8c8-939e-4d16-a477-8052c1d8ec16.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726682559579/b2ddac3a-f41e-4c31-9dc4-24e99f6a4fab.png align="center")

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**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726682626176/85de9b0a-3c96-45ca-b53b-61a7ce5bddca.png align="center")

This is just a simple login structure

### Component 17: **fahrenheittocelsius**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726682652211/84c82aec-ec00-42b2-918d-713b8fdd3f3c.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726682659479/6b90109a-850b-441c-ae7c-8783d554f977.png align="center")

The celsius value is converted into fahrenheit

### Component 18: **bookmarklist**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726682703466/bedb050a-31b4-481e-a543-e4633bd999da.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726682709604/887be01c-7e10-4cf5-b07e-3be5e27d5329.png align="center")

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**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726682750241/6c48831e-6a71-4725-851a-c8a46f3f306a.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726682757255/40165e8d-a330-48c3-af3b-bb9228c81dd1.png align="center")

The character count from the user inputted text will shown to them.

### Component 20: **palindromechecker**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726682847047/0fe6855f-1882-409e-88c6-b4efd319d434.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726682855823/04ddd71f-a8e9-4951-9699-b8479655eea0.png align="center")

The text from the user is reversed and compare to the original to check if it is a palindrome.

### Component 21: **temperatureconverter**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726682886988/f92cd94f-c084-45f9-bad5-880b44c36e43.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726682894740/5165e455-11f9-41e9-9138-8b47303114f1.png align="center")

The temperature from the user can be converted from celsius to fahrenheit, and vice versa.

### Component 22: **shoppinglist**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726682945937/b01fcc8b-561c-4502-b24f-1954b4ffb6c6.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726682957086/c061ad29-bce5-48b6-8867-7eb75a88b52a.png align="center")

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**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726683011996/944c7dce-9bef-4800-838b-f1d91046be49.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726683019536/7ea18cdc-cc91-4a5f-baba-966e1b2ef3ca.png align="center")

The factorial of the number inputted from the user will be calculated using the factorial function.

### Component 24: **todomanager**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726683065993/d97db6d6-4a64-4fbb-99cb-69a4126b9fe0.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726683075568/4c90700a-fa32-47e2-ba09-2d69d290f0ce.png align="center")

User can add and remove items from todoList array.

### Component 25: **guessnumbergame**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726683100475/2ba0c69e-ec5f-4878-a1aa-4125739373a3.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726683107499/7b4301ae-2d72-4da8-8575-a7f0d55063c1.png align="center")

This program can generate random number and check if the user guess is matched, it can also generate new random number.

### Component 26: **wordcounter**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726683715243/ce4a660a-d49d-4e00-9d3f-f5d24c12ab0d.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726683721434/710d1675-94cc-4cf6-aada-0423901cfdbb.png align="center")

It will count the words from the text user provided.

### Component 27: **randomnumbergenerator**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726683757951/c890a595-b33d-4a93-8552-cbb6ce752dce.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726683764678/a3b24f41-c090-4f4a-a683-efcf1e6492e2.png align="center")

It generates random number from the specified range

### Component 28: **multiplicationchecker**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726683807460/4eeb69dc-9c65-4e9b-bf4d-c199f440bf5c.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726683832623/8868aba1-7be6-46b1-bd11-bd48789e5cb1.png align="center")

The number will be checked if it is multiple of the specified number

### Component 29: **uppercaseconverter**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726683881287/9dc370a2-e606-42df-9b6f-b2c3cdb82db3.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726683887681/7bf953e1-2f58-4519-9f27-2ab660acc24c.png align="center")

it will convert all the text from the user into uppercase.

### Component 30: **wordshuffler**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726683915784/4ff8e78a-0aa7-41c5-8ccd-98f76ed8206f.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726683924138/b82dc65c-a535-470b-800b-cd87bee3ce9f.png align="center")

It will shuffle the characters from a word, I used **Fisher-Yates algorithm** to randomize the position of each character

### Component 31: **bmisolver**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726684004322/9c9aa8f9-230e-41bb-a94c-2454b1aa192e.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726684012066/97518a92-ae88-49a6-b876-5bf0ff855534.png align="center")

It will calculate the body mass index of a person by getting weight and height of the user

### Component 32: **usernamevalidator**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726684082169/ecfd4ea8-39be-49ce-9f10-9e91ac587448.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726684096049/87dc25a2-e818-4c60-9907-2de19fbb6c93.png align="center")

The username from the user is checked and validated using custom rules.

### Component 33: **interestcalculator**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726684185526/3ff41edc-8a30-4af8-b852-7acea599b4c0.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726684279400/a3cd9650-a129-4ce2-a9f2-fdab074d9c88.png align="center")

Using princial, rate, and time, interest is calculated using the interest formula.

### Component 34: **compoundinterestcalculator**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726684327648/700a19a1-c9f1-473e-bde3-224232aef76c.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726684338838/c40d69ba-e5f3-45b3-b604-e2a1dcc2cedc.png align="center")

Using princial, rate, time, and frequency, comound interest is calculated using the compound interest formula.

### Component 35: **fibonaccigenerator**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726684394313/997f03b5-e4fa-4908-8fa0-79a6e785f8ef.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726684546547/4fd1e686-aeca-4014-b9d6-c90bd936477d.png align="center")

The fibonacci sequence if calculated using recursive fibonacci function.

### Component 36: **oddsumcalculator**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726684608147/46449aa4-6727-493f-accc-a992934e5b5b.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726684618410/1d34f866-ba53-4f3f-a648-28c5b9bd6d8d.png align="center")

The odd numbers from all the numbers to specified range is summed.

### Component 37: **currencyformatter**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726684675819/cc6567c1-28a0-4052-b979-6526c086a8ce.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726684713367/c732618e-28c2-4c63-a81e-1ceaf459a405.png align="center")

The php currency is converted to dollar and euro currency.

### Component 38: **randomquotedisplay**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726684751980/6f279c11-eb1f-4547-b9e3-f04a23d0fbe4.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726684759494/62fb7602-7d47-4774-aef8-5a8e051aed8b.png align="center")

Random quote is showed to the user using random number.

### Component 39: **uppercasegreeting**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726684790996/3d63aa01-4706-4741-aa1f-088a357e8f2e.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726684796828/6052fef2-c297-4a92-9b37-ade4500e7643.png align="center")

The name of the user in the greeting message if uppercased.

### Component 40: **divisiblechecker**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726684826560/0d30d603-7cc2-42df-a651-4d25f65dbe60.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726684833010/a14c1fd1-e03e-4c28-8bd6-914d1c7ebd1d.png align="center")

two numbers is compared if the first number if divisible to the second number.

### Component 41: evensumcalculator

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726684883624/440f1aac-8f0e-4585-9400-ae31833958ee.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726684889788/de0fb974-1f4b-49dc-9831-27b86961ef01.png align="center")

The even numbers from all the numbers to specified range is summed.

### Component 42: countvowels

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726684920218/e587f794-431c-4886-88bf-20ecb7e92319.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726684930467/98fd8a4a-15a6-480a-9e96-01b79f125fd0.png align="center")

The vowels from a text is counted

### Component 43: countconsonants

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726684979869/12e589ba-704e-4ec0-b71f-2b47e1007b8f.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726684987030/0e29eae3-ae15-4b89-ae24-9b0f4079c1bc.png align="center")

The consonant from a text is counted

### Component 44: hourstominutesconverter

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726685004005/5b9079d9-475c-4ca5-b0c3-ff441ce182f2.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726685011062/fb34ad1f-3dfc-425d-b0b0-354385cd59cd.png align="center")

Hours is converted into minutes

### Component 45: areaofcircle

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726685035377/4313675a-cb99-4e0a-a95e-b804dc6af12f.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726685041331/71f1f041-e46b-4688-874b-fbe761a32933.png align="center")

Area of circle is calculated using the formula for getting the area of a circle using its radius

### Component 46: capitalizeword

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726685074403/34a5c612-09c0-46a8-9e74-ddd1ae6cfea7.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726685082389/db8ebfaf-6756-4bd3-9dca-9ba13f038600.png align="center")

The first letter of the text if converted into uppercase, capitalizing it

### Component 47: averageoffivenumbers

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726685114606/d35d042e-2410-4ff1-8818-75d7269356ec.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726685121966/2dff8b71-ac3d-4164-b210-85efeb84c496.png align="center")

The average of five numbers is calculated

### Component 48: findlargestnumber

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726685144889/856f87f2-d908-4547-9fd1-2680dcc38d27.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726685151402/4b3c3b32-8412-45a3-a311-e8fd4930030e.png align="center")

The largest number out of three is shown to the user

### Component 49: findsmallestnumber

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726685175751/37c5c581-6b4d-4cbf-9a7a-63c9dc49016e.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726685182817/9275c607-7324-4db6-9a02-2577b68e3948.png align="center")

The smallest number out of three is shown to the user

### Component 50: largestwordinsentence

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726685209254/aa10e492-d2a1-489e-93d8-1dbe13e73948.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726685217669/380e0399-231e-44ec-bbaf-6bbab79af93f.png align="center")

The longest word in a sentence is shown to the user.

### Github repository: [https://github.com/devken4u/angular-components](https://github.com/devken4u/angular-components)