# Angular Components
On this activity I will not include the process of creating the github and the process of installing the angular packages because I already did that I will focus on the codes and the functionalities only. but I will include the process of pushing the files to the repository.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726482072798/9274f6d2-b64d-41e6-ac2f-38550a0fcef8.png align="center")
So here, after creating a file I will create another folder inside the app folder I will name it components, this is where I will put all the components that I will generate later.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726482370991/16fb51f4-2606-4d63-80ab-f2ff7777be6d.png align="center")
I’ve generated a new component inside the components folder. I used “ng g c” command for short cut. I will do it and push it first before moving forward to the next component to avoid confusion.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726483127136/4691379c-c27d-4846-9f7e-e03982bb50a1.png align="center")
I’ve imported all the necessary stuffs and then the other imports will be added automatically, I created a landing page component as well you can see it in the right side of the screen.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726484248794/5e9c0880-8276-43fa-8212-068e33034614.png align="center")
So, I’m done doing the landing page and the display hello world problem/component here is the code i’ve linked the path and its link at the bottom here is the first problem and the output.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726484372400/1296fc55-f70b-40e5-a0d6-f1a4ee0dcbcb.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726484557653/4e0db182-44e4-4e09-a972-0567a0e29f53.png align="center")
This is the output. ^
Based on the instruction “Display the text "Hello World" on the screen using a variable from the TypeScript file.” I need to create a variable so I declared and initialized and variable with the name of “message” its data type is “string” and then the value is “hello world” that’s how I do it.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726485554096/b1950bf4-3837-4356-981c-6c14766203fe.png align="center")
This is how I push the folder displayhelloworld in the repository I add it and then I wrote the path manually by typing what is written in the photo and then I checked the status.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726485655749/5fad31bf-42b0-4d73-93fa-21913ba26c04.png align="center")
Once I saw that everything is okay I commited it by using the commit command and then I added the link of my repository I had a mistake while writing the command for the git branch that’s why there’s an error but I fixed it immediately. That’s how I pushed it.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726485812688/813856b3-df0f-4009-912e-e475fa6b709b.png align="center")
This is the displayhelloworld files.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726486365711/ef42b81e-28ae-4c57-822a-5f76d009e342.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726486550647/f0cd9ac8-a1e7-4acc-b1d7-d018b8b6f453.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726486679889/ee6a9d81-040b-4d3a-ba3e-0296cd9d7777.png align="center")
I’ve generated a showhellobutton for the next problem. Include it in “declaration” in your app module. but in vscode it is automatic. Just add the path on the app-routing.module and put the routerLink in the app.component.html and it will work.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726489404350/e71387af-27c8-4331-8ee0-d6794a64cff1.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726489415969/86741daf-20b7-480e-a8e6-876caf5f4cbf.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726489426730/c91ec906-bcbc-480d-bf15-67cfc0f6063b.png align="center")
So this is what I did, I created a function named showMessage() I made a variable named message and isVisible and their data type are boolean and string. and in the html I used the click() which is equivalent to onClick in javascript and also I used a structural directive “\*ngIf” this is a conditional rendering in angular it i returns the value true or false.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726490633629/9d668531-cd32-40b1-8e35-31a8cf1db5f5.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726490668596/c007c5c4-6d91-4eeb-bfc2-8eaeb0b5fed4.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726490977313/1fdc83f0-4170-418c-8e5d-27177cc67f53.png align="center")
since I’m done with my second problem, I will push it in the github. I checked the status first in order for me to specify the the file or folder that I want to commit. and then after I add and commit my folder I specify the github repo but it is already exist since I pushed the other files a while ago so next is the git branch and I pushed it. the process are the same I don’t need to repeat it again. I will just show the photo.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726499220101/0a677455-83b7-4036-8028-8b14e77317af.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726499241447/72806d4d-e719-490e-b9b1-84bc868f1bf5.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726499251843/9209f37e-de9c-428e-97ba-ceb6b6b80192.png align="center")
so this is the displayname component where I need to input a name and then once I click the button it will show the name from the textbox at the bottom. now I will push it again in the repo. I will not put so much details on pushing because I did that already I will just include the images.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726499593015/c8f89e5b-7759-4c6f-ad29-ad00dc803dbd.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726499603081/8cf168be-9c8d-4b0d-9b1d-115b7dd7ca0a.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726499614617/8226c717-ba3b-4b1c-b399-b537c55d6eb0.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726499639429/9894296b-286c-45e2-92ac-3d62ce2d1189.png align="center")
So here, I already pushed the displayname folder inside my repository. with same commands I am using so no need to elaborate. now I’ll create another components for the next challenge which is counter.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726500655637/a15f3932-6e95-478e-a920-2ffc8fa25f12.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726500663741/5897d2de-50e9-49d8-bdcf-825fabac1cdf.png align="center")
this is the code and the output of the 4th problem which is the counter. I just created a function named counter and a variable with a data type of number with a value of 0. I just add + 1 whenever the button is clicked.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726500921755/38260543-d94e-4875-88e7-e19c9e1cd616.png align="center")
after the counter I pushed in inside my repository. next is the simple form
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726504088592/dbbbc068-94d9-4c06-ae8a-e374dda7e7f5.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726502348026/b4718d6f-f881-4a8e-b068-cefead156d40.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726502364377/2bd1bf73-6a83-4631-8154-75ce192c81f0.png align="center")
So in this problem, simpe form. the codes and the process are the same. now I will push it inside our github repository.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726504596569/0f41a272-8686-48d1-a88b-8c8562e293b1.png align="center")
this is the simpleform added to the repository. I just used the git add, git status used the same path of the simpleform folder “src/app/components/simpleform/” and I commited it after that I pushed it.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726506534020/ab87580b-09f8-426d-b057-842772d8f411.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726506551816/0222d338-b35c-4325-bf11-5bbc25f5637c.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726506799506/d0157051-eb6f-4ac3-977d-2a9d7d8c2fb4.png align="center")
So here, I just finished the userage challege, I pushed it in the github as well. the codes and the output is at the top. so in the year variable I used this expression ti get the current year. I can simply time 2024 but I just want to use this I think its better to try different stuffs to practice my ts/angular skills.
```typescript
new Date().getFullYear();
```
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726508045752/217ace5a-f84f-40f2-8bb5-518b409f1cdd.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726508067734/c4d6b0ba-5c91-4b5a-9dc2-39fe25ef206a.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726508118920/1f87cf9c-2c52-46fd-8958-b2ecefc69e06.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726508261641/02935404-e183-456c-bfc9-edc2f9221460.png align="center")
in this usergreeting challege I just used the “\*ngIf” again. but I put it in the span because if I put it in the h4 tag it will hide all the content including the “hello”. I pushed it as well in the github repo. the logic are almost the same with every challenges that’s why I’m not elaborating it anymore because I explained it already on the previews challeges.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726538737818/92298a62-fccb-4b06-847a-0ad89a9afab3.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726538752431/9bea70ed-0823-4a0a-a902-32e25ec4fef7.png align="center")
So I’m done with the calculator challenge, I did it by creating a 4 different functions that will do the 4 different operations such as addition, subtraction and etc. anyway before I do every challege I will always put it in the path inside the app.routing.module and I will be imported automatically in the app.module my next step is to push it inside the github repository. I will just show the image of this components inside the repo. I will not include the photos of the command.
the commands are the same. first you can check the status by typing “git status” to double check the file that you want to store in the repo. then you can add it by typing “git add \[the specific file name\]” after this you can check the status again if its added already and then after that you can now save it using the commit command ‘git commit -m “you message” ‘, and I will type “git branch -M main” and then I’ll push it after that by typing “git push origin”.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726539784466/57d6c1d8-b5b1-4210-8f84-572a9bd43290.png align="center")
after doing the steps the calculator file will be pushed inside the repo like this.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726542154842/f95468a1-1c47-4bc3-a34d-8550c098fc92.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726542166076/73edbb40-c260-4ae9-a11d-226759dead33.png align="center")
I’m done with the text length problem and I will push it in the repo.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726542419069/cbde477d-8d1d-429c-b1bf-417c9ac4ec34.png align="center")
This is the uploaded file in the repository.\]
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726545450257/a19810a8-dffa-47ec-924d-e3b242bbd4ab.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726545518675/ed4418b5-cf66-4656-86a0-8afda59d1a17.png align="center")
At this challenge currency converter its a little bit difficult for me because I’m not used to angular/ts syntax. so the flow of my code is this. At the currencyconverter.ts I created a variable with a data type number and the value is 0 while the “convertedAmount” variable is set to “number | null” it means this variable may have a value with a data type of number of this can have a null value. and in this case I set the value to null to hide the div on the html (left side). And then I created another variable name “dollarRate” with a value of 0.018 that value is equivalent to one peso if you search it. that’s why I use it. 1 peso is equivalent to that value. and about this line “ <h3>Converted Amount: {{ convertedAmount | number:'1.2-2' }} USD</h3> “
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726546252122/011148e1-ece8-47da-b485-aede6e207ee3.png align="center")
This is the currency converter stored in the repo.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726640527677/af91705f-8082-4d6c-829c-0f9c28f8a085.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726640403104/ca3ad6ec-b845-42ec-89ad-133d463b9535.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726640453210/12cfedad-81c8-4b2d-afa1-7ad1665e43b1.png align="center")
This is the odd even checker. Whenever I type a number it will tell me if a number is odd or even. I didn’t use any function because I think the directives are enough to do it. I use “\*ngIf” directives in the ts I just created a variable named “number” that holds the value of 0, in the div tag with the “*ngIf="number !== 0" the purpose of this is to hide the div. if the value of the textbox is 0 then the div is hidden and when I type numbers in the textbox it will start the checking immediately.
*ngIf="number % 2 == 0" so in the second div I wrote a code to check if the remainder is 2. to check whether the number is even is by looking at the remainder if the remainder is 2 then its even number. and if the remainder is not 0 then it’s odd like this *ngIf="number % 2 == 1" next I will push it in the repo and then I’ll move to the next component/challenge.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726641096637/0b726428-6b49-41ea-a669-a4e92d58c6d7.png align="center")
So I pushed it. now I will do the next challenge.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726643914100/b6dbd2b7-a8ad-4d27-b89f-efadda215fb9.png align="center")
This is the word reverse. so I will explain my code works,
```typescript
wordReverser(reverseWord: string) {
return reverseWord.split('').reverse().join('');
}
```
I’ve created a function named “wordReverse” this function holds a 1 parameter named “reverseWord” with a type of string. and inside the function it will return this
```typescript
reverseWord.split('').reverse().join('');
```
the split() method separates the the word from the reverseWord paramether. It will separate each letter and place it inside an array. and then the reverse method will reverse the letter insde the split methd and then the join method will all those letters again but in a reverse patter.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726644544934/206d01bb-1c62-4684-bd93-ccadbf2d728f.png align="center")
this is the output after clicking the button “reverse” now I’ll store it in the repository.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726644652965/00cae819-d435-407a-a83d-ad3fa27d2df6.png align="center")
At the bottom this is the showdate challenge.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726666683092/2aa4f421-9496-4f8d-b121-2e7f57d5373f.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726666692322/aa5f9cc5-24e3-4d87-8cec-291df549ba1a.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726666735452/0c61febe-4fdc-41b3-8794-6c283f004e92.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726666867003/ea05874a-0ee4-4121-9bcf-f5ab961636bf.png align="center")
so in this problem I used the Date() object, i put it inside the variable currentDate and then I put it inside a function named showDate() I added some conditional statement to make it visible whenever the button is click and then if the button is clicked again it the date and time will be invisible again and then in the html part I use the date pipe to format the date. the images of the codes and the output are at the top. the image of the file being stored in the repository is at the top as well.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726669231222/81d7e992-1166-45cf-a7b8-637a844828a0.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726669294702/a9389aad-5ade-4622-909e-1369fba3419a.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726669474266/def27164-9a33-418b-bf3f-01fcfe28c7a5.png align="center")
once I click the button the username that I wrote in the input box will be visible.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726712048660/ec94e419-3012-4757-af2c-a3b3ff1e5867.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726712069064/a9009177-09bc-4c12-a5c3-c2bff35fa504.png align="center")
So here is the multiplicationtable problem. I will explain how I did it, so first in the html side(left side) I’ve created an input field that will get the value from the user and then I used template reference “#tablenumer” to get the value inside the input field.
so in the button below I added a (click) an even binding syntax here in angular and then there’s the function “calculate(tablenumber.value)” this part, once I click the button the value of the input field will be passed to the “calculate()” function so lets move to the right side.
i’ve created an array variable “result” I didn’t set any value but it will store the string value that I will be getting from the html(input tags) inside the calculate function i created a parameter with the type of string, if you are wondering why do I have to make its type a “string” its because any value from the html even if its number is treated as “string” so im telling my function that this parameter “multiplytable” will hold a string value. after that the “this.result\[\]” will clear all the previews date inside so if I start the computation again the value inside the array will be refreshed. and then I’ve created a for loop to iterate the value, this is where I am going to multiply the numbers from my input field. so this line
**const result = i * parseFloat(multiplytable);**
this variable result is different from the array result at the top. this result is the one that will hold the answer if the “i” in the forloop and the multiplytable that’s from html will be multiplied. the parseFloat function holds a converts the multiplytable that is currently a string into a floating-point number in order to make a precise calculations.
and lastly **this.result.push(**`${parseFloat(multiplytable)} * ${i} = ${result}`); this line. is used to **add a new string** to the result array, which contains the formatted calculation result for each multiplication step. and that’s it. I will store it in the repo and upload the image of its file.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726713457100/3acfcb02-2e26-452c-887d-b4c76514bb26.png align="center")
now im done. I will move to the next problem.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726722389426/8837cf77-45ff-4665-a102-802f09713c64.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726722414510/cfbbf406-d28e-493c-9f87-7a042813115e.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726722433149/e3bd7bb7-cdb6-4fb2-a83b-f40e88c6796e.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726722843672/93651110-93d2-4771-9692-0996e030205a.png align="center")
This is the simple login problem as you can see at the photo above.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726731351565/bed2fa68-ace8-45a2-a975-55761eb85b7d.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726731368910/3799b03d-3516-4ee9-8a10-1f890cdd094d.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726732405423/f343064d-b578-42df-9537-61ace05fdc12.png align="center")
This is is the fahrenheit to celsius problem. Im done and I pushed it already. to create this you just need to know the formula of fahrenheit to celsius and you’ll be able to do it.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726735672893/a9613947-5b2c-4c2d-b4fd-22e4f4792f1c.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726735703564/6a6a853e-ddea-4d72-8a8a-e968d4918cf8.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726735754148/a9146268-7a5d-4434-9bd5-acf43610ae44.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726735780235/54b7b8d3-83a7-4a4a-b1dc-447f3026aae8.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726735880697/25773afe-8a57-42d6-a8cb-ee03a5aec9ad.png align="center")
so this is how to make a simple bookmark list and I uploaded it in the repository as well.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726741680856/47025817-35bd-4b5e-82fd-d9db378adf9b.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726741717964/b283b876-3656-4b84-a611-3f2738dff447.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726741838049/b5287367-33be-47d1-a2c5-8ffed85bb455.png align="center")
This is the character counter I pushed in the repository after doing it.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726743380673/e254bfb2-66d3-4400-ab43-56e4c70c0bcc.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726743390900/bf6acf7b-2172-4b49-9529-d843e07b5655.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726743403548/c308e70f-7779-4878-8519-468e8bbcc860.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726744149171/353206db-567d-4046-a65a-9f2eea1022bd.png align="center")
so in this problem palindrome checker what I did was I created a function named checkPalindrome() and then inside that function I created 2 variables. this line
```typescript
const normalText = this.inputText.replace(/[^a-zA-Z0-9]/g, '').toLowerCase();
```
the “this.inputText” is the text or word from the textbox and then the “.replace” method is to remove all the characters that is not a number or letter and the “.toLowerCase()” is to convert everything into lowercase.
```typescript
const reversedText = normalText.split('').reverse().join('');
```
and this line is to reverse the text, i did it before in one of the problem. first the “.split” separates every letter of number and store it inside an array and then the .reverse() will reverse their positions and after that the .join() will join or combine them again but in in reverse.
```typescript
this.isPalindrome = normalText === reversedText;
```
and this line will check if the normaltext and the reversedtext are the same if yes then it’s palindrome and if no its not palindrome.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726744931449/1599551d-5b50-41a0-ac3c-d12b0d75e166.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726744965194/830a5ffe-d6ca-4806-b711-5b804ba4c24b.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726745096900/3a674a7e-02df-485b-beab-a500b49fccb6.png align="center")
This is the temperature converter. **Celsius to Fahrenheit**: Multiply the Celsius temperature by 9/5 and add 32. **Fahrenheit to Celsius**: Subtract 32 from the Fahrenheit temperature and multiply by 5/9.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726746421026/52b3cec8-c03e-4342-aaff-ebf462fb6dbf.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726746440689/3065b067-2f55-4795-9917-202edcc67eb3.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726746538204/a56a8563-537a-4085-9754-91c48b5efeed.png align="center")
This is the shopping list. in the add function to add another item in the array named listItem I just used the .push an array method to insert something in the list and then to remove it just use splice.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726799926054/439b39ed-a6e8-4d3e-ae29-ab59503a4032.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726799943786/139434ff-cdb1-4390-b2d8-1470a1778c94.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726800425140/54599d98-9f36-4791-a4bd-be56a84ee893.png align="center")
This code is used to calculate the factorial of a number. The “calculateFactorial()” function works by multiplying a number “n” by every number before it down to 1. If “n” is 0 or 1, the function simply returns 1, since the factorial of both 0 and 1 is 1.
The “solveFactorial()” function takes the input from the user, converts it to a number, and checks if it’s a valid positive number. If it is, the function calculates the factorial using the “calculateFactorial” method. If the input is invalid or negative, the result is set to 0 to indicate an error.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726803673705/efb13311-ffa1-492f-9919-5f016ba586dd.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726803741079/df574b3c-58f3-439b-8a7e-74b9e5746672.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726803760303/a73f5c4e-a2ad-4dca-8bc0-6be04884871a.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726803776290/4691e02a-92bc-4f1d-9533-e493fb388131.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726803916293/7a959082-2e83-468f-8bd7-2288da0943bc.png align="center")
so this is the simple todo manager I used the same process on the shopping list. I just created a 2 function one that will add and one that will remove the list the is stored in the array and then I used the .push and .splice for it.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726810715655/3669fb27-207f-4832-a08d-6a9493f63165.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726810753017/d1c1a3af-70e1-41bf-9837-1c4fe0905183.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726810768010/c49df370-1a9e-4a5d-8314-5748e46232fe.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726810962544/d1167054-3f1a-4685-98c7-358ccd405884.png align="center")
This is the guess number game.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726811499661/9165b590-4e0f-443e-af88-33fbcba770ad.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726811514591/841aa3f8-b3b3-44df-8271-d99d7026fbaf.png align="center")
this is the word counter and I pushed in in the repository.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726811910340/5dff3878-4b22-446d-9c3f-79b9076e7177.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726812000590/ddbf93df-f3ec-43ab-8282-00d738501b16.png align="center")
This is the random number generator and I pushed it in the repository.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726812485502/40cdd0a1-81cd-4a46-89de-14dd19e4aad3.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726812537431/f2bc594f-28b9-44f9-b4fd-a1a166e8bf64.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726812926945/a588e1bc-8819-4c39-8d7d-6c832587f97e.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726812943782/5eb1980b-1447-411f-b573-299b7e092ace.png align="center")
The Uppercase Converter component allows users to input a string and convert it to uppercase. It has two properties: inputstring to store the user's input and uppsercaseString to hold the converted result. The convertToUppercase method uses the toUpperCase() function to transform the input string when the button is clicked. The HTML template features an input field for the string, a button to trigger the conversion, and a paragraph to display the uppercase result, ensuring a simple and interactive user experience.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726813528180/68b6af75-9289-49ab-92a2-f58944230494.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726813607200/2dc16fb6-7930-448f-a1f7-19415e5933de.png align="center")
The Shuffle Word component allows users to input a word and randomly shuffle its letters. In the TypeScript file, `inputWord` stores the user's input, and `shuffledWord` holds the result. The `shuffleLetters` method splits the word into letters, shuffles them using the Fisher-Yates algorithm, and returns the shuffled string. The `shuffleInputWord` method triggers this process when the button is clicked. The HTML template includes an input field for the word, a button to shuffle it, and a paragraph to display the result, creating an interactive experience.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726813975740/2a27d639-b5cc-47b9-944f-7fb822440692.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726814011431/694775eb-59d6-46c6-afdd-26853359d34c.png align="center")
The BMI Calculator component lets users input their height and weight to calculate their Body Mass Index (BMI). In the TypeScript file, `height`, `weight`, and `bmi` are defined. The `calculateBMI` method checks for positive values, converts height to meters, and calculates BMI using the formula: weight divided by height squared.
In the HTML template, users enter their weight and height, then click a button to calculate BMI. The result is displayed if it's calculated. This setup provides a straightforward way for users to compute and see their BMI.
REPOSITORY: [https://github.com/thisisnotsnorlax/AngularComponents.git](https://github.com/thisisnotsnorlax/AngularComponents.git)