Cañete,Brandon L.'s team blog

Angular Components

Cañete,Brandon L.'s photo
Cañete,Brandon L.
·

9 min read

Table of contents

  • This step by step guide on how i made my 50 angular components

Prerequisite

  1. Angular CLI Install with npm libraries and make an angular app

  2. cmd or git bash or any terminal you can use to commit the project

  3. Github Repository

Step 1 : Open the Angular to any ide or text editor you want

  • open it to see the code inside

Step 2 : Make an Components Folder inside the angular app

  • go to src/app then create a new folder name it Components

Step 3 : Go to app.component.html and do this mark up language code

<h1>50 Angular Components:</h1>
<a routerLink=" "><h3>1. Display Hello World</h3></a>
<a routerLink="/showhellobutton"><h3>2. Show Hello Button</h3></a>
<a routerLink="/displayname"><h3>3. Display Name</h3></a>
<a routerLink="/counter"><h3>4. Counter</h3></a>
<a routerLink="/simpleform"><h3>5. Simple Form</h3></a>
<a routerLink="/userage"><h3>6. User Age</h3></a>
<a routerLink="/usergreeting"><h3>7. User Greeting</h3></a>
<a routerLink="/calculator"><h3>8. Calculator</h3></a>
<a routerLink="/textlength"><h3>9. Text Length</h3></a>
<a routerLink="/currencyconverter"><h3>10. Currency Converter</h3></a>
<a routerLink="/evenoddchecker"><h3>11. Even or Odd Number Checker</h3></a>
<a routerLink="/wordreverser"><h3>12. Word Reverser</h3></a>
<a routerLink="/showdate"><h3>13. Show Date</h3></a>
<a routerLink="/showusername"><h3>14. Show Username</h3></a>
<a routerLink="/multiplicationtable"><h3>15. Multiplication Table</h3></a>
<a routerLink="/simplelogin"><h3>16. Simple Login</h3></a>
<a routerLink="/fahrenheittocelsius"><h3>17. Fahrenheit To Celsius</h3></a>
<a routerLink="/bookmarklist"><h3>18. Bookmark List</h3></a>
<a routerLink="/charactercounter"><h3>19. Character Counter</h3></a>
<a routerLink="/palindromechecker"><h3>20. Palindrome Checker Word</h3></a>
<a routerLink="/temperatureconverter"><h3>21. Temperature Converter</h3></a>
<a routerLink="/shoppinglist"><h3>22. Shopping List</h3></a>
<a routerLink="/factorialcalculator"><h3>23. Factorial Calculator</h3></a>
<a routerLink="/todomanager"><h3>24. To do Manager</h3></a>
<a routerLink="/guessnumbergame"><h3>25. Guess The Number Game</h3></a>
<a routerLink="/wordcounter"><h3>26. Word Counter</h3></a>
<a routerLink="randomnumbergenerator"><h3>27. Random Number Generator</h3></a>
<a routerLink="/multiplicationchecker"><h3>28. Multiplication Checker</h3></a>
<a routerLink="/uppercaseconverter"><h3>29. Uppercase Converter</h3></a>
<a routerLink="/wordshuffler"><h3>30. Word Shuffler</h3></a>
<a routerLink="/bmisolver"><h3>31. BMI Solver</h3></a>
<a routerLink="/usernamevalidator"><h3>32. Username validator</h3></a>
<a routerLink="/interestcalculator"><h3>33. Interest Calculator</h3></a>
<a routerLink="/compoundinterestcalculator"><h3>34. Compound Interest Calculator</h3></a>
<a routerLink="/fibonaccigenerator"><h3>35. Fibonacci Generator</h3></a>
<a routerLink="/oddsumcalculator"><h3>36. Odd Numbers Sum Calculator</h3></a>
<a routerLink="/currencyformatter"><h3>37. Currency Formatter</h3></a>
<a routerLink="/randomquotedisplay"><h3>38. Random Quote Display</h3></a>
<a routerLink="/uppercasegreeting"><h3>39. Uppercase Greeting</h3></a>
<a routerLink="/divisiblechecker"><h3>40. Divisible Checker</h3></a>
<a routerLink="/passwordgenerator"><h3>41. Password Generator</h3></a>
<a routerLink="/simplequizgame"><h3>42. Simple Quiz Game</h3></a>
<a routerLink="/savetextfile"><h3>43. Save Text File</h3></a>
<a routerLink="/savepdffile"><h3>44. Save Text to PDF file</h3></a>
<a routerLink="/randomcolorgenerator"><h3>45. Random Color Generator</h3></a>
<a routerLink="/beattheboss"><h3>46. Beat The Boss Game</h3></a>
<a routerLink="/takeaverageoffournumbers"><h3>47. Take Average of Four Numbers</h3></a>
<a routerLink="/areaofcirclesolver"><h3>48. Area of Circle Solver</h3></a>
<a routerLink="/areaofspheresolver"><h3>49. Area of Sphere Solver</h3></a>
<a routerLink="/animelistadder"><h3>50. Anime List Adder</h3></a>
<hr>
<h1>50 Angular Components Output:</h1>
<router-outlet/>
  • This will be the navigation link bar for the components

Step 4 : Make the 50 components

  • Make the 50 components so that the 50 navigation link bar from app.component.html will be use to make it use the command
ng generate component foldername/componentname
  • So because we have components folder inside the angular app we will use it to save the 50 components like
ng generate component components/showhellobutton
ng generate component components/displayname
ng generate component components/counter
  • Do this pattern until it become 50 components to know the component name use the routerLink name from app.component.html

Step 5: Copy this code to your main.ts file

 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

Step 6: Do this code to your app.module.ts file

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {RouterModule, Routes} from '@angular/router';
import {CommonModule} from "@angular/common";
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
import {AppComponent} from "./app.component";
import {provideAnimationsAsync} from "@angular/platform-browser/animations/async";
import { DisplayhelloworldComponent } from './components/displayhelloworld/displayhelloworld.component';
import { ShowhellobuttonComponent } from './components/showhellobutton/showhellobutton.component';
import { FormsModule } from '@angular/forms';
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 { PasswordgeneratorComponent } from './components/passwordgenerator/passwordgenerator.component';
import { SimplequizgameComponent } from './components/simplequizgame/simplequizgame.component';
import { SavetextfileComponent } from './components/savetextfile/savetextfile.component';
import { SavepdffileComponent } from './components/savepdffile/savepdffile.component';
import { RandomcolorgeneratorComponent } from './components/randomcolorgenerator/randomcolorgenerator.component';
import { BeatthebossComponent } from './components/beattheboss/beattheboss.component';
import { TakeaverageoffournumbersComponent } from './components/takeaverageoffournumbers/takeaverageoffournumbers.component';
import { AreaofcirclesolverComponent } from './components/areaofcirclesolver/areaofcirclesolver.component';
import { AreaofspheresolverComponent } from './components/areaofspheresolver/areaofspheresolver.component';
import { AnimelistadderComponent } from './components/animelistadder/animelistadder.component';

const routes: Routes = [
    {path: ' ', 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: '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: 'passwordgenerator', component: PasswordgeneratorComponent},
    {path: 'simplequizgame', component: SimplequizgameComponent},
    {path: 'savetextfile', component: SavetextfileComponent},
    {path: 'savepdffile', component: SavepdffileComponent},
    {path: 'randomcolorgenerator', component: RandomcolorgeneratorComponent},
    {path: 'beattheboss', component: BeatthebossComponent},
    {path: 'takeaverageoffournumbers', component: TakeaverageoffournumbersComponent},
    {path: 'areaofcirclesolver', component: AreaofcirclesolverComponent},
    {path: 'areaofspheresolver', component: AreaofspheresolverComponent},
    {path: 'animelistadder', component: AnimelistadderComponent},
];
@NgModule({
    imports: [
        CommonModule,
        BrowserModule,
        BrowserAnimationsModule,
        RouterModule.forRoot(routes, {enableTracing: true}),
        FormsModule,
    ], 
    declarations: [
        AppComponent,
        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,
        PasswordgeneratorComponent,
        SimplequizgameComponent,
        SavetextfileComponent,
        SavepdffileComponent,
        RandomcolorgeneratorComponent,
        BeatthebossComponent,
        TakeaverageoffournumbersComponent,
        AreaofcirclesolverComponent,
        AreaofspheresolverComponent,
        AnimelistadderComponent,
    ],
    providers: [
        provideAnimationsAsync(),
    ],

    bootstrap: [
        AppComponent,
    ],
    exports: [RouterModule],
})
export class AppModule{}

Step 7: Delete the standalone and import in the app.component.ts file

  • Do this so that you can use pathing in the module.ts

Step 8: The Output

    1. Display Hello World - This component print Hello World when click

      1. Show Hello Button - This component have button and when click it will print Hello World

      2. Display Name - This component have an input type text and button and when click it will print your name

      3. Counter - This component have a button that when click it will count all the clicks that happen

      4. Simple Form - This component will print your details

      5. User Age - This component will count your age based on your birthday

      6. User Greeting - This component will greet you with personalized greeting

      7. Calculator - This component is all about calculator

      8. Text Length - This component will take the length of the string

      9. Currency Converter - This component will convert Philippine Pesos to USD

      10. Even or Odd Number Checker - This component will check if the number is Even or Odd

      11. Word Reverser - This component will reverse the word

      12. Show Date - This component will show the date and time

      13. Show Username - This component will show your username

      14. Multiplication Table - This component will make a multiplication table

      15. Simple Login - This component will take username and password and login it

      16. Fahrenheit to Celsius - This component will convert the fahrenheit to celsius

      17. Bookmark List - This component will make your link an anchor tag

      18. Character Counter - This component will count the character that you input

      19. Palindrome Checker Word - This component will check if the word is palindrome or not

      20. Temperature Converter - This component will convert celsius to fahrenheit and vice versa

      21. Shopping List - This component will list all your shopping items

      22. Factorial Calculator - This component will calculate the factorial

      23. To do Manager - This component will make a to do list

      24. Guess The Number Game - This component will make you guess a number

      25. Word Counter - This component will count your words

      26. Random Number Generator - This component will generate random number in specified range

      27. Multiplication Checker - This component will check if the number one is multiple of number two

      28. Uppercase Converter - This component will uppercase the string

      29. Word Shuffler - This component will shuffle the words

      30. BMI Solver - This component will take your BMI

      31. Username Validator - This component will validate your username

      32. Interest Calculator - This component is all about Simple Interest

      33. Compound Interest Calculator - This component is all about Compound Interest

      34. Fibonacci Generator - This component will generate a fibonacci sequence

      35. Odd Numbers Sum Calculator - This component is all about odd numbers sum

      36. Currency Formatter - This component will format your currency

      37. Random Quote Display - This component will generate random quotes

      38. Uppercase Greeting - This component will greet you with uppercase name

      39. Divisible Checker - This component will check if number one is divisible in number two

      40. Password Generator - This component will generate random password

      41. Simple Quiz Game - This component will generate question and answer it

      42. Save text File - This component will save your string in text file

      43. Save Text to PDF file - This component will save your string to PDF file

      44. Random Color Generator - This component will generate random color with hex

      45. Beat The Boss Game - This component is a game where you need to beat the boss

      46. Take Average of Four Numbers - This component will take the average of four numbers

      47. Area of Circle Solver - This component will solve the area of circle

      48. Area of Sphere Solver - This component will solve the area of sphere

      49. Anime List Adder - This component will list all your favorite anime

https://github.com/BrandonLCanete/fiftyAngularComponents.git

AngularAngular components