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:

ng generate component component-name

Example:

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.

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:

<p>{{message}}</p>

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:

<p>Hello World!</p>

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:

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

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:

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

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:

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

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:

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

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:

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

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:

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

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:

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

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:

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

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:

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

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:

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

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:

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

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:

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

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:

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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

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

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.

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

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.

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

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.

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

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.

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

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

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

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.

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

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.

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

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.

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

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

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

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.

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

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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

Angular 50 Components

Project Overview

Components

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Comments (1)

More from this blog

Data Structure Again

Angular Recipe Grid

Angular Ecommerce Product Grid

Angular Library Grid

HTTP Status Codes

Command Palette

Project Overview

Components

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Comments (1)

More from this blog