# Angular  50 Components

### Project Overview

The goal of this project was to sharpen my Angular skills by creating a variety of components—50 in total! Some were based on instructions, while others were ideas I wanted to explore. I organized everything within an Angular app, set up basic routing, and added a handy navbar for smooth navigation between components.

**Create Components**  
Use the Angular CLI to generate the components. For each component, you’ll use the following command:

```xml
ng generate component component-name
```

Example:

```typescript
ng generate component/components displayhelloworld
ng generate component/components showhellobutton
ng generate component/components displayname
```

**Component Setup**  
`AppModule` file defines the root module of your Angular application. It imports necessary Angular core modules, declares all the components, configures routing for navigation, and bootstraps the application with the `AppComponent`.

```typescript
import {AppComponent} from "./app.component";
import {NgModule} from "@angular/core";
import {CommonModule} from "@angular/common";
import {BrowserModule} from "@angular/platform-browser";
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
import {RouterModule, Routes} from "@angular/router";
import {FormsModule} from "@angular/forms";
import { DisplayhelloworldComponent } from "./components/displayhelloworld/displayhelloworld.component";
import { DisplaynameComponent } from "./components/displayname/displayname.component";
import { ShowhellobuttonComponent } from "./components/showhellobutton/showhellobutton.component";
import { UserageComponent } from "./components/userage/userage.component";
import { UsergreetingComponent } from "./components/usergreeting/usergreeting.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 {SimpleformComponent} from "./components/simpleform/simpleform.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 {MultiplicationtableComponent} from "./components/multiplicationtable/multiplicationtable.component";
import {SimpleloginComponent} from "./components/simplelogin/simplelogin.component";
import {FahrenheittocelsiusComponent} from "./components/fahrenheittocelsius/fahrenheittocelsius.component";
import {ShowusernameComponent} from "./components/showusername/showusername.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 {LowercaseconverterComponent} from "./components/lowercaseconverter/lowercaseconverter.component";
import {PercentagecalculatorComponent} from "./components/percentagecalculator/percentagecalculator.component";
import {TemperaturefeelingComponent} from "./components/temperaturefeeling/temperaturefeeling.component";
import {MultiplesofthreeComponent} from "./components/multiplesofthree/multiplesofthree.component";
import {SquarerootfinderComponent} from "./components/squarerootfinder/squarerootfinder.component";
import {UsernameuppercaseComponent} from "./components/usernameuppercase/usernameuppercase.component";
import {GreetinselectedlanguageComponent} from "./components/greetinselectedlanguage/greetinselectedlanguage.component";
import {LeapyearcheckerComponent} from "./components/leapyearchecker/leapyearchecker.component";
import {AreacalculatorComponent} from "./components/areacalculator/areacalculator.component";
import {LowercasegreetingComponent} from "./components/lowercasegreeting/lowercasegreeting.component";




const routes: Routes = [
  //{path: '', component: AppComponent},
  {path: 'displayhelloworld', component: DisplayhelloworldComponent},
  {path: 'displayname', component: DisplaynameComponent},
  {path: 'showhellobutton', component: ShowhellobuttonComponent},
  {path: 'userage', component: UserageComponent},
  {path: 'simpleform', component: SimpleformComponent},
  {path: 'usergreeting', component: UsergreetingComponent},
  {path: 'calculator', component: CalculatorComponent},
  {path: 'textlength', component: TextlengthComponent},
  {path: 'currencyconverter', component: CurrencyconverterComponent},
  {path: 'wordreverser', component: WordreverserComponent},
  {path: 'showusername', component: ShowusernameComponent},
  {path: 'showdate', component: ShowdateComponent},
  {path: 'multiplicationtable', component: MultiplicationtableComponent},
  {path: 'bookmarklist', component: BookmarklistComponent},
  {path: 'charactercounter', component: CharactercounterComponent},
  {path: 'palindromechecker', component: PalindromecheckerComponent},
  {path: 'temperatureconverter', component: TemperatureconverterComponent},
  {path: 'shoppinglist', component: ShoppinglistComponent},
  {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: 'evenoddchecker', component: EvenoddcheckerComponent},
  {path: 'simplelogin', component: SimpleloginComponent},
  {path: 'fahrenheittocelsius', component: FahrenheittocelsiusComponent},
  {path: 'factorialcalculator', component: FactorialcalculatorComponent},
  {path: 'todomanager', component: TodomanagerComponent},
  {path: 'guessnumbergame', component: GuessnumbergameComponent},
  {path: 'lowercaseconverter', component: LowercaseconverterComponent},
  {path: 'percentagecalculator', component: PercentagecalculatorComponent},
  {path: 'temperaturefeeling', component: TemperaturefeelingComponent},
  {path: 'multiplesofthree', component: MultiplesofthreeComponent},
  {path: 'squarerootfinder', component: SquarerootfinderComponent},
  {path: 'usernameuppercase', component: UsernameuppercaseComponent},
  {path: 'greetinselectedlanguage', component: GreetinselectedlanguageComponent},
  {path: 'leapyearchecker', component: LeapyearcheckerComponent},
  {path: 'areacalculator', component: AreacalculatorComponent},
  {path: 'lowercasegreeting', component: LowercasegreetingComponent},
]

@NgModule({

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

  declarations: [
    AppComponent,
    DisplayhelloworldComponent,
    DisplaynameComponent,
    ShowhellobuttonComponent,
    SimpleformComponent,
    UserageComponent,
    UsergreetingComponent,
    WordcounterComponent,
    RandomnumbergeneratorComponent,
    MultiplicationcheckerComponent,
    UppercaseconverterComponent,
    WordshufflerComponent,
    BmisolverComponent,
    UsernamevalidatorComponent,
    InterestcalculatorComponent,
    CompoundinterestcalculatorComponent,
    FibonaccigeneratorComponent,
    OddsumcalculatorComponent,
    CurrencyformatterComponent,
    RandomquotedisplayComponent,
    UppercasegreetingComponent,
    DivisiblecheckerComponent,
    CalculatorComponent,
    TextlengthComponent,
    CurrencyconverterComponent,
    EvenoddcheckerComponent,
    WordreverserComponent,
    ShowdateComponent,
    MultiplicationtableComponent,
    SimpleloginComponent,
    FahrenheittocelsiusComponent,
    ShowusernameComponent,
    BookmarklistComponent,
    CharactercounterComponent,
    PalindromecheckerComponent,
    TemperatureconverterComponent,
    ShoppinglistComponent,
    FactorialcalculatorComponent,
    TodomanagerComponent,
    GuessnumbergameComponent,
    LowercaseconverterComponent,
    PercentagecalculatorComponent,
    TemperaturefeelingComponent,
    MultiplesofthreeComponent,
    SquarerootfinderComponent,
    UsernameuppercaseComponent,
    GreetinselectedlanguageComponent,
    LeapyearcheckerComponent,
    AreacalculatorComponent,
    LowercasegreetingComponent,
  ],

  providers: [

  ],

  bootstrap: [
    AppComponent]
})

export class AppModule {}
```

# **Components**

**#1 component name: displayhelloworld**

This component is a simple Angular component that displays a "Hello World!" message on the screen.

**Code:**

```xml
<p>{{message}}</p>
```

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

@Component({
  selector: 'app-displayhelloworld',
  templateUrl: './displayhelloworld.component.html',
  styleUrl: './displayhelloworld.component.css'
})
export class DisplayhelloworldComponent {
  message: string = 'Hello World!';
}
```

The `message` property holds the string "Hello World!" which is displayed in the HTML template using interpolation (`{{ message }}`).

**#2 component name: showhellobutton**

This component shows a simple "Hello World!" message but with no button interaction.

**Code:**

```xml
<p>Hello World!</p>
```

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

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

}
```

It simply displays "Hello World!" in the HTML template. It has no interactivity.

**#3 component name: displayname**

This component allows the user to input their name and display it after pressing the "Submit" button.

**Code:**

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

```typescript
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;
  }
}
```

* Two-way data binding is done using `[(ngModel)]` to keep track of the user's input.
    
* On button click, the `show()` method is called, which assigns the input value (`name`) to the `result` variable and displays it.
    

**#4 component name: counter**

This component contains a counter that increments every time you press the "Increase" button.

#### Code:

```xml
<div class="counter-container">
  <h2>Counter: {{ count }}</h2>
  <button (click)="increment()">Increase</button>
</div>
```

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

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

  increment(): void {
    this.count++;
  }
}
```

* The `count` variable holds the current value of the counter.
    
* The `increment()` method increases the `count` value every time the button is clicked, and it gets updated in the template.
    

**#5 component name: simpleform**

This component demonstrates a form where users can input their name and email. After submitting, it displays the submitted information below the form.

**Code:**

```xml
<div class="form-container">
  <form (ngSubmit)="onSubmit()" #simpleForm="ngForm">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" ngModel required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" ngModel required>

    <button type="submit" [disabled]="!simpleForm.form.valid">Submit</button>
  </form>

  <div *ngIf="submittedData">
    <h3>Submitted Data:</h3>
    <p><strong>Name:</strong> {{submittedData.name}}</p>
    <p><strong>Email:</strong> {{submittedData.email}}</p>
  </div>
</div>
```

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

@Component({
  selector: 'app-simpleform',
  templateUrl: './simpleform.component.html',
  styleUrl: './simpleform.component.css'
})
export class SimpleformComponent {
  submittedData: { name: string, email: string } | null = null;

  onSubmit(): void {
    const form = document.querySelector('form') as HTMLFormElement;
    const formData = new FormData(form);

    this.submittedData = {
      name: formData.get('name') as string,
      email: formData.get('email') as string,
    };
  }
}
```

* This form captures `name` and `email` from the input fields.
    
* The form is submitted when it's valid, and the data is shown using the `submittedData` property.
    
* The `ngModel` directive is used for two-way data binding.
    

**#6 component name: userage**

This component calculates the user's age based on the year of birth input.

#### Code:

```xml
<div>
  <h2>Age Calculator</h2>
  <input type="number" [(ngModel)]="birthYear" placeholder="Enter your birth year">
  <button (click)="calculateAge()">Calculate Age</button>
  <p *ngIf="age !== null">Your age is: {{ age }}</p>
</div>
```

```typescript
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;
    }
  }
}
```

* The user enters their birth year, and the component calculates their age by subtracting the birth year from the current year.
    

**#7 component name: usergreeting**

This component takes the user's inputted name and converts it to uppercase.

#### Code:

```xml
<div>
  <label for="name">Enter your name:</label>
  <input type="text" [(ngModel)]="name" id="name" />

  <button (click)="convertToUppercase()">Convert to Uppercase</button>

  <p>Your name in uppercase: {{ uppercaseName }}</p>
</div>
```

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

@Component({
  selector: 'app-uppercasegreeting',
  templateUrl: './uppercasegreeting.component.html',
  styleUrl: './uppercasegreeting.component.css'
})
export class UppercasegreetingComponent {
  name = '';
  uppercaseName = '';

  convertToUppercase() {
    this.uppercaseName = this.name.toUpperCase();
  }
}
```

* This component uses two-way data binding (`ngModel`) to capture the user's name and a function to convert it to uppercase.
    

**#8 component name: calculator**

This calculator component performs basic operations (addition, subtraction, multiplication, and division) on two numbers.

#### Code:

```typescript
<div class="calculator-container">
  <form (ngSubmit)="calculate()">
    <label for="num1">Enter first number:</label>
    <input type="number" id="num1" [(ngModel)]="num1" name="num1" required>

    <label for="num2">Enter second number:</label>
    <input type="number" id="num2" [(ngModel)]="num2" name="num2" required>

    <label for="operation">Operation:</label>
    <select [(ngModel)]="operation" name="operation" required>
      <option value="add">Add</option>
      <option value="subtract">Subtract</option>
      <option value="multiply">Multiply</option>
      <option value="divide">Divide</option>
    </select>

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

  <div *ngIf="result !== null">
    <h3>Result: {{ result }}</h3>
  </div>
</div>
```

```typescript
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;
  operation: string = 'add';
  result: number | null = null;

  calculate(): void {
    if (this.num1 !== null && this.num2 !== null) {
      switch (this.operation) {
        case 'add':
          this.result = this.num1 + this.num2;
          break;
        case 'subtract':
          this.result = this.num1 - this.num2;
          break;
        case 'multiply':
          this.result = this.num1 * this.num2;
          break;
        case 'divide':
          this.result = this.num1 / this.num2;
          break;
        default:
          this.result = null;
          break;
      }
    }
  }
}
```

* It takes two numbers and an operation (addition, subtraction, multiplication, or division) and displays the result based on the chosen operation.
    

**#9 component name: textlength**

This component calculates the length of a string entered by the user.

#### Code:

```xml
<div class="textlength-container">
  <form (ngSubmit)="calculateLength()">
    <label for="text">Enter a string:</label>
    <input type="text" id="text" [(ngModel)]="inputText" name="text" required>

    <button type="submit">Get Length</button>
  </form>

  <div *ngIf="textLength !== null">
    <h3>Length: {{ textLength }}</h3>
  </div>
</div>
```

```typescript
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;

  calculateLength(): void {
    this.textLength = this.inputText.length;
  }
}
```

* This component calculates the length of a string and displays it to the user.
    

**#10 component name: currencyconverter**

This component converts a value from USD to PHP based on a fixed conversion rate.

#### Code:

```xml
<div class="currencyconverter-container">
  <form (ngSubmit)="convertCurrency()">
    <label for="usd">Enter value in USD:</label>
    <input type="number" id="usd" [(ngModel)]="usdValue" name="usdValue" required>

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

  <div *ngIf="phpValue !== null">
    <h3>PHP Value: {{ phpValue }}</h3>
  </div>
</div>
```

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

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

  convertCurrency(): void {
    if (this.usdValue !== null) {
      this.phpValue = this.usdValue * this.conversionRate;
    }
  }
}
```

**#11 component name: evenoddchecker**  
This component checks whether a given number is even or odd.

#### Code:

```xml
<div>
  <h3>Even or Odd Checker</h3>
  <input type="number" [(ngModel)]="numberInput" placeholder="Enter a number">
  <button (click)="checkEvenOdd()">Check</button>
  <p *ngIf="result">{{ result }}</p>
</div>
```

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

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

  checkEvenOdd(): void {
    if (this.numberInput !== null) {
      this.result = this.numberInput % 2 === 0 ? 'Even' : 'Odd';
    }
  }
}
```

* This component takes a number input and checks whether it is even or odd, displaying the result dynamically.
    

**#12 component name: wordreverser**

This component takes a word input and displays its reverse.

#### Code:

```xml
<div>
  <h3>Word Reverser</h3>
  <input type="text" id="inputWord" [(ngModel)]="inputWord" placeholder="Enter a word">
  <button (click)="reverseWord()">Reverse</button>
  <p *ngIf="reversedWord">Reversed Word: {{ reversedWord }}</p>
</div>
```

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

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

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

This component reverses the characters of a given word and displays the reversed word as output.

**#13 component name: showdate**

This component displays the current date and time.

#### Code:

```xml
<div>
  <h3>Show Current Date and Time</h3>
  <button (click)="showDate()">Show Date</button>
  <p *ngIf="currentDate">Current Date and Time: {{ currentDate }}</p>
</div>
```

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

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

  showDate(): void {
    const now = new Date();
    this.currentDate = now.toLocaleString();
  }
}
```

* When the user clicks the button, the component fetches and displays the current date and time in a readable format.
    

**#14 component name: showusername**

This component allows users to input their username, and it displays the entered username.

#### Code:

```xml
<div>
  <h3>Show Username</h3>
  <input type="text" [(ngModel)]="username" placeholder="Enter your username">
  <button (click)="showUsername()">Show Username</button>
  <p *ngIf="displayedUsername">Hello, {{ displayedUsername }}!</p>
</div>
```

```typescript
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(): void {
    this.displayedUsername = this.username;
  }
}
```

* This component captures the user’s input and displays a greeting with their username.
    

**#15 component name: multiplicationtable**

This component generates and displays the multiplication table for a given number.

#### Code:

```xml
<div>
  <h3>Multiplication Table</h3>
  <input type="number" [(ngModel)]="numberInput" placeholder="Enter a number">
  <button (click)="generateTable()">Generate Table</button>

  <ul *ngIf="table.length > 0">
    <li *ngFor="let result of table; let i = index">{{ numberInput }} x {{ i + 1 }} = {{ result }}</li>
  </ul>
</div>
```

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

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

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

* The user enters a number, and the component generates a multiplication table for that number from 1 to 10.
    

**#16 component name: simplelogin**

Allows users to input email and password, and then displays a login message.

```xml
<div>
  <h3>Simple Login</h3>
  <input type="email" [(ngModel)]="email" placeholder="Enter email">
  <input type="password" [(ngModel)]="password" placeholder="Enter password">
  <button (click)="login()">Login</button>
  <p *ngIf="loginMessage">{{ loginMessage }}</p>
</div>
```

```typescript
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(): void {
    this.loginMessage = `Logged in as: ${this.email}`;
  }
}
```

**#17 component name: fahrenheittocelsius**

Converts temperatures between Fahrenheit and Celsius.

```xml
<div>
  <h3>Fahrenheit to Celsius Converter</h3>
  <input type="number" [(ngModel)]="fahrenheit" placeholder="Enter Fahrenheit">
  <button (click)="convert()">Convert</button>
  <p *ngIf="celsius !== null">Temperature in Celsius: {{ celsius.toFixed(2) }}°C</p>
</div>
```

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

@Component({
  selector: 'app-fahrenheittocelsius',
  templateUrl: './fahrenheittocelsius.component.html',
  styleUrl: './fahrenheittocelsius.component.css'
})
export class FahrenheittocelsiusComponent {
  fahrenheit: number | null = null;
  celsius: number | null = null;

  convert(): void {
    if (this.fahrenheit !== null) {
      this.celsius = (this.fahrenheit - 32) * 5 / 9;
    }
  }
}
```

**#18 component name: bookmarklist**

Lets users add and view a list of bookmarks.

```xml
<div>
  <h3>Bookmark List</h3>
  <input type="text" [(ngModel)]="url" placeholder="Enter URL">
  <button (click)="addBookmark()">Add Bookmark</button>

  <ul>
    <li *ngFor="let bookmark of bookmarks">
      <a [href]="bookmark" target="_blank">{{ bookmark }}</a>
    </li>
  </ul>
</div>
```

```typescript
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(): void {
    if (this.url) {
      this.bookmarks.push(this.url);
      this.url = '';
    }
  }
}
```

**#19 component name: charactercounter**

Counts the number of characters entered in a text input.

```xml
<div>
  <h3>Character Counter</h3>
  <input type="text" [(ngModel)]="inputText" (input)="countCharacters()" placeholder="Enter text">
  <p>Character Count: {{ characterCount }}</p>
</div>
```

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

@Component({
  selector: 'app-charactercounter',
  templateUrl: './charactercounter.component.html',
  styleUrl: './charactercounter.component.css'
})
export class CharactercounterComponent {
  inputText: string = '';
  characterCount: number = 0;

  countCharacters(): void {
    this.characterCount = this.inputText.length;
  }
}
```

**#20 component name: palindromechecker**

Checks if the entered word is a palindrome.

```xml
<div>
  <h3>Palindrome Checker</h3>
  <input type="text" [(ngModel)]="inputWord" placeholder="Enter a word">
  <button (click)="checkPalindrome()">Check</button>
  <p *ngIf="result">{{ result }}</p>
</div>
```

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

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

  checkPalindrome(): void {
    const reversedWord = this.inputWord.split('').reverse().join('');
    this.result = this.inputWord === reversedWord ? 'It is a palindrome!' : 'It is not a palindrome.';
  }
}
```

**#21 component name: temperatureconverter**

Converts temperatures from Celsius to Fahrenheit and vice versa.

```xml
<div>
  <h3>Temperature Converter</h3>
  <div>
    <input type="number" [(ngModel)]="celsius" placeholder="Celsius">
    <button (click)="convertToFahrenheit()">Convert to Fahrenheit</button>
    <p *ngIf="fahrenheit !== null">{{ celsius }}°C = {{ fahrenheit.toFixed(2) }}°F</p>
  </div>

  <div>
    <input type="number" [(ngModel)]="fahrenheit" placeholder="Fahrenheit">
    <button (click)="convertToCelsius()">Convert to Celsius</button>
    <p *ngIf="celsius !== null">{{ fahrenheit }}°F = {{ celsius.toFixed(2) }}°C</p>
  </div>
</div>
```

```typescript
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(): void {
    if (this.celsius !== null) {
      this.fahrenheit = (this.celsius * 9 / 5) + 32;
    }
  }

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

**#22 component name: shoppinglist**

Adds and removes items from a shopping list.

```xml
<div>
  <h3>Shopping List</h3>
  <input type="text" [(ngModel)]="item" placeholder="Add an item">
  <button (click)="addItem()">Add</button>

  <ul>
    <li *ngFor="let listItem of shoppingList; let i = index">
      {{ listItem }} <button (click)="removeItem(i)">Remove</button>
    </li>
  </ul>
</div>
```

```typescript
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(): void {
    if (this.item) {
      this.shoppingList.push(this.item);
      this.item = '';
    }
  }

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

**#23 component name: factorialcalculator**

Calculates the factorial of a given number.

```xml
<div>
  <h3>Factorial Calculator</h3>
  <input type="number" [(ngModel)]="numberInput" placeholder="Enter a number">
  <button (click)="calculateFactorial()">Calculate</button>
  <p *ngIf="result !== null">Factorial of {{ numberInput }} = {{ result }}</p>
</div>
```

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

@Component({
  selector: 'app-factorialcalculator',
  templateUrl: './factorialcalculator.component.html',
  styleUrl: './factorialcalculator.component.css'
})
export class FactorialcalculatorComponent {
  numberInput: number | null = null;
  result: number | null = null;

  calculateFactorial(): void {
    if (this.numberInput !== null && this.numberInput >= 0) {
      this.result = this.factorial(this.numberInput);
    }
  }

  factorial(n: number): number {
    if (n === 0 || n === 1) {
      return 1;
    }
    return n * this.factorial(n - 1);
  }
}
```

**#24 component name: todomanager**

Manages a list of tasks, with options to add and remove tasks.

```xml
<div>
  <h3>Todo Manager</h3>
  <input type="text" [(ngModel)]="task" placeholder="Add a task">
  <button (click)="addTask()">Add Task</button>

  <ul>
    <li *ngFor="let taskItem of todoList; let i = index">
      {{ taskItem }} <button (click)="removeTask(i)">Remove</button>
    </li>
  </ul>
</div>
```

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

@Component({
  selector: 'app-todomanager',
  templateUrl: './todomanager.component.html',
  styleUrl: './todomanager.component.css'
})
export class TodomanagerComponent {
  task: string = '';
  todoList: string[] = [];

  addTask(): void {
    if (this.task) {
      this.todoList.push(this.task);
      this.task = '';
    }
  }

  removeTask(index: number): void {
    this.todoList.splice(index, 1);
  }
}
```

**#25 component name: guessnumbergame**

A simple game where the user guesses a number, and the app provides feedback.

```xml
<div>
  <h3>Guess the Number Game</h3>
  <input type="number" [(ngModel)]="guess" placeholder="Enter your guess">
  <button (click)="checkGuess()">Check Guess</button>
  <p *ngIf="message">{{ message }}</p>
  <button (click)="resetGame()">Reset Game</button>
</div>
```

```typescript
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 | null = null;

  checkGuess(): void {
    if (this.guess !== null) {
      if (this.guess > this.randomNumber) {
        this.message = 'Too high!';
      } else if (this.guess < this.randomNumber) {
        this.message = 'Too low!';
      } else {
        this.message = 'Correct! You guessed the number!';
      }
    }
  }

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

**#26 component name: wordcounter**

A simple component to count the number of words in a given text input.

```xml
<div>
  <h2>Word Counter</h2>
  <textarea [(ngModel)]="inputText" rows="4" placeholder="Enter your text here"></textarea>
  <button (click)="countWords()">Count Words</button>
  <p>Word count: {{ wordCount }}</p>
</div>
```

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

@Component({
  selector: 'app-wordcounter',
  templateUrl: './wordcounter.component.html',
  styleUrl: './wordcounter.component.css'
})
export class WordcounterComponent {
  inputText: string = '';
  wordCount: number = 0;

  countWords() {
    if (this.inputText.trim().length > 0) {
      this.wordCount = this.inputText.trim().split(/\s+/).length;
    } else {
      this.wordCount = 0;
    }
  }
}
```

* Users can input text in the textarea, and upon clicking the "Count Words" button, the word count will be displayed
    

**#27 component name: randomnumbergenerator**

Generates a random number between specified minimum and maximum values

```xml
<div>
  <h2>Random Number Generator</h2>
  <input type="number" [(ngModel)]="min" placeholder="Min">
  <input type="number" [(ngModel)]="max" placeholder="Max">
  <button (click)="generateRandomNumber()">Generate Random Number</button>
  <p>Random number: {{ randomNumber }}</p>
</div>
```

```typescript
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;
  }
}
```

* Users can input minimum and maximum values. The "Generate Random Number" button generates a random number within the specified range.
    

**#28 component name: multiplicationchecker**

Checks if the first number is a multiple of the second number.

```xml
<div class="multiplication-checker">
  <h2>Multiplication Checker</h2>

  <div>
    <label for="number1">Enter a number:</label>
    <input type="number" [(ngModel)]="number1" id="number1">
  </div>

  <div>
    <label for="number2">Enter another number:</label>
    <input type="number" [(ngModel)]="number2" id="number2">
  </div>

  <button (click)="checkMultiplication()">Check Multiplication</button>

  <p>{{ resultMessage }}</p>
</div>
```

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

@Component({
  selector: 'app-multiplicationchecker',
  templateUrl: './multiplicationchecker.component.html',
  styleUrl: './multiplicationchecker.component.css'
})
export class MultiplicationcheckerComponent {
  number1: number = 0;
  number2: number = 0;
  resultMessage: string = '';

  checkMultiplication(): void {
    if (this.number2 !== 0 && this.number1 % this.number2 === 0) {
      this.resultMessage = `${this.number1} is a multiple of ${this.number2}.`;
    } else {
      this.resultMessage = `${this.number1} is not a multiple of ${this.number2}.`;
    }
  }
}
```

* Users can input two numbers and click "Check Multiplication" to see if the first number is a multiple of the second.
    

**#29 component name: uppercaseconverter**

Converts the input text to uppercase.

```xml
<div>
  <h2>Uppercase Converter</h2>
  <input type="text" [(ngModel)]="inputText" placeholder="Enter text">
  <button (click)="convertToUppercase()">Convert to Uppercase</button>
  <p>Uppercase text: {{ convertedText }}</p>
</div>
```

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

@Component({
  selector: 'app-uppercaseconverter',
  templateUrl: './uppercaseconverter.component.html',
  styleUrl: './uppercaseconverter.component.css'
})
export class UppercaseconverterComponent {
  inputText: string = '';
  convertedText: string = '';

  convertToUppercase() {
    this.convertedText = this.inputText.toUpperCase();
  }
}
```

* Users can enter text and convert it to uppercase by clicking the "Convert to Uppercase" button.
    

**#30 component name: wordshuffler**

Shuffles the letters of the input word randomly.

```xml
<div>
  <h2>Word Shuffler</h2>
  <input type="text" [(ngModel)]="inputText" placeholder="Enter word">
  <button (click)="shuffleWord()">Shuffle Word</button>
  <p>Shuffled word: {{ shuffledText }}</p>
</div>
```

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

@Component({
  selector: 'app-wordshuffler',
  templateUrl: './wordshuffler.component.html',
  styleUrl: './wordshuffler.component.css'
})
export class WordshufflerComponent {
  inputText: string = '';
  shuffledText: string = '';

  shuffleWord() {
    this.shuffledText = this.inputText.split('').sort(() => 0.5 - Math.random()).join('');
  }
}
```

* Users can enter a word, and upon clicking "Shuffle Word," the letters will be shuffled randomly.
    

**#31 component name: bmisolver**

Calculates the Body Mass Index (BMI) based on user-provided height and weight.

```xml
<div class="bmi-solver">
  <h2>BMI Calculator</h2>

  <label for="height">Height (cm):</label>
  <input type="number" [(ngModel)]="height" id="height">

  <label for="weight">Weight (kg):</label>
  <input type="number" [(ngModel)]="weight" id="weight">

  <button (click)="calculateBMI()">Calculate BMI</button>

  <p *ngIf="bmi">Your BMI is: {{ bmi.toFixed(2) }}</p>
  <p *ngIf="!bmi && (height <= 0 || weight <= 0)">Please enter valid values for height and weight.</p>
</div>
```

```typescript
<div class="bmi-solver">
  <h2>BMI Calculator</h2>

  <label for="height">Height (cm):</label>
  <input type="number" [(ngModel)]="height" id="height">

  <label for="weight">Weight (kg):</label>
  <input type="number" [(ngModel)]="weight" id="weight">

  <button (click)="calculateBMI()">Calculate BMI</button>

  <p *ngIf="bmi">Your BMI is: {{ bmi.toFixed(2) }}</p>
  <p *ngIf="!bmi && (height <= 0 || weight <= 0)">Please enter valid values for height and weight.</p>
</div>
```

* Users input their height in centimeters and weight in kilograms. The BMI will be calculated upon clicking "Calculate BMI."
    

**#32 component name: usernamevalidator**

Validates a username based on specified criteria (minimum length and presence of a number).

```xml
<div class="username-validator">
  <h2>Username Validator</h2>

  <label for="username">Enter a username:</label>
  <input type="text" [(ngModel)]="username" id="username">

  <button (click)="validateUsername()">Validate Username</button>

  <p *ngIf="isValid === true">Valid Username</p>
  <p *ngIf="isValid === false">Invalid Username: Must be at least 5 characters long and contain a number.</p>
</div>
```

```typescript
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(): void {
    const minLength = 5;
    const hasNumber = /\d/;
    this.isValid = this.username.length >= minLength && hasNumber.test(this.username);
  }
}
```

* Users can enter a username, and clicking "Validate Username" will check if it meets the criteria.
    

**#33 component name: interestcalculator**

Calculates simple interest based on principal, rate, and time.

```xml
<div class="interest-calculator">
  <h2>Simple Interest Calculator</h2>

  <label for="principal">Principal:</label>
  <input type="number" [(ngModel)]="principal" id="principal">

  <label for="rate">Rate (%):</label>
  <input type="number" [(ngModel)]="rate" id="rate">

  <label for="time">Time (years):</label>
  <input type="number" [(ngModel)]="time" id="time">

  <button (click)="calculateInterest()">Calculate Interest</button>

  <p *ngIf="interest">Simple Interest: {{ interest | currency }}</p>
</div>
```

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

@Component({
  selector: 'app-interestcalculator',
  templateUrl: './interestcalculator.component.html',
  styleUrl: './interestcalculator.component.css'
})
export class InterestcalculatorComponent {
  principal: number = 0;
  rate: number = 0;
  time: number = 0;
  interest: number | null = null;

  calculateInterest(): void {
    this.interest = (this.principal * this.rate * this.time) / 100;
  }
}
```

* Users input the principal amount, interest rate, and time in years. The simple interest will be calculated upon clicking "Calculate Interest."
    

**#35 component name: fibonaccigenerator**

Generates a Fibonacci sequence up to the specified number of terms.

```xml
<div class="fibonacci-generator">
  <h2>Fibonacci Sequence Generator</h2>

  <label for="count">Enter number of terms:</label>
  <input type="number" [(ngModel)]="count" id="count">

  <button (click)="generateFibonacci()">Generate Fibonacci Sequence</button>

  <p *ngIf="fibonacciSequence.length">Fibonacci Sequence: {{ fibonacciSequence.join(', ') }}</p>
</div>
```

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

@Component({
  selector: 'app-fibonaccigenerator',
  templateUrl: './fibonaccigenerator.component.html',
  styleUrl: './fibonaccigenerator.component.css'
})
export class FibonaccigeneratorComponent {
  count: number = 0;
  fibonacciSequence: number[] = [];

  generateFibonacci(): void {
    this.fibonacciSequence = [];
    let a = 0, b = 1;
    for (let i = 0; i < this.count; i++) {
      this.fibonacciSequence.push(a);
      [a, b] = [b, a + b];
    }
  }
}
```

* Users can specify the number of terms for the Fibonacci sequence. Clicking "Generate Fibonacci Sequence" will display the sequence.
    

**#36 component name: oddsumcalculator**

Calculates the sum of all odd numbers up to the entered number.

```xml
<div>
  <label for="number">Enter a number:</label>
  <input type="number" [(ngModel)]="number" id="number" />

  <button (click)="calculateOddSum()">Calculate Odd Sum</button>

  <p>Sum of odd numbers: {{ oddSum }}</p>
</div>
```

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

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

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

**#37 component name: currencyformatter**

Input a number and format it as currency when a button is clicked

```xml
<div>
  <label for="amount">Enter amount:</label>
  <input type="number" [(ngModel)]="amount" id="amount" />

  <button (click)="formatCurrency('USD')">Format as USD</button>
  <button (click)="formatCurrency('PHP')">Format as PHP</button>
  <button (click)="formatCurrency('EUR')">Format as EUR</button>

  <p>Formatted amount: {{ formattedCurrency }}</p>
</div>
```

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

@Component({
  selector: 'app-currencyformatter',
  templateUrl: './currencyformatter.component.html',
  styleUrl: './currencyformatter.component.css'
})
export class CurrencyformatterComponent {
  amount = 0;
  formattedCurrency = '';

  formatCurrency(currencyType: string) {
    switch (currencyType) {
      case 'USD':
        this.formattedCurrency = `$${this.amount.toFixed(2)}`;
        break;
      case 'PHP':
        this.formattedCurrency = `₱${this.amount.toFixed(2)}`;
        break;
      case 'EUR':
        this.formattedCurrency = `€${this.amount.toFixed(2)}`;
        break;
    }
  }
}
```

**#38 component name: randomquotedisplay**

Displays a random quote when the button is clicked.

```xml
<div>
  <button (click)="displayRandomQuote()">Show Random Quote</button>

  <p>{{ displayedQuote }}</p>
</div>
```

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

@Component({
  selector: 'app-randomquotedisplay',
  templateUrl: './randomquotedisplay.component.html',
  styleUrl: './randomquotedisplay.component.css'
})
export class RandomquotedisplayComponent {
  quotes: string[] = [
    'The best way to predict the future is to create it.',
    'Life is what happens when you’re busy making other plans.',
    'The purpose of our lives is to be happy.',
    'Success is not final, failure is not fatal: It is the courage to continue that counts.'
  ];
  displayedQuote = '';

  displayRandomQuote() {
    const randomIndex = Math.floor(Math.random() * this.quotes.length);
    this.displayedQuote = this.quotes[randomIndex];
  }
}
```

**#39 component name: uppercasegreeting**

Converts the entered name to uppercase.

```xml
<div>
  <label for="name">Enter your name:</label>
  <input type="text" [(ngModel)]="name" id="name" />

  <button (click)="convertToUppercase()">Convert to Uppercase</button>

  <p>Your name in uppercase: {{ uppercaseName }}</p>
</div>
```

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

@Component({
  selector: 'app-uppercasegreeting',
  templateUrl: './uppercasegreeting.component.html',
  styleUrl: './uppercasegreeting.component.css'
})
export class UppercasegreetingComponent {
  name = '';
  uppercaseName = '';

  convertToUppercase() {
    this.uppercaseName = this.name.toUpperCase();
  }
}
```

**#40 component name: divisiblechecker**

Checks if the first number is divisible by the second number.

```xml
<div>
  <label for="num1">Enter first number:</label>
  <input type="number" [(ngModel)]="num1" id="num1" />

  <label for="num2">Enter second number:</label>
  <input type="number" [(ngModel)]="num2" id="num2" />

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

  <p *ngIf="isDivisible">Yes, {{ num1 }} is divisible by {{ num2 }}.</p>
  <p *ngIf="!isDivisible">No, {{ num1 }} is not divisible by {{ num2 }}.</p>
</div>
```

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

@Component({
  selector: 'app-divisiblechecker',
  templateUrl: './divisiblechecker.component.html',
  styleUrl: './divisiblechecker.component.css'
})
export class DivisiblecheckerComponent {
  num1 = 0;
  num2 = 1;
  isDivisible = false;

  checkDivisibility() {
    this.isDivisible = this.num1 % this.num2 === 0;
  }
}
```

**#41 component name: lowercaseconverter**

Converts the entered text to lowercase.

```xml
<input [(ngModel)]="inputText" placeholder="Enter text" />
<button (click)="convertToLowercase()">Convert to Lowercase</button>
<p>{{ lowercasedText }}</p>
```

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

@Component({
  selector: 'app-lowercaseconverter',
  templateUrl: './lowercaseconverter.component.html',
  styleUrl: './lowercaseconverter.component.css'
})
export class LowercaseconverterComponent {
  inputText: string = '';
  lowercasedText: string = '';

  convertToLowercase() {
    this.lowercasedText = this.inputText.toLowerCase();
  }
}
```

**#42 component name: percentagecalculator**

Calculates the percentage of the first number relative to the second number.

```xml
<input [(ngModel)]="firstNumber" type="number" placeholder="Enter first number" />
<input [(ngModel)]="secondNumber" type="number" placeholder="Enter second number" />
<button (click)="calculatePercentage()">Calculate Percentage</button>
<p>{{ percentageResult }}%</p>
```

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

@Component({
  selector: 'app-percentagecalculator',
  templateUrl: './percentagecalculator.component.html',
  styleUrl: './percentagecalculator.component.css'
})
export class PercentagecalculatorComponent {
  firstNumber: number = 0;
  secondNumber: number = 0;
  percentageResult: number = 0;

  calculatePercentage() {
    if (this.secondNumber !== 0) {
      this.percentageResult = (this.firstNumber / this.secondNumber) * 100;
    }
  }
}
```

**#43 component name: temperaturefeeling**

Determines if the temperature feels hot, cold, or warm based on user input.

```xml
<input [(ngModel)]="temperature" type="number" placeholder="Enter temperature in Celsius" />
<button (click)="checkTemperatureFeeling()">Check Feeling</button>
<p>{{ temperatureFeeling }}</p>
```

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

@Component({
  selector: 'app-temperaturefeeling',
  templateUrl: './temperaturefeeling.component.html',
  styleUrl: './temperaturefeeling.component.css'
})
export class TemperaturefeelingComponent {
  temperature: number = 0;
  temperatureFeeling: string = '';

  checkTemperatureFeeling() {
    if (this.temperature >= 30) {
      this.temperatureFeeling = 'Hot';
    } else if (this.temperature <= 15) {
      this.temperatureFeeling = 'Cold';
    } else {
      this.temperatureFeeling = 'Warm';
    }
  }
}
```

**#44 component name: multiplesofthree**

Displays all multiples of three up to the entered number.

```xml
<input [(ngModel)]="maxNumber" type="number" placeholder="Enter a number" />
<button (click)="displayMultiplesOfThree()">Show Multiples of 3</button>
<p>{{ multiplesOfThree }}</p>
```

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

@Component({
  selector: 'app-multiplesofthree',
  templateUrl: './multiplesofthree.component.html',
  styleUrl: './multiplesofthree.component.css'
})
export class MultiplesofthreeComponent {
  maxNumber: number = 0;
  multiplesOfThree: number[] = [];

  displayMultiplesOfThree() {
    this.multiplesOfThree = [];
    for (let i = 1; i <= this.maxNumber; i++) {
      if (i % 3 === 0) {
        this.multiplesOfThree.push(i);
      }
    }
  }
}
```

**#45 component name: squarerootfinder**

Calculates the square root of the entered number.

```xml
<input [(ngModel)]="number" type="number" placeholder="Enter a number" />
<button (click)="findSquareRoot()">Find Square Root</button>
<p>{{ squareRoot }}</p>
```

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

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

  findSquareRoot() {
    this.squareRoot = Math.sqrt(this.number);
  }
}
```

**#46 component name: usernameuppercase**

Converts the entered text to uppercase.

```xml
<div>
  <h2>Uppercase Converter</h2>
  <input type="text" [(ngModel)]="inputText" placeholder="Enter text">
  <button (click)="convertToUppercase()">Convert to Uppercase</button>
  <p>Uppercase text: {{ convertedText }}</p>
</div>
```

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

@Component({
  selector: 'app-uppercaseconverter',
  templateUrl: './uppercaseconverter.component.html',
  styleUrl: './uppercaseconverter.component.css'
})
export class UppercaseconverterComponent {
  inputText: string = '';
  convertedText: string = '';

  convertToUppercase() {
    this.convertedText = this.inputText.toUpperCase();
  }
}
```

**#47 component name: greetinselectedlanguage**

Greets the user in the selected language.

```xml
<select [(ngModel)]="selectedLanguage">
  <option value="English">English</option>
  <option value="Spanish">Spanish</option>
  <option value="French">French</option>
</select>
<button (click)="greetInSelectedLanguage()">Greet</button>
<p>{{ greeting }}</p>
```

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

@Component({
  selector: 'app-greetinselectedlanguage',
  templateUrl: './greetinselectedlanguage.component.html',
  styleUrl: './greetinselectedlanguage.component.css'
})
export class GreetinselectedlanguageComponent {
  selectedLanguage: string = 'English';
  greeting: string = '';

  greetInSelectedLanguage() {
    if (this.selectedLanguage === 'English') {
      this.greeting = 'Hello';
    } else if (this.selectedLanguage === 'Spanish') {
      this.greeting = 'Hola';
    } else if (this.selectedLanguage === 'French') {
      this.greeting = 'Bonjour';
    }
  }
}
```

**#48 component name: leapyearchecker**

Checks if the entered year is a leap year.

```xml
<input [(ngModel)]="year" type="number" placeholder="Enter year" />
<button (click)="checkLeapYear()">Check Leap Year</button>
<p>{{ isLeapYearMessage }}</p>
```

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

@Component({
  selector: 'app-leapyearchecker',
  templateUrl: './leapyearchecker.component.html',
  styleUrl: './leapyearchecker.component.css'
})
export class LeapyearcheckerComponent {
  year: number = 0;
  isLeapYearMessage: string = '';

  checkLeapYear() {
    if ((this.year % 4 === 0 && this.year % 100 !== 0) || this.year % 400 === 0) {
      this.isLeapYearMessage = `${this.year} is a leap year.`;
    } else {
      this.isLeapYearMessage = `${this.year} is not a leap year.`;
    }
  }
}
```

**#49 component name: areacalculator**

Calculates the area of a rectangle based on the entered length and width.

```xml
<input [(ngModel)]="length" type="number" placeholder="Enter length" />
<input [(ngModel)]="width" type="number" placeholder="Enter width" />
<button (click)="calculateArea()">Calculate Area</button>
<p>Area: {{ area }} square units</p>
```

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

@Component({
  selector: 'app-areacalculator',
  templateUrl: './areacalculator.component.html',
  styleUrl: './areacalculator.component.css'
})
export class AreacalculatorComponent {
  length: number = 0;
  width: number = 0;
  area: number = 0;

  calculateArea() {
    this.area = this.length * this.width;
  }
}
```

**#50 component name: lowercasegreeting**

Greets the user in lowercase based on the entered name.

```xml
<input [(ngModel)]="name" placeholder="Enter your name" />
<button (click)="greetLowercase()">Greet</button>
<p>{{ lowercaseGreeting }}</p>
```

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

@Component({
  selector: 'app-lowercasegreeting',
  templateUrl: './lowercasegreeting.component.html',
  styleUrl: './lowercasegreeting.component.css'
})
export class LowercasegreetingComponent {
  name: string = '';
  lowercaseGreeting: string = '';

  greetLowercase() {
    this.lowercaseGreeting = `Hello, ${this.name.toLowerCase()}`;
  }
}
```

**Github repository:** [https://github.com/itsmekent/AngularComponents](https://github.com/itsmekent/AngularComponents)