Documentation on Angular Components Activity

Creating an angular project where it focuses on components with their each individual situations.

The first step is to set up the angular packages and modules and after that we can do this provided code snippets.

One the APP.MODULE.TS

import {Route, RouterModule, RouterOutlet} from "@angular/router";
import {AppComponent} from "./app.component";
import {NgModule} from "@angular/core";
import {BrowserModule} from "@angular/platform-browser";
import {CommonModule} from "@angular/common";
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
import {DisplayhelloworldComponent} from "./components/displayhelloworld/displayhelloworld.component";
import {ShowhellobuttonComponent} from "./components/showhellobutton/showhellobutton.component";
import {DisplaynameComponent} from "./components/displayname/displayname.component";
import {FormsModule} from "@angular/forms";
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 {FarehnheittocelciusComponent} from "./components/farehnheittocelcius/farehnheittocelcius.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 {VowelcounterComponent} from "./components/vowelcounter/vowelcounter.component";
import {RandomcolorchangerComponent} from "./components/randomcolorchanger/randomcolorchanger.component";
import {StringreverserComponent} from "./components/stringreverser/stringreverser.component";
import {GreetingselectorComponent} from "./components/greetingselector/greetingselector.component";
import {DivisioncheckerComponent} from "./components/divisionchecker/divisionchecker.component";
import {ForloopComponent} from "./components/forloop/forloop.component";
import {WhileloopComponent} from "./components/whileloop/whileloop.component";
import {StudentnamesComponent} from "./components/studentnames/studentnames.component";
import {NestedloopingComponent} from "./components/nestedlooping/nestedlooping.component";
import {GamepickerComponent} from "./components/gamepicker/gamepicker.component";


const routes: Route[] = [
  {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: 'Evenoddchecker', component: EvenoddcheckerComponent},
  {path: 'Wordreverser', component: WordreverserComponent},
  {path: 'Showdate', component: ShowdateComponent},
  {path: 'Showusername', component: ShowusernameComponent},
  {path: 'Multiplicationtable', component: MultiplicationtableComponent},
  {path: 'Simplelogin', component: SimpleloginComponent},
  {path: 'Farehnheittocelcius', component: FarehnheittocelciusComponent},
  {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: 'Vowelcounter', component: VowelcounterComponent},
  {path: 'Randomcolorchanger', component: RandomcolorchangerComponent},
  {path: 'Stringreverser', component: StringreverserComponent},
  {path: 'Greetingselector', component: GreetingselectorComponent},
  {path: 'Divisionchecker', component: DivisioncheckerComponent},
  {path: 'Forloop', component: ForloopComponent},
  {path: 'Whileloop', component: WhileloopComponent},
  {path: 'Studentnames', component: StudentnamesComponent},
  {path: 'Nestedlooping', component: NestedloopingComponent},
  {path: 'Gamepicker', component: GamepickerComponent},


]

@NgModule({

  imports: [
    CommonModule,
    BrowserModule,
    BrowserAnimationsModule,
    RouterModule.forRoot(routes, {enableTracing: true}),
    FormsModule,
  ],

  declarations: [
    AppComponent,
    DisplayhelloworldComponent,
    ShowhellobuttonComponent,
    DisplaynameComponent,
    CounterComponent,
    SimpleformComponent,
    UserageComponent,
    UsergreetingComponent,
    CalculatorComponent,
    TextlengthComponent,
    CurrencyconverterComponent,
    EvenoddcheckerComponent,
    WordreverserComponent,
    ShowdateComponent,
    ShowusernameComponent,
    MultiplicationtableComponent,
    SimpleloginComponent,
    FarehnheittocelciusComponent,
    BookmarklistComponent,
    CharactercounterComponent,
    PalindromecheckerComponent,
    TemperatureconverterComponent,
    ShoppinglistComponent,
    FactorialcalculatorComponent,
    TodomanagerComponent,
    GuessnumbergameComponent,
    WordcounterComponent,
    RandomnumbergeneratorComponent,
    MultiplicationcheckerComponent,
    UppercaseconverterComponent,
    WordshufflerComponent,
    BmisolverComponent,
    UsernamevalidatorComponent,
    InterestcalculatorComponent,
    CompoundinterestcalculatorComponent,
    FibonaccigeneratorComponent,
    OddsumcalculatorComponent,
    CurrencyformatterComponent,
    RandomquotedisplayComponent,
    UppercasegreetingComponent,
    DivisiblecheckerComponent,
    VowelcounterComponent,
    RandomcolorchangerComponent,
    StringreverserComponent,
    GreetingselectorComponent,
    DivisioncheckerComponent,
    ForloopComponent,
    WhileloopComponent,
    StudentnamesComponent,
    NestedloopingComponent,
    GamepickerComponent
  ],

  providers:[


  ],

  bootstrap: [
    AppComponent
  ]

})


export class  AppModule {}

The APP.COMPONENT.HTML

<h2>**** 50 Angular Components ****</h2>

<ul>
  <li><a routerLink = "/Displayhelloworld" routerLinkActive="active">Click this to Display Hello World</a></li>
  <br>
  <li><button routerLink = "/Showhellobutton" routerLinkActive = "active">Click this to Display Hello World</button></li>
  <br>
  <li><a routerLink="/Displayname">Display Name</a></li>
  <br>
  <li><a routerLink="/Counter">Counter</a></li>
  <br>
  <li><a routerLink="/Simpleform">Simple Form</a></li>
  <br>
  <li><a routerLink="/Userage">User Age</a></li>
  <br>
  <li><a routerLink="/Usergreeting">User Greeting</a></li>
  <br>
  <li><a routerLink="/Calculator">Calculator</a></li>
  <br>
  <li><a routerLink="/Textlength">Text Length</a></li>
  <br>
  <li><a routerLink="/Currencyconverter">Currency Converter</a></li>
  <br>
  <li><a routerLink="/Evenoddchecker">Even or Odd Checker</a></li>
  <br>
  <li><a routerLink="/Wordreverser">Word Reverser</a></li>
  <br>
  <li><a routerLink="/Showdate">Show the date</a></li>
  <br>
  <li><a routerLink="/Showusername">Show the username</a></li>
  <br>
  <li><a routerLink="/Multiplicationtable">Multiplication Table</a></li>
  <br>
  <li><a routerLink="/Simplelogin">Simple Login</a></li>
  <br>
  <li><a routerLink="/Farehnheittocelcius">Farehnheit to Celcius</a></li>
  <br>
  <li><a routerLink="/Bookmarklist">Bookmark List</a></li>
  <br>
  <li><a routerLink="/Charactercounter">Character Counter</a></li>
  <br>
  <li><a routerLink="/Palindromechecker">Palindrome Checker</a></li>
  <br>
  <li><a routerLink="/Temperatureconverter">Temperature Converter</a></li>
  <br>
  <li><a routerLink="/Shoppinglist">Shopping List</a></li>
  <br>
  <li><a routerLink="/Factorialcalculator">Factorial Calculator</a></li>
  <br>
  <li><a routerLink="/Todomanager">To Do Manager</a></li>
  <br>
  <li><a routerLink="/Guessnumbergame">Guess number game</a></li>
  <br>
  <li><a routerLink="/Wordcounter">Word Counter</a></li>
  <br>
  <li><a routerLink="/Randomnumbergenerator">Random Number Generator</a></li>
  <br>
  <li><a routerLink="/Multiplicationchecker">Multiplication Checker</a></li>
  <br>
  <li><a routerLink="/Uppercaseconverter">Uppercase Converter</a></li>
  <br>
  <li><a routerLink="/Wordshuffler">Words Shuffler</a></li>
  <br>
  <li><a routerLink="/Bmisolver">BMI Solver</a></li>
  <br>
  <li><a routerLink="/Usernamevalidator">Username Validator</a></li>
  <br>
  <li><a routerLink="/Interestcalculator">Interest Calculator</a></li>
  <br>
  <li><a routerLink="/Compoundinterestcalculator">Compound Interest Calculator</a></li>
  <br>
  <li><a routerLink="/Fibonaccigenerator">Fibonacci Generator</a></li>
  <br>
  <li><a routerLink="/Oddsumcalculator">Odd Sum Calculator</a></li>
  <br>
  <li><a routerLink="/Currencyformatter">Currency Formatter</a></li>
  <br>
  <li><a routerLink="/Randomquotedisplay">Random Quote Display</a></li>
  <br>
  <li><a routerLink="/Uppercasegreeting">Uppercase Greeting</a></li>
  <br>
  <li><a routerLink="/Divisiblechecker">Divisible Checker</a></li>
  <br>
  <li><a routerLink="/Vowelcounter">Vowel Counter</a></li>
  <br>
  <li><a routerLink="/Randomcolorchanger">Random Color Changer</a></li>
  <br>
  <li><a routerLink="/Stringreverser">String Reverser</a></li>
  <br>
  <li><a routerLink="/Greetingselector">Greetings Selector</a></li>
  <br>
  <li><a routerLink="/Divisionchecker">Division Checker</a></li>
  <br>
  <li><a routerLink="/Forloop">For Looping</a></li>
  <br>
  <li><a routerLink="/Whileloop">While Looping</a></li>
  <br>
  <li><a routerLink="/Studentnames">List of Student Names</a></li>
  <br>
  <li><a routerLink="/Nestedlooping">Nested Looping</a></li>
  <br>
  <li><a routerLink="/Gamepicker">Game Picker</a></li>
  <br>




</ul>

<router-outlet></router-outlet>

The MAIN.TS:

import {platformBrowserDynamic} from "@angular/platform-browser-dynamic";
import {AppModule} from "./app/app.module";


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

And the following is the snippets of each components and the description of their each functionalities.

#1 Component name: displayhelloworld

Displaying a hello world

displayhelloworld.component.html

<p>Hello World!</p>

displayhelloworld.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-displayhelloworld',
  templateUrl: './displayhelloworld.component.html',
  styleUrl: './displayhelloworld.component.css'
})
export class DisplayhelloworldComponent {

}

#2 component name: showhellobutton

Shows a hello button and display ‘Hello World!!!‘

<p>Hello World!!!</p>

import { Component } from '@angular/core';

@Component({
  selector: 'app-showhellobutton',
  templateUrl: './showhellobutton.component.html',
  styleUrl: './showhellobutton.component.css'
})
export class ShowhellobuttonComponent {


}

#3 Component name: displayname

When user input their name it shows in the output when submitted

<!-- displayname.component.html -->

<input type="text" placeholder="Input your name" [(ngModel)]="name"><button type="button" (click)="show()">Submit</button>
<br>
<p>{{result}}</p>

//    displayname.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-displayname',
  templateUrl: './displayname.component.html',
  styleUrl: './displayname.component.css'
})
export class DisplaynameComponent {

  name: string = '';
  result: string = '';

  show() : void {
    this.result = this.name;
  }
}

#4 Component name: counter

When a button get clicked, the number will increment

<!-- counter.component.html-->

  <p>Counter: {{ counter }}<p>
  <button (click)="incrementCounter()">Click to increase number</button>

//counter.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-counter',
  templateUrl: './counter.component.html',
  styleUrl: './counter.component.css'
})
export class CounterComponent {
  counter: number = 0;

  incrementCounter(){
    this.counter++;
  }
}

#5 Component name: simpleform

Create a form with text inputs and a submit button, display the submitted input data.

<!-- simpleform.component.html -->

<p>Simple Form</p>
<form (ngSubmit)="submitForm()">
  <label for="name">Name:<br></label>
  <input type="text" id="name" [(ngModel)]="formData.name" name="name" required>
  <br>
  <label for="email">Email:<br></label>
  <input type="email" id="email" [(ngModel)]="formData.email" name="email" required>
  <br>
  <label >Address:<br></label>
  <input type="text" [(ngModel)]="formData.address" name="address" required>
  <br>
  <button type="submit">Submit</button>
</form>

//simpleform.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-simpleform',
  templateUrl: './simpleform.component.html',
  styleUrl: './simpleform.component.css'
})
export class SimpleformComponent {
  formData = {
    name: '',
    email: '',
    address: '',
  };
  submitForm() {
    console.log('Form Submitted!', this.formData);

  }
}

#6 Component name: userage

Input user’s birth year, and when the button is clicked, display their age

<!-- userage.component.html-->

<p>Age Calculator</p>
<form (ngSubmit)="calculateAge()">
  <label for="birthYear">Enter your birth year:</label>
  <input type="number" id="birthYear" [(ngModel)]="birthYear" name="birthYear" required>

  <button type="submit">Calculate Age</button>
</form>


<div *ngIf="age !== null">
  <p>Your Age: {{ age }} years old</p>
</div>

//userage.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-userage',
  templateUrl: './userage.component.html',
  styleUrl: './userage.component.css'
})

export class UserageComponent {
  birthYear: number | null = null;
  age: number | null = null;


  calculateAge() {
    if (this.birthYear) {
      const currentYear = new Date().getFullYear();
      this.age = currentYear - this.birthYear;
    }
  }
}

#7 Component name: usergreeting

When user inputs their name, and when clicked, display a personalized greeting.

<!-- usergreeting.component.html-->
<p>Greeting Generator</p>
<form (ngSubmit)="displayGreeting()">
  <label for="userName">Enter your name:</label>
  <input type="text" id="userName" [(ngModel)]="userName" name="userName" required>

  <button type="submit">Greet Me</button>
</form>

<div *ngIf="greeting">
  <p>{{ greeting }}</p>
</div>

//usergreeting.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-usergreeting',
  templateUrl: './usergreeting.component.html',
  styleUrl: './usergreeting.component.css'
})
export class UsergreetingComponent {
  userName: string = '';
  greeting: string | null = null;

  displayGreeting() {
    if (this.userName) {
      this.greeting = `Hello, ${this.userName}! Welcome!🎉`;
    }
  }
}

#8 Component name: calculator

A simple calculator with add, subtract, multiply, and divide functionalities.

<!-- calculator.component.html-->

<p>Simple Calculator</p>
<form>
  <label for="num1">Number 1:</label>
  <input type="number" id="num1" [(ngModel)]="num1" name="num1" required>
  <br>
  <label for="num2">Number 2:</label>
  <input type="number" id="num2" [(ngModel)]="num2" name="num2" required>

  <div style="margin: 5px">
    <button style="margin: 3px" type="button" (click)="add()">Add</button>
    <button style="margin: 3px" type="button" (click)="subtract()">Subtract</button>
    <button style="margin: 3px" type="button" (click)="multiply()">Multiply</button>
    <button style="margin: 3px" type="button" (click)="divide()">Divide</button>
  </div>
    </form>
  <div *ngIf="result !== null">
  <p>Result: {{ result }}</p>
</div>

//calculator.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-calculator',
  templateUrl: './calculator.component.html',
  styleUrl: './calculator.component.css'
})
export class CalculatorComponent {
  num1: number | null = null;
  num2: number | null = null;
  result: number | null = null;

  add() {
    if (this.num1 !== null && this.num2 !== null) {
      this.result = this.num1 + this.num2;
    }
  }

  subtract() {
    if (this.num1 !== null && this.num2 !== null) {
      this.result = this.num1 - this.num2;
    }
  }

  multiply() {
    if (this.num1 !== null && this.num2 !== null) {
      this.result = this.num1 * this.num2;
    }
  }

  divide() {
    if (this.num1 !== null && this.num2 !== null && this.num2 !== 0) {
      this.result = this.num1 / this.num2;
    } 
  }
}

#9 Component name: textlength

Input a string, and when the button is clicked, display the length of the string.

<!-- textlength.component.html-->
<p>Text Length Calculator</p>
<form (ngSubmit)="calculateLength()">
  <label for="inputText">Enter a string:</label>
  <input type="text" id="inputText" [(ngModel)]="inputText" name="inputText" required>

  <button style="margin: 2px" type="submit">Calculate Length</button>
</form>

<div *ngIf="textLength !== null">
  <p>Length of the string: {{ textLength }}</p>
</div>

//textlength.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-textlength',
  templateUrl: './textlength.component.html',
  styleUrl: './textlength.component.css'
})
export class TextlengthComponent {
  inputText: string = '';
  textLength: number | null = null;

  // Method to calculate the length of the input string
  calculateLength() {
    this.textLength = this.inputText.length;
  }
}

#10 Component name: currencyconverter

When user input a value it converts the value usd to php

<!-- currencyconverter.component.html-->
<p>Currency Converter (USD to PHP)</p>
<form (ngSubmit)="convertCurrency()">
  <label for="usdAmount">Enter amount in USD:</label>
  <input type="number" id="usdAmount" [(ngModel)]="usdAmount" name="usdAmount" required>

  <button type="submit">Convert</button>
</form>

<div *ngIf="phpAmount !== null">
  <p>Amount in PHP: ₱{{ phpAmount }}</p>
</div>

//currencyconverter.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-currencyconverter',
  templateUrl: './currencyconverter.component.html',
  styleUrl: './currencyconverter.component.css'
})
export class CurrencyconverterComponent {
  usdAmount: number | null = null;
  phpAmount: number | null = null;
  conversionRate: number = 56; // Conversion rate: 1 USD = 56 PHP

  // Method to convert USD to PHP
  convertCurrency() {
    if (this.usdAmount !== null) {
      this.phpAmount = this.usdAmount * this.conversionRate;
    }
  }
}

#11 Component name: evenoddchecker

When inputs a number, it checks if it is even or odd.

<!-- evenoddchecker.component.html-->
<p>Even or Odd Checker</p>
<form (ngSubmit)="checkEvenOdd()">
  <label for="inputNumber">Enter a number:</label>
  <input type="number" id="inputNumber" [(ngModel)]="inputNumber" name="inputNumber" required>

  <button type="submit">Check</button>
</form>

<div *ngIf="resultMessage">
  <p>{{ resultMessage }}</p>
</div>

//evenoddchecker.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-evenoddchecker',
  templateUrl: './evenoddchecker.component.html',
  styleUrl: './evenoddchecker.component.css'
})
export class EvenoddcheckerComponent {
  inputNumber: number | null = null;
  resultMessage: string | null = null;

      checkEvenOdd() {
    if (this.inputNumber !== null) {
      if (this.inputNumber % 2 === 0) {
        this.resultMessage = `${this.inputNumber} is even.`;
      } else {
        this.resultMessage = `${this.inputNumber} is odd.`;
      }
    }
  }
}

#12 Component name: wordreverser

Reversing the inputted characters in the output

<!-- wordreverser.component.html-->
<p>Word Reverser</p>
<form (ngSubmit)="reverseWord()">
  <label for="inputWord">Enter a word:</label>
  <input type="text" id="inputWord" [(ngModel)]="inputWord" name="inputWord" required>

  <button type="submit">Reverse</button>
</form>

<div *ngIf="reversedWord !== null">
  <p>Reversed Word: {{ reversedWord }}</p>
</div>

//wordreverser.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-wordreverser',
  templateUrl: './wordreverser.component.html',
  styleUrl: './wordreverser.component.css'
})
export class WordreverserComponent {
  inputWord: string = '';
  reversedWord: string | null = null;

  reverseWord() {
    this.reversedWord = this.inputWord.split('').reverse().join('');
  }
}

#13 Component name: showdate

A button that shows the current date and time when clicked.

<!-- showdate.component.html-->


<button (click)="showCurrentDate()">Show Current Date and Time</button>
<p *ngIf="currentDate">Current Date and Time: {{ currentDate }}</p>

//showdate.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-showdate',
  templateUrl: './showdate.component.html',
  styleUrl: './showdate.component.css'
})
export class ShowdateComponent {
  currentDate: string | null = null;

  showCurrentDate() {
    this.currentDate = new Date().toLocaleString();
  }
}
import { Component } from '@angular/core';

@Component({
  selector: 'app-showdate',
  templateUrl: './showdate.component.html',
  styleUrl: './showdate.component.css'
})
export class ShowdateComponent {
  currentDate: string | null = null;

  showCurrentDate() {
    this.currentDate = new Date().toLocaleString();
  }
}

#14 Component name: showusername

User inputs their username, and on clicking a button, their username is displayed on the screen.

<!-- showusername.component.html-->

<input type="text" [(ngModel)]="username" placeholder="Enter your username" />
<button (click)="showUsername()">Show Username</button>
<p *ngIf="displayedUsername">Your Username: {{ displayedUsername }}</p>

//showusername.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-showusername',
  templateUrl: './showusername.component.html',
  styleUrl: './showusername.component.css'
})
export class ShowusernameComponent {
  username: string = '';
  displayedUsername: string | null = null;

  showUsername() {
    this.displayedUsername = this.username;
  }
}

#15 Component name: multiplicationtable

When number is inputted its generates a multiplication table.

<!-- multiplicationtable.component.html-->

<input type="number" [(ngModel)]="number" placeholder="Enter a number" />
<button (click)="generateTable()">Generate Multiplication Table</button>
<table *ngIf="table.length > 0">
  <tr>
    <th>Multiplier</th>
    <th>Result</th>
  </tr>
  <tr *ngFor="let result of table; let i = index">
    <td>{{ i + 1 }}</td>
    <td>{{ result }}</td>
  </tr>
</table>

//multiplicationtable.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-multiplicationtable',
  templateUrl: './multiplicationtable.component.html',
  styleUrl: './multiplicationtable.component.css'
})
export class MultiplicationtableComponent {
  number: number | null = null;
  table: number[] = [];

  generateTable() {
    if (this.number !== null) {
      this.table = Array.from({ length: 10 }, (_, i) => this.number! * (i + 1));
    }
  }
}

#16 Component name: simplelogin

A simple login form with email and password fields.

<!-- simplelogin.component.html-->
<p>Login</p>
<input type="email" [(ngModel)]="email" placeholder="Email" />
<input type="password" [(ngModel)]="password" placeholder="Password" />
<button (click)="login()">Login</button>
<p *ngIf="loginMessage">{{ loginMessage }}</p>

//simplelogin.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-simplelogin',

  templateUrl: './simplelogin.component.html',
  styleUrl: './simplelogin.component.css'
})
export class SimpleloginComponent {
  email: string = '';
  password: string = '';
  loginMessage: string | null = null;

  login() {
    if (this.email && this.password) {
      // Here you can implement actual login logic (e.g., authentication)
      this.loginMessage = `Logged in with Email: ${this.email}`;
    } else {
      this.loginMessage = 'Please enter both email and password.';
    }
  }
}

#17 Component name: fahrenheittocelsius

Convert temperature from Fahrenheit to Celsius when the user inputs a value.

<!-- fahrenheittocelsius.component.html-->

<p>Fahrenheit to Celsius Converter</p>
<input type="number" [(ngModel)]="fahrenheit" placeholder="Enter temperature in Fahrenheit" />
<button (click)="convertToCelsius()">Convert</button>
<p *ngIf="celsius !== null">Temperature in Celsius: {{ celsius | number: '1.1-1' }}</p>

//fahrenheittocelsius.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-farehnheittocelcius',

  templateUrl: './farehnheittocelcius.component.html',
  styleUrl: './farehnheittocelcius.component.css'
})
export class FarehnheittocelciusComponent {
  fahrenheit: number | null = null;
  celsius: number | null = null;

  convertToCelsius() {
    if (this.fahrenheit !== null) {
      this.celsius = (this.fahrenheit - 32) * (5 / 9);
    }
  }
}

#18 Component name: bookmarklist

This allow users to input URLs and display them using anchor tags.

<!-- bookmarklist.component.html-->

<h2>Bookmark List</h2>
<input type="url" [(ngModel)]="url" placeholder="Enter a URL" />
<button (click)="addBookmark()">Add Bookmark</button>
<ul>
  <li *ngFor="let bookmark of bookmarks">
    <a [href]="bookmark" target="_blank">{{ bookmark }}</a>
  </li>
</ul>

//bookmarklist.component.html

import { Component } from '@angular/core';

@Component({
  selector: 'app-bookmarklist',

  templateUrl: './bookmarklist.component.html',
  styleUrl: './bookmarklist.component.css'
})
export class BookmarklistComponent {
  url: string = '';
  bookmarks: string[] = [];

  addBookmark() {
    if (this.url) {
      this.bookmarks.push(this.url);
      this.url = '';
    }
  }
}

#19 Component name: charactercounter

Thins function counts the number of characters on the input.

<!-- charactercounter.component.html-->
<p>Character Counter</p>
<input type="text" [(ngModel)]="inputString" placeholder="Type your string here" />
<button (click)="countCharacters()">Count Characters</button>
<p *ngIf="characterCount >= 0">Character Count: {{ characterCount }}</p>

//charactercounter.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-charactercounter',

  templateUrl: './charactercounter.component.html',
  styleUrl: './charactercounter.component.css'
})
export class CharactercounterComponent {
  inputString: string = '';
  characterCount: number = 0;

  countCharacters() {
    this.characterCount = this.inputString.length;
  }
}

#20 Component name: palindromechecker

Input a word and check if it's a palindrome.

<!-- palindromechecker.component.html-->

<p>Palindrome Checker</p>
<input type="text" [(ngModel)]="inputWord" placeholder="Enter a word" />
<button (click)="checkPalindrome()">Check</button>
<p *ngIf="isPalindrome !== null">
  The word "{{ inputWord }}" is {{ isPalindrome ? '' : 'not ' }}a palindrome.
</p>

//palindromechecker.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-palindromechecker',

  templateUrl: './palindromechecker.component.html',
  styleUrl: './palindromechecker.component.css'
})
export class PalindromecheckerComponent {
  inputWord: string = '';
  isPalindrome: boolean | null = null;

  checkPalindrome() {
    const normalizedWord = this.inputWord.toLowerCase().replace(/\s+/g, '');
    this.isPalindrome = normalizedWord === normalizedWord.split('').reverse().join('');
  }
}

#21 Component name: temperatureconverter

Convert temperature from Celsius to Fahrenheit and vice versa.

<!-- temperatureconverter.component.html-->

<p>Temperature Converter</p>

<input type="number" [(ngModel)]="celsius" placeholder="Celsius" />

<button (click)="convertToFahrenheit()">Convert to Fahrenheit</button>
<p *ngIf="fahrenheit !== null">Fahrenheit: {{ fahrenheit }}</p>

<input type="number" [(ngModel)]="fahrenheit" placeholder="Fahrenheit" />
<button (click)="convertToCelsius()">Convert to Celsius</button>
<p *ngIf="celsius !== null">Celsius: {{ celsius }}</p>

//temperatureconverter.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-temperatureconverter',

  templateUrl: './temperatureconverter.component.html',
  styleUrl: './temperatureconverter.component.css'
})
export class TemperatureconverterComponent {
  celsius: number | null = null;
  fahrenheit: number | null = null;

  convertToFahrenheit() {
    if (this.celsius !== null) {
      this.fahrenheit = (this.celsius * 9/5) + 32;
    }
  }

  convertToCelsius() {
    if (this.fahrenheit !== null) {
      this.celsius = (this.fahrenheit - 32) * 5/9;
    }
  }

}

#22 Component name: shoppinglist

A users can add and remove items in this function

<!-- shoppinglist.component.html-->

<p>Shopping List</p>
<input type="text" [(ngModel)]="item" placeholder="Add an item" />
<button (click)="addItem()">Add</button>
<ul>
  <li *ngFor="let item of shoppingList; let i = index">
    {{ item }} <button (click)="removeItem(i)">Remove</button>
  </li>
</ul>

//shoppinglist.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-shoppinglist',

  templateUrl: './shoppinglist.component.html',
  styleUrl: './shoppinglist.component.css'
})
export class ShoppinglistComponent {
  item: string = '';
  shoppingList: string[] = [];

  addItem() {
    if (this.item) {
      this.shoppingList.push(this.item);
      this.item = '';
    }
  }

  removeItem(index: number) {
    this.shoppingList.splice(index, 1);
  }

}

#23 Component name: factorialcalculator

Input a number and calculate its factorial when a button is clicked.

<!-- factorialcalculator.component.html-->
<p>Factorial Calculator</p>
<input type="number" [(ngModel)]="number" placeholder="Enter a number" />
<button (click)="calculateFactorial()">Calculate</button>
<p *ngIf="factorial !== null">Factorial: {{ factorial }}</p>

//factorialcalculator.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-factorialcalculator',

  templateUrl: './factorialcalculator.component.html',
  styleUrl: './factorialcalculator.component.css'
})
export class FactorialcalculatorComponent {
  number: number | null = null;
  factorial: number | null = null;

  calculateFactorial() {
    if (this.number !== null && this.number >= 0) {
      this.factorial = this.factorialHelper(this.number);
    }
  }

  private factorialHelper(n: number): number {
    return n <= 1 ? 1 : n * this.factorialHelper(n - 1);
  }
}

#24 Component name: todomanager

A simple to-do list where users can add and remove tasks

<!-- todomanager.component.html-->

<p>To-Do List</p>
<input type="text" [(ngModel)]="task" placeholder="Add a task" />
<button (click)="addTask()">Add</button>
<ul>
  <li *ngFor="let task of tasks; let i = index">
    {{ task }} <button (click)="removeTask(i)">Finished</button>
  </li>
</ul>

//todomanager.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-todomanager',

  templateUrl: './todomanager.component.html',
  styleUrl: './todomanager.component.css'
})
export class TodomanagerComponent {
  task: string = '';
  tasks: string[] = [];

  addTask() {
    if (this.task) {
      this.tasks.push(this.task);
      this.task = '';
    }
  }

  removeTask(index: number) {
    this.tasks.splice(index, 1);
  }
}

#25 Component name: guessnumbergame

A random number guessing game where the user inputs guesses.

<!-- guessnumbergame.component.html-->

<p>Guess Number Game</p>
<input type="number" [(ngModel)]="guess" placeholder="Enter your guess" />
<button (click)="checkGuess()">Guess</button>
<p>{{ message }}</p>
<button (click)="resetGame()">Reset Game</button>

//guessnumbergame.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-guessnumbergame',

  templateUrl: './guessnumbergame.component.html',
  styleUrl: './guessnumbergame.component.css'
})
export class GuessnumbergameComponent {
  randomNumber: number = Math.floor(Math.random() * 100) + 1;
  guess: number | null = null;
  message: string = '';

  checkGuess() {
    if (this.guess !== null) {
      if (this.guess < this.randomNumber) {
        this.message = 'Too low! Try again.';
      } else if (this.guess > this.randomNumber) {
        this.message = 'Too high! Try again.';
      } else {
        this.message = 'Congratulations! You guessed it!';
      }
    }
  }

  resetGame() {
    this.randomNumber = Math.floor(Math.random() * 100) + 1;
    this.guess = null;
    this.message = '';
  }
}

#26 Component name: wordcounter

Input a string and count the number of words in it.

<!-- wordcounter.component.html-->
<p>Word Counter</p>
<input type="text" [(ngModel)]="inputString" placeholder="Enter a sentence" />
<button (click)="countWords()">Count Words</button>
<p>Word Count: {{ wordCount }}</p>

//wordcounter.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-wordcounter',

  templateUrl: './wordcounter.component.html',
  styleUrl: './wordcounter.component.css'
})
export class WordcounterComponent {
  inputString: string = '';
  wordCount: number = 0;

  countWords() {
    this.wordCount = this.inputString.trim() ? this.inputString.trim().split(/\s+/).length : 0;
  }
}

#27 Component name: randomnumbergenerator

Generate and display a random number between a specified range when a button is clicked.

<!-- randomnumbergenerator.component.html-->
<p>Random Number Generator</p>
<input type="number" [(ngModel)]="min" placeholder="Min value" />
<input type="number" [(ngModel)]="max" placeholder="Max value" />
<button (click)="generateRandomNumber()">Generate</button>
<p *ngIf="randomNumber !== null">Random Number: {{ randomNumber }}</p>

//randomnumbergenerator.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-randomnumbergenerator',

  templateUrl: './randomnumbergenerator.component.html',
  styleUrl: './randomnumbergenerator.component.css'
})
export class RandomnumbergeneratorComponent {
  min: number = 0;
  max: number = 100;
  randomNumber: number | null = null;

  generateRandomNumber() {
    this.randomNumber = Math.floor(Math.random() * (this.max - this.min + 1)) + this.min;
  }
}

#28 Component name: multiplicationchecker

Check if a number is a multiple of another number.

<!-- multiplicationchecker.component.html-->
<p>Multiplication Checker</p>
<input type="number" [(ngModel)]="number" placeholder="Number" />
<input type="number" [(ngModel)]="multipleOf" placeholder="Check if multiple of" />
<button (click)="checkMultiple()">Check</button>
<p *ngIf="isMultiple !== null">{{ number }} is {{ isMultiple ? '' : 'not ' }}a multiple of {{ multipleOf }}.</p>

//multiplicationchecker.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-multiplicationchecker',

  templateUrl: './multiplicationchecker.component.html',
  styleUrl: './multiplicationchecker.component.css'
})
export class MultiplicationcheckerComponent {
  number: number | null = null;
  multipleOf: number | null = null;
  isMultiple: boolean | null = null;

  checkMultiple() {
    if (this.number !== null && this.multipleOf !== null) {
      this.isMultiple = this.number % this.multipleOf === 0;
    }
  }
}

#29 Component name: uppercaseconverter

Input a string and convert it to uppercase when the button is clicked.

<!-- uppercaseconverter.component.html-->
<p>Uppercase Converter</p>
<input type="text" [(ngModel)]="inputString" placeholder="Enter a string" />
<button (click)="convertToUppercase()">Convert</button>
<p>Uppercase: {{ uppercaseString }}</p>

//uppercaseconverter.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-uppercaseconverter',

  templateUrl: './uppercaseconverter.component.html',
  styleUrl: './uppercaseconverter.component.css'
})
export class UppercaseconverterComponent {
  inputString: string = '';
  uppercaseString: string = '';

  convertToUppercase() {
    this.uppercaseString = this.inputString.toUpperCase();
  }
}

#30 Component name: wordshuffler

Input a word and shuffle its letters randomly.

<!-- wordshuffler.component.html-->

<p>Word Shuffler</p>
<input type="text" [(ngModel)]="inputWord" placeholder="Enter a word" />
<button (click)="shuffleWord()">Shuffle</button>
<p>Shuffled Word: {{ shuffledWord }}</p>

//wordshuffler.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-wordshuffler',

  templateUrl: './wordshuffler.component.html',
  styleUrl: './wordshuffler.component.css'
})
export class WordshufflerComponent {
  inputWord: string = '';
  shuffledWord: string = '';

  shuffleWord() {
    this.shuffledWord = this.inputWord.split('').sort(() => 0.5 - Math.random()).join('');
  }
}

#31 Component name: bmisolver

Input height and weight, calculate and display the BMI.

<!-- bmisolver.component.html-->

<P>BMI Calculator</P>
<input type="number" [(ngModel)]="height" placeholder="Height (meters)" />
<input type="number" [(ngModel)]="weight" placeholder="Weight (kg)" />
<button (click)="calculateBMI()">Calculate BMI</button>
<p *ngIf="bmi !== null">Your BMI: {{ bmi.toFixed(2) }}</p>

//bmisolver.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-bmisolver',

  templateUrl: './bmisolver.component.html',
  styleUrl: './bmisolver.component.css'
})
export class BmisolverComponent {
  height: number | null = null; // in meters
  weight: number | null = null; // in kilograms
  bmi: number | null = null;

  calculateBMI() {
    if (this.height && this.weight) {
      this.bmi = this.weight / (this.height * this.height);
    }
  }
}

#32 Component name: usernamevalidator

Input a username and check its validity based on predefined rules (Create a variable).

<!-- usernamevalidator.component.html-->

<p>Username Validator</p>
<input type="text" [(ngModel)]="username" placeholder="Enter a username" />
<button (click)="validateUsername()">Validate</button>
<p *ngIf="isValid !== null">{{ isValid ? 'Valid Username' : 'Invalid Username' }}</p>

//usernamevalidator.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-usernamevalidator',

  templateUrl: './usernamevalidator.component.html',
  styleUrl: './usernamevalidator.component.css'
})
export class UsernamevalidatorComponent {
  username: string = '';
  isValid: boolean | null = null;

  validateUsername() {
    const usernamePattern = /^[a-zA-Z0-9]{5,10}$/;
    this.isValid = usernamePattern.test(this.username);
  }
}

#33 Component name: interestcalculator

Input principal, rate, and time, and calculate simple interest.

<!-- interestcalculator.component.html-->

<p>Simple Interest Calculator</p>
<input type="number" [(ngModel)]="principal" placeholder="Principal" />
<input type="number" [(ngModel)]="rate" placeholder="Rate (%)" />
<input type="number" [(ngModel)]="time" placeholder="Time (years)" />
<button (click)="calculateSimpleInterest()">Calculate Interest</button>
<p *ngIf="simpleInterest !== null">Simple Interest: {{ simpleInterest }}</p>

//interestcalculator.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-interestcalculator',

  templateUrl: './interestcalculator.component.html',
  styleUrl: './interestcalculator.component.css'
})
export class InterestcalculatorComponent {
  principal: number | null = null;
  rate: number | null = null;
  time: number | null = null;
  simpleInterest: number | null = null;

  calculateSimpleInterest() {
    if (this.principal && this.rate && this.time) {
      this.simpleInterest = (this.principal * this.rate * this.time) / 100;
    }
  }
}

#34 Component name: compoundinterestcalculator

Calculate compound interest when principal, rate, time, and frequency are input.

<!-- interestcalculator.component.html-->
<p>Simple Interest Calculator</p>
<input type="number" [(ngModel)]="principal" placeholder="Principal" />
<input type="number" [(ngModel)]="rate" placeholder="Rate (%)" />
<input type="number" [(ngModel)]="time" placeholder="Time (years)" />
<button (click)="calculateSimpleInterest()">Calculate Interest</button>
<p *ngIf="simpleInterest !== null">Simple Interest: {{ simpleInterest }}</p>

//interestcalculator.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-interestcalculator',

  templateUrl: './interestcalculator.component.html',
  styleUrl: './interestcalculator.component.css'
})
export class InterestcalculatorComponent {
  principal: number | null = null;
  rate: number | null = null;
  time: number | null = null;
  simpleInterest: number | null = null;

  calculateSimpleInterest() {
    if (this.principal && this.rate && this.time) {
      this.simpleInterest = (this.principal * this.rate * this.time) / 100;
    }
  }
}

#35 Component name: fibonaccigenerator

Generate and display the first N Fibonacci numbers when a button is clicked.

<!-- fibonaccigenerator.component.html-->

<p>Fibonacci Sequence Generator</p>
<input type="number" [(ngModel)]="n" placeholder="Enter N" />
<button (click)="generateFibonacci()">Generate</button>
<p>Fibonacci Sequence: {{ fibonacciSequence.join(', ') }}</p>

//fibonaccigenerator.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-fibonaccigenerator',

  templateUrl: './fibonaccigenerator.component.html',
  styleUrl: './fibonaccigenerator.component.css'
})
export class FibonaccigeneratorComponent {
  n: number | null = null;
  fibonacciSequence: number[] = [];

  generateFibonacci() {
    if (this.n !== null && this.n > 0) {
      this.fibonacciSequence = [];
      let a = 0, b = 1;
      for (let i = 0; i < this.n; i++) {
        this.fibonacciSequence.push(a);
        [a, b] = [b, a + b];
      }
    }
  }
}

#36 Component name: oddsumcalculator

Input a number, and calculate the sum of odd numbers up to that number.

<!-- oddsumcalculator.component.html-->

<p>Odd Number Sum Calculator</p>
<input type="number" [(ngModel)]="number" placeholder="Enter a number" />
<button (click)="calculateOddSum()">Calculate Sum</button>
<p *ngIf="oddSum !== null">Sum of odd numbers: {{ oddSum }}</p>

//oddsumcalculator.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-oddsumcalculator',

  templateUrl: './oddsumcalculator.component.html',
  styleUrl: './oddsumcalculator.component.css'
})
export class OddsumcalculatorComponent { number: number | null = null;
  oddSum: number | null = null;

  calculateOddSum() {
    if (this.number !== null && this.number > 0) {
      this.oddSum = 0;
      for (let i = 1; i <= this.number; i += 2) {
        this.oddSum += i;
      }
    }
  }
}

#37 Component name: currencyformatter

Input a number and format it as currency when a button is clicked (Dollar, Php, Euro - search euro conversion).

<!-- currencyformatter.component.html-->

<h2>Currency Formatter</h2>
<input type="number" [(ngModel)]="amount" placeholder="Enter amount" />
<select [(ngModel)]="selectedCurrency">
  <option value="USD">Dollar (USD)</option>
  <option value="PHP">Philippine Peso (PHP)</option>
  <option value="EUR">Euro (EUR)</option>
</select>
<button (click)="formatCurrency()">Format Currency</button>
<p *ngIf="formattedAmount">Formatted Amount: {{ formattedAmount }}</p>

//currencyformatter.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-currencyformatter',

  templateUrl: './currencyformatter.component.html',
  styleUrl: './currencyformatter.component.css'
})
export class CurrencyformatterComponent {
  amount: number | null = null;
  selectedCurrency: string = 'USD';
  formattedAmount: string = '';

  formatCurrency() {
    if (this.amount !== null) {
      const options = { style: 'currency', currency: this.selectedCurrency };
      // @ts-ignore
      this.formattedAmount = new Intl.NumberFormat('en-US', options).format(this.amount);
    }
  }
}

#38 Component name: randomquotedisplay

Display a random quote when a button is clicked (use list data structures).

<!-- randomquotedisplay.component.html-->
<h2>Random Quote Generator</h2>
<button (click)="showRandomQuote()">Show Random Quote</button>
<p *ngIf="selectedQuote">{{ selectedQuote }}</p>

//randomquotedisplay.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-randomquotedisplay',

  templateUrl: './randomquotedisplay.component.html',
  styleUrl: './randomquotedisplay.component.css'
})
export class RandomquotedisplayComponent {
  quotes: string[] = [
    "Ang pag-abot sa iyong mga pangarap ang pinakamalaking abentura ng buhay",
    "“Ang mga problema ay hindi hadlang sa pag-abot ng mga pangarap, ito ay mga gabay lamang.”",
    "Ako lang ang makakapagpabago sa buhay ko. Walang ibang makakagawa nito sa akin.",
    "Ang tunay na sikreto sa tagumpay ay pagsisikap at patuloy na pagbangon sa bawat pagkakamali."
  ];
  selectedQuote: string | null = null;

  showRandomQuote() {
    const randomIndex = Math.floor(Math.random() * this.quotes.length);
    this.selectedQuote = this.quotes[randomIndex];
  }
}

#39 Component name: uppercasegreeting

User inputs their name, and when the button is clicked, display the name in uppercase.

<!-- uppercasegreeting.component.html-->

<h2>Uppercase Greeting</h2>
<input type="text" [(ngModel)]="name" placeholder="Enter your name" />
<button (click)="displayUppercaseName()">Display Uppercase Name</button>
<p *ngIf="uppercaseName">Hello, {{ uppercaseName }}!</p>

//uppercasegreeting.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-uppercasegreeting',

  templateUrl: './uppercasegreeting.component.html',
  styleUrl: './uppercasegreeting.component.css'
})
export class UppercasegreetingComponent {
  name: string = '';
  uppercaseName: string = '';

  displayUppercaseName() {
    this.uppercaseName = this.name.toUpperCase();
  }
}

#40 Component name: divisiblechecker

Input two numbers, and check if the first is divisible by the second.

<!-- divisiblechecker.component.html-->
<h2>Divisibility Checker</h2>

<input type="number" [(ngModel)]="dividend" placeholder="Enter dividend" />

<input type="number" [(ngModel)]="divisor" placeholder="Enter divisor" />

<button (click)="checkDivisibility()">Check Divisibility</button>

<p *ngIf="isDivisible !== null">{{ dividend }} is {{ isDivisible ? '' : 'not' }} divisible by {{ divisor }}</p>

//divisiblechecker.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-divisiblechecker',

  templateUrl: './divisiblechecker.component.html',
  styleUrl: './divisiblechecker.component.css'
})
export class DivisiblecheckerComponent {
  dividend: number | null = null;
  divisor: number | null = null;
  isDivisible: boolean | null = null;

  checkDivisibility() {
    if (this.dividend !== null && this.divisor !== null && this.divisor !== 0) {
      this.isDivisible = this.dividend % this.divisor === 0;
    }
  }
}

#41 Component name: vowelcounter

It will count the vowels on every word you inputs

<!-- vowelcounter.component.html-->

<input [(ngModel)]="inputText" placeholder="Enter text" />
<button (click)="countVowels()">Count Vowels</button>
<p>Number of vowels: {{ vowelCount }}</p>

//vowelcounter.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-vowelcounter',

  templateUrl: './vowelcounter.component.html',
  styleUrl: './vowelcounter.component.css'
})
export class VowelcounterComponent {
  inputText: string = '';
  vowelCount: number = 0;

  countVowels() {
    const vowels = this.inputText.match(/[aeiou]/gi);
    this.vowelCount = vowels ? vowels.length : 0;
  }
}

#42 Component name: randomcolorchanger

This function will randomly change the color of the container

<!-- randomcolorchanger.component.html-->

<div [style.background-color]="currentColor">
  <button (click)="changeColor()">Change Color</button>
  <p>Current Color: {{ currentColor }}</p>
</div>

//randomcolorchanger.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-randomcolorchanger',

  templateUrl: './randomcolorchanger.component.html',
  styleUrl: './randomcolorchanger.component.css'
})
export class RandomcolorchangerComponent {
  currentColor: string = '';

  changeColor() {
    const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);
    this.currentColor = randomColor;
  }
}

#43 Component name: stringreverser

This reverses the string you inputs

<!-- stringreverser.component.html-->
<input [(ngModel)]="inputText" placeholder="Enter text" />
<button (click)="reverseString()">Reverse String</button>
<p>Reversed Text: {{ reversedText }}</p>

//stringreverser.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-stringreverser',

  templateUrl: './stringreverser.component.html',
  styleUrl: './stringreverser.component.css'
})
export class StringreverserComponent {
  inputText: string = '';
  reversedText: string = '';

  reverseString() {
    this.reversedText = this.inputText.split('').reverse().join('');
  }
}

#44 Component name: greetingselector

This function will give you options on how you want to be greeted or how the user will be greeted

<!-- greetingselector.component.html-->

<select (change)="selectGreeting($event)">
  <option *ngFor="let greeting of greetings" [value]="greeting">{{ greeting }}</option>
</select>
<p>Selected Greeting: {{ selectedGreeting }}</p>

//greetingselector.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-greetingselector',

  templateUrl: './greetingselector.component.html',
  styleUrl: './greetingselector.component.css'
})
export class GreetingselectorComponent {
  greetings: string[] = ['Hello', 'Hi', 'Welcome', 'Good Day'];
  selectedGreeting: string = '';

  selectGreeting(event: any) {
    this.selectedGreeting = event.target.value;
  }
}

#45 Component name: divisionchecker

Input two numbers, and check if the first is divisible by the second.

<!-- divisionchecker.component.html-->
<input type="number" [(ngModel)]="dividend" placeholder="Dividend" />
<input type="number" [(ngModel)]="divisor" placeholder="Divisor" />
<button (click)="checkDivisibility()">Check Divisibility</button>
<p *ngIf="isDivisible !== null">{{ dividend }} is {{ isDivisible ? '' : 'not' }} divisible by {{ divisor }}</p>

//divisionchecker.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-divisionchecker',

  templateUrl: './divisionchecker.component.html',
  styleUrl: './divisionchecker.component.css'
})
export class DivisioncheckerComponent {
  dividend: number = 0;
  divisor: number = 1;
  isDivisible: boolean | null = null;

  checkDivisibility() {
    this.isDivisible = this.dividend % this.divisor === 0;
  }
}

#46 Component name: forloop

This component show the way of creating a for loop funtion

<!-- forloop.component.html-->
<button (click)="generateNumbers()">Generate Numbers</button>
<p *ngFor="let number of numbers">{{ number }}</p>

//forloop.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-forloop',

  templateUrl: './forloop.component.html',
  styleUrl: './forloop.component.css'
})
export class ForloopComponent {
  numbers: number[] = [];

  generateNumbers() {
    this.numbers = [];
    for (let i = 1; i <= 10; i++) {
      this.numbers.push(i);
    }
  }
}

#47 Component name: whileloop

This component show the way of creating a while loop funtion

<!-- whileloop.component.html-->
<button (click)="generateNumbers()">Generate Numbers</button>
<p *ngFor="let number of numbers">{{ number }}</p>

//whileloop.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-whileloop',

  templateUrl: './whileloop.component.html',
  styleUrl: './whileloop.component.css'
})
export class WhileloopComponent {
  numbers: number[] = [];

  generateNumbers() {
    this.numbers = [];
    let i = 1;
    while (i <= 10) {
      this.numbers.push(i);
      i++;
    }
  }
}

#48 Component name: studentnames

This output only shows a list of students

<!-- studentnames.component.html-->
<p>Student Names</p>
<ul>
  <li *ngFor="let student of students">{{ student }}</li>
</ul>

//studentnames.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-studentnames',

  templateUrl: './studentnames.component.html',
  styleUrl: './studentnames.component.css'
})
export class StudentnamesComponent {
  students: string[] = ['Rodney', 'Walter', 'Joseph', 'Fiercieval', 'Kent'];
}

#49 Component name: nestedloop

This creates a table and show how nested loop works

<!-- nestedloop.component.html-->
<button (click)="generateTable()">Generate Table</button>
<table border="1">
  <tr *ngFor="let row of table">
    <td *ngFor="let cell of row">{{ cell }}</td>
  </tr>
</table>

//nestedloop.component.ts

<button (click)="generateTable()">Generate Table</button>
<table border="1">
  <tr *ngFor="let row of table">
    <td *ngFor="let cell of row">{{ cell }}</td>
  </tr>
</table>

#50 Component name: gamepicker

This function had a button function where it helps you pick different games

<!-- gamepicker.component.html-->

<button (click)="pickRandomGame()">Pick Random Game</button>
<p>Selected Game: {{ selectedGame }}</p>

//gamepicker.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-gamepicker',

  templateUrl: './gamepicker.component.html',
  styleUrl: './gamepicker.component.css'
})
export class GamepickerComponent {
  games: string[] = ['Chess', 'Football', 'Basketball', 'Tennis', 'Badminton'];
  selectedGame: string = '';

  pickRandomGame() {
    const randomIndex = Math.floor(Math.random() * this.games.length);
    this.selectedGame = this.games[randomIndex];
  }
}

Github Account: https://github.com/rodney-lqr/50-Angular-Components