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.

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.

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.

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.

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.

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.

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.

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.

This is the displayhelloworld files.

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.

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.

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.

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.

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.

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.

after the counter I pushed in inside my repository. next is the simple form

So in this problem, simpe form. the codes and the process are the same. now I will push it inside our github repository.

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.

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.

new Date().getFullYear();

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.

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”.

after doing the steps the calculator file will be pushed inside the repo like this.

I’m done with the text length problem and I will push it in the repo.

This is the uploaded file in the repository.]

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

This is the currency converter stored in the repo.

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.

So I pushed it. now I will do the next challenge.

This is the word reverse. so I will explain my code works,

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

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.

this is the output after clicking the button “reverse” now I’ll store it in the repository.

At the bottom this is the showdate challenge.

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.

once I click the button the username that I wrote in the input box will be visible.

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.

now im done. I will move to the next problem.

This is the simple login problem as you can see at the photo above.

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.

so this is how to make a simple bookmark list and I uploaded it in the repository as well.

This is the character counter I pushed in the repository after doing it.

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

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.

    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.

 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.

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.

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.

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.

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.

This is the guess number game.

this is the word counter and I pushed in in the repository.

This is the random number generator and I pushed it in the repository.

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.

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.

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