Koronuma's Blog

ACTIVITY 8: Angular Components

Koronuma's photo
Koronuma
·

16 min read

Create 50 Angular components, each with different functionality, based on the provided list and your own examples. Ensure all components are well organized and navigable from the main app component.

  1. The first thing I do is to create a angular new project.
ng new murtheHelp --no-standalone
  1. Next, I generate the 50 components in total for the Angular project

ng generate component components/counter
ng generate component components/calculator
ng generate component components/currencyconverter
ng generate component components/charactercounter
ng generate component components/compoundinterestcalculator
ng generate component components/currencyformatter
ng generate component components/displayhelloworld
ng generate component components/displayname
ng generate component components/divisiblechecker
ng generate component components/evenoddchecker
ng generate component components/fahrenheittocelsius
ng generate component components/factorialcalculator
ng generate component components/fibonaccigenerator
ng generate component components/bmisolver
ng generate component components/bookmarklist
ng generate component components/guessnumbergame
ng generate component components/interestcalculator
ng generate component components/multiplicationchecker
ng generate component components/multiplicationtable
ng generate component components/palindrome
ng generate component components/randomnumbergenerator
ng generate component components/showhellobutton
ng generate component components/showdate
ng generate component components/showusername
ng generate component components/simplelogin
ng generate component components/simpleform
ng generate component components/userage
ng generate component components/uppercasegreeting
ng generate component components/usernamevalidator
ng generate component components/uppercaseconverter
ng generate component components/randomnumbergenerator
ng generate component components/textlength
ng generate component components/wordreverse
ng generate component components/shoppinglist
ng generate component components/todomanager
ng generate component components/randomquotedisplay
ng generate component components/Navigation-bar

ng generate component components/ImageGallery
ng generate component components/Movielistapp
ng generate component components/FlashcardsApp
ng generate component components/RecipeBook
ng generate component components/randomletter
ng generate component components/randomcrochetideas
ng generate component components/playlistlist
ng generate component components/expensetracker 
ng generate component components/Journal
ng generate component components/TableofElements
ng generate component components/ProbabilityTest
  1. Then for the routing in app-routing.module.ts
  • In creating of Angular project app routing is the most important to configure the application.
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CalculatorComponent } from './components/calculator/calculator.component';
import { CurrencyconverterComponent } from './components/currencyconverter/currencyconverter.component';
import { DisplayhelloworldComponent} from './components/displayhelloworld/displayhelloworld.component';
import { DisplaynameComponent } from './components/displayname/displayname.component';
import { EvenoddcheckerComponent} from './components/evenoddchecker/evenoddchecker.component';
import { MultiplicationtableComponent } from './components/multiplicationtable/multiplicationtable.component';
import { ShowdateComponent } from './components/showdate/showdate.component'; 
import { ShowhellobuttonComponent } from './components/showhellobutton/showhellobutton.component'; 
import { ShowusernameComponent } from './components/showusername/showusername.component'; 
import { SimpleformComponent } from './components/simpleform/simpleform.component'; 
import { SimpleloginComponent } from './components/simplelogin/simplelogin.component'; 
import { TextlengthComponent } from './components/textlength/textlength.component'; 
import { WordreverseComponent } from './components/wordreverse/wordreverse.component'; 
import { NavigationBarComponent } from './components/navigation-bar/navigation-bar.component';
import { CounterComponent } from './components/counter/counter.component';
import { UserageComponent } from './components/userage/userage.component';
import { UsergreetingComponent } from './components/usergreeting/usergreeting.component';
import { FahrenheittocelsiusComponent } from './components/fahrenheittocelsius/fahrenheittocelsius.component';
import { BookmarklistComponent } from './components/bookmarklist/bookmarklist.component';
import { CharactercounterComponent } from './components/charactercounter/charactercounter.component';
import { TemperatureconverterComponent } from './components/temperatureconverter/temperatureconverter.component';
import { TodomanagerComponent } from './components/todomanager/todomanager.component';
import { ShoppinglistComponent } from './components/shoppinglist/shoppinglist.component';
import { FactorialcalculatorComponent } from './components/factorialcalculator/factorialcalculator.component';
import { GuessnumbergameComponent } from './components/guessnumbergame/guessnumbergame.component';
import { PalindromeComponent } from './components/palindrome/palindrome.component';
import { WordcounterComponent } from './components/wordcounter/wordcounter.component';
import { RandomnumbergeneratorComponent } from './components/randomnumbergenerator/randomnumbergenerator.component';
import { WordshufflerComponent } from './components/wordshuffler/wordshuffler.component';
import { UppercaseconverterComponent } from './components/uppercaseconverter/uppercaseconverter.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 { RandomquotedisplayComponent } from './components/randomquotedisplay/randomquotedisplay.component';
import { UppercasegreetingComponent } from './components/uppercasegreeting/uppercasegreeting.component';
import { DivisiblecheckerComponent } from './components/divisiblechecker/divisiblechecker.component';
import { FlashcardsAppComponent } from './components/flashcards-app/flashcards-app.component';
import { RecipeBookComponent } from './components/recipe-book/recipe-book.component';
import { MovielistappComponent } from './components/movielistapp/movielistapp.component';
import { ImageGalleryComponent } from './components/image-gallery/image-gallery.component';
import { RandomletterComponent } from './components/randomletter/randomletter.component';
import { RandomcrochetideasComponent } from './components/randomcrochetideas/randomcrochetideas.component';
import { PlaylistlistComponent } from './components/playlistlist/playlistlist.component';
import { ExpensetrackerComponent } from './components/expensetracker/expensetracker.component';
import { TableofElementsComponent } from './components/tableof-elements/tableof-elements.component';
import { ProbabilityTestComponent } from './components/probability-test/probability-test.component';

const routes: Routes = [
  {path:'' , component:NavigationBarComponent}, 
  {path:'calculator' , component:CalculatorComponent},
  {path:'counter' , component:CounterComponent},
  {path:'currencyconverter' , component:CurrencyconverterComponent},
  {path:'displayhelloworld' , component:DisplayhelloworldComponent},
  {path:'displayname' , component:DisplaynameComponent},
  {path:'evenoddchecker' , component:EvenoddcheckerComponent},
  {path:'multiplicationtable' , component:MultiplicationtableComponent},
  {path:'showdate' , component:ShowdateComponent},
  {path:'showhellobutton' , component:ShowhellobuttonComponent},
  {path:'showusername' , component:ShowusernameComponent},
  {path:'simpleform' , component:SimpleformComponent},
  {path:'simplelogin' , component:SimpleloginComponent},
  {path:'textlength' , component:TextlengthComponent},
  {path:'wordreverse' , component:WordreverseComponent},
  {path:'userage' , component:UserageComponent},
  {path:'usergreeting' , component:UsergreetingComponent},
  {path:'fahrenheittocelsius' , component:FahrenheittocelsiusComponent},
  {path:'bookmarklist' , component: BookmarklistComponent},
  {path:'charactercounter' , component:CharactercounterComponent},
  {path:'temperatureconverter' , component:TemperatureconverterComponent},
  {path:'shoppinglist' , component:ShoppinglistComponent},
  {path:'factorialcalculator' , component:FactorialcalculatorComponent},
  {path:'todomanager' , component:TodomanagerComponent},
  {path:'guessnumbergame' , component:GuessnumbergameComponent},
  {path:'palindrome' , component:PalindromeComponent},
  {path:'randomnumbergenerator', component:RandomnumbergeneratorComponent},
  {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:CurrencyconverterComponent},
  {path:'randomquotedisplay', component:RandomquotedisplayComponent},
  {path:'uppercasegreeting', component:UppercasegreetingComponent},
  {path:'divisiblechecker', component:DivisiblecheckerComponent},
  {path:'wordcounter', component:WordcounterComponent},
  {path:'wordshuffler', component:WordshufflerComponent},
  {path:' uppercaseconverter', component:UppercaseconverterComponent},
  {path:'FlashcardsApp', component:FlashcardsAppComponent},
  {path:'RecipeBook', component:RecipeBookComponent},
  {path:'Movielistapp', component:MovielistappComponent},
  {path:'ImageGallery', component:ImageGalleryComponent},
  {path:'randomletter', component:RandomletterComponent},
  {path:'randomcrochetideas', component:RandomcrochetideasComponent},
  {path:'playlistlist', component:PlaylistlistComponent},
  {path:'expensetracker', component:ExpensetrackerComponent},
  {path:   'TableofElements'   ,component:TableofElementsComponent},
  {path:   'ProbabilityTest'   ,component:ProbabilityTestComponent},



];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
  1. In the Navigation html component where I create a routerLink for every page that need to link in.
<h1>Angular 50 components</h1>
<a routerLink = '/Navigation-bar'></a><br>
<a routerLink = '/displayhelloworld'>Hello world </a><br>
<a routerLink = '/showhellobutton'>Hello button </a><br>
<a routerLink = '/displayname'>Display name</a><br>
<a routerLink = '/counter'>counter</a><br>
<a routerLink = '/simpleform'>Simple form </a><br>
<a routerLink = '/userage'>Age of a user </a><br>
<a routerLink = '/calculator'>Calculator </a><br>
<a routerLink = '/textlength'>Textlength </a><br>
<a routerLink = '/currencyconverter'>Currency converter </a><br>
<a routerLink = '/evenoddchecker'>Evenodd checker </a><br>
<a routerLink = '/wordreverse'>Wordreverse </a><br>
<a routerLink = '/showdate'>Showdate</a><br>
<a routerLink = '/multiplicationtable'>Multiplicationtable </a><br>
<a routerLink = '/showusername'>showusername </a><br>
<a routerLink = '/simplelogin'>Simple login </a><br>
<a routerLink = '/usergreeting'>User greeting </a><br>
<a routerLink = '/fahrenheittocelsius'>Fahrenheit to celsius </a><br>
<a routerLink = '/bookmarklist'>Bookmarklist </a><br>
<a routerLink = '/charactercounter'>Character counter </a><br>
<a routerLink = '/palindrome'>Palindrome </a><br>
<a routerLink = '/temperatureconverter'>Temperature converter </a><br>
<a routerLink = '/shoppinglist'>Shopping list </a><br>
<a routerLink = '/factorialcalculator'>Factorial calculator </a><br>
<a routerLink = '/todomanager'>Todo manager </a><br>
<a routerLink = '/guessnumbergame'>Guessnumber game </a><br>
<a routerLink = '/wordcounter'>Word counter</a><br>
<a routerLink = '/randomnumbergenerator'>Randomnumber generator </a><br>
<a routerLink = '/palindrome'>Palindrome </a><br>
<a routerLink = '/temperatureconverter'>Temperature converter </a><br>
<a routerLink = '/uppercaseconverter'>Uppercaseconverter</a><br>
<a routerLink = '/wordshuffler'>Wordshuffler </a><br>
<a routerLink = '/bmisolver'>Bmisolver </a><br>
<a routerLink = '/usernamevalidator'>USername validator</a><br>
<a routerLink = '/interestcalculator'>Interest calculator</a><br>
<a routerLink = '/compoundinterestcalculator'>Compound interest calculator </a><br>
<a routerLink = 'fibonaccigenerator'>Fibonaccigenerator</a><br>
<a routerLink = '/oddsumcalculator'>Oddsum calculator </a><br>
<a routerLink = '/currencyformatter'>Currencyformatter </a><br>
<a routerLink = '/randomquotedisplay'>Randomquotedisplay </a><br>
<a routerLink = 'uppercasegreeting'>Uppercasegreeting </a><br>
<a routerLink = '/divisiblechecker'>Divisiblechecker </a><br>


<a routerLink = '/RecipeBook'>RecipeBook </a><br>
<a routerLink = '/FlashcardsApp'>FlashcardsApp </a><br>
<a routerLink = '/Movielistapp'>Movielistapp </a><br>
<a routerLink = '/randomletter'>randomletter</a><br>
<a routerLink = '/ImageGallery'>ImageGallery</a><br>
<a routerLink = '/randomcrochetideas'>randomcrochetideas </a><br>
<a routerLink = '/expensetracker '>expensetracker </a><br>
<a routerLink = '/TableofElements'>TableofElements</a><br>
<a routerLink = '/playlistlist'>Playlist list </a><br>
<a routerLink = '/ProbabilityTest'>ProbabilityTest</a><br>

Step #5

#1 component name: displayhelloworld

Display the text "Hello World" on the screen using a variable from the TypeScript file.

<html lang="en">
<head>

    <title>Page 1</title>
    <style>

        span {
          color: rgb(231, 44, 44);         
          font-size: 3rempx;         
          font-weight: bold;       
          padding: 5px;            
          text-align: center;
          border-radius: 5px;      
          text-transform: uppercase; 
        }
      </style>
</head>
<body>


<h1>Hello <span>World</span></h1>


</body>
</html>

Typescript components

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

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

}

#2 component name: showhellobutton

Create a button, and when the user clicks the button, "Hello World" is displayed on the screen.

<main>
    <button (click)="show()">Show</button>
    <button (click)="hide()">Hide</button>
    <p>{{ message }}</p>
  </main>

Typescript components

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

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

  show() {
    this.message = 'Hello World';
  }

  hide() {
    this.message = '';
  }
}

#3 component name: displayname

User inputs their name, and when the button is clicked, their name is displayed on the screen.

<main>
    <input #nameInput type="text" placeholder="Enter your name" />
    <br>
    <button (click)="showName(nameInput)">Show name</button><br>
    <h1>{{ name }}</h1>
</main>

Typescript component

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

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

  name: string = '';

  showName(name: HTMLInputElement) {
    this.name = name.value;
  }
}

#4 component name: counter

Create a counter that increases by 1 when the user clicks a button.

<main>
    <h1>{{ count }}</h1>
    <button (click)="increment()">+</button>
  </main>

Typescript component

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

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

  increment() {
    this.count++;
  }
  }

#5 component name: simpleform

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

<h1>Simple form</h1>
<div>
    <form (submit)="onSubmit">
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" #nameInput><br>

      <label for="email">Email:</label>
      <input type="text" id="email" name="email" #emailInput><br>

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

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

Typescript component


import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms'; 

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

  onSubmit(event: Event){
    event.preventDefault(); 
    const form = event.target as HTMLFormElement;
    const name = (form.elements.namedItem('name') as HTMLInputElement).value;
    const email = (form.elements.namedItem('email') as HTMLInputElement).value;

    this.submittedData = { name, email };
    this.submitted = true;
  }
}

#6 component name: userage

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

<div>
    <label for="birthYear">Enter your birth year:</label>
    <input type="number" id="birthYear" #birthYearInput />
    <button (click)="calculateAge(birthYearInput.value)">Submit</button>
  </div>

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

Typescript component

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

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

    age: number | null = null;

    calculateAge(birthYear: string): void {
      const currentYear = new Date().getFullYear();
      const parsedBirthYear = parseInt(birthYear, 10);

      if (!isNaN(parsedBirthYear) && parsedBirthYear > 1900 && parsedBirthYear <= currentYear) {
        this.age = currentYear - parsedBirthYear;
      } else {
        this.age = null;
        alert('Please enter a valid birth year.');
      }
    }
  }

#7 component name: usergreeting

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

<div>
    <input #nameInput type="text" placeholder="Enter your name">
    <button (click)="greetUser(nameInput.value)">Greet</button>
    <p>{{ greeting }}</p>
  </div>

Typescript component

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

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

  greetUser(name: string): void {
    if (name.trim()) {
      this.greeting = `Hello, ${name}! Welcome !`;
    } else {
      this.greeting = 'Please enter your name.';
    }
  }
}

#8 component name: calculator

Create a simple calculator with add, subtract, multiply, and divide functionalities.

<div>
    <input #num1 type="number" placeholder="Enter first number">
    <input #num2 type="number" placeholder="Enter second number">

    <button (click)="add(num1.value, num2.value)">Add</button>
    <button (click)="subtract(num1.value, num2.value)">Subtract</button>
    <button (click)="multiply(num1.value, num2.value)">Multiply</button>
    <button (click)="divide(num1.value, num2.value)">Divide</button>

    <p>Result: {{ result }}</p>
  </div>

Typescript component

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

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

  add(num1: string, num2: string): void {
    this.result = this.calculate(num1, num2, 'add');
  }

  subtract(num1: string, num2: string): void {
    this.result = this.calculate(num1, num2, 'subtract');
  }

  multiply(num1: string, num2: string): void {
    this.result = this.calculate(num1, num2, 'multiply');
  }

  divide(num1: string, num2: string): void {
    this.result = this.calculate(num1, num2, 'divide');
  }

  private calculate(num1: string, num2: string, operation: string): number | string {
    const number1 = parseFloat(num1);
    const number2 = parseFloat(num2);

    if (isNaN(number1) || isNaN(number2)) {
      return 'Please enter valid numbers.';
    }

    switch (operation) {
      case 'add':
        return number1 + number2;
      case 'subtract':
        return number1 - number2;
      case 'multiply':
        return number1 * number2;
      case 'divide':
        return number2 !== 0 ? number1 / number2 : 'Cannot divide by zero.';
      default:
        return '';
    }
  }
}

#9 component name: textlength

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

<div>
    <label for="userString">Enter a word:</label>
    <input type="text" id="userString" #userInput placeholder="Type something..." />
  </div>
  <div>
    <button (click)="calculateStringLength(userInput.value)">BOOGSH KABOUGHSH</button>
  </div>

  <p>Length of the word: {{ stringLength }}</p>

Typescript component

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

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

    calculateStringLength(inputValue: string): void {
      this.stringLength = inputValue.length;
    }



}

#10 component name: currencyconverter

Input a value in one currency, convert it to another currency on button click (1 dollar = 56 Php).

 <div>
    <input #usdInput type="number" placeholder="Enter amount in USD">
    <button (click)="convertCurrency(usdInput.value)">Convert</button>

    <p *ngIf="usdInput.value">Amount in PHP: {{ convertedToPHP }}</p>
    <p *ngIf="usdInput.value">Amount in KRW: {{ convertedToKRW }}</p>
    <p *ngIf="usdInput.value">Amount in JPY: {{ convertedToJPY }}</p>
  </div>

Typescript component

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

@Component({
  selector: 'app-currencyconverter',
  templateUrl: './currencyconverter.component.html',
  styleUrl: './currencyconverter.component.css'
})
export class CurrencyconverterComponent {
  convertedToPHP: number = 0;
  convertedToKRW: number = 0;
  convertedToJPY: number = 0;

  convertCurrency(usdValue: string): void {
    const usd = parseFloat(usdValue);
    if (!isNaN(usd) && usd > 0) {
      this.convertedToPHP = usd * 56;
      this.convertedToKRW = usd * 1340;
      this.convertedToJPY = usd * 146;
    } else {
      this.convertedToPHP = this.convertedToKRW = this.convertedToJPY = 0;
    }
  }
}

#11 component name: evenoddchecker

Input a number and check if it is even or odd.

<div>
    <input #numberInput type="number" placeholder="Enter a number">
    <button (click)="checkEvenOdd(numberInput.value)">Check Even/Odd</button>
    <p>Result: {{ result }}</p>
  </div>

Typescript component

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

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

  checkEvenOdd(inputValue: string): void {
    const number = parseInt(inputValue, 10);
    if (isNaN(number)) {
      this.result = 'Please enter a valid number.';
    } else {
      this.result = number % 2 === 0 ? 'Even' : 'Odd';
    }
  }

}

#12 component name: wordreverser

Input a word, and when the button is clicked, display the word reversed.

<div>
    <input #wordInput type="text" placeholder="Enter a word">
    <button (click)="reverseWord(wordInput.value)">Reverse Word</button>
    <p>{{ reversedWord }}</p>
  </div>

Typescript component

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

@Component({
  selector: 'app-wordreverse',
  templateUrl: './wordreverse.component.html',
  styleUrl: './wordreverse.component.css'
})
export class WordreverseComponent {
  reversedWord: string = '';

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

#13 component name: showdate

Create a button that shows the current date and time when clicked.

<div>
  <button (click)="showDateTime()">Show Current Date and Time</button>
  <p>{{ currentDateTime }}</p>
</div>

Typescript component

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

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

  currentDateTime: string = '';

  showDateTime(): void {
    const now = new Date();
    this.currentDateTime = now.toLocaleString();
}
}

#14 component name: showusername

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

<div>
    <label for="username">Enter your username:</label>
    <input type="text" id="username" #usernameInput />
    <button (click)="displayUsername(usernameInput.value)">Submit</button>
  </div>

  <p>Your username is: {{ displayedUsername }}</p>

Typescript component

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

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

  displayUsername(username: string): void {
    this.displayedUsername = username;
  }
}

#15 component name: multiplicationtable

Input a number and generate its multiplication table.

<div>
    <input #numberInput type="number" placeholder="Enter a number"><br>
    <button (click)="generateTable(numberInput.value)">Generate Multiplication Table</button>

    <ul>
      <li *ngFor="let item of multiplicationTable">
        {{ item }}
      </li>
    </ul>
  </div>

Typescript components

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

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

  generateTable(numberValue: string): void {
    const number = parseInt(numberValue, 10);
    this.multiplicationTable = [];

    if (!isNaN(number)) {
      for (let i = 1; i <= 10; i++) {
        this.multiplicationTable.push(`${number} x ${i} = ${number * i}`);
      }
    } else {
      this.multiplicationTable.push('Please enter a valid number.');
    }
  }
}

#16 component name: simplelogin

Create a simple login form with email and password fields.


<main>

    <input type="text" placeholder="Enter your Username">
    <br>
    <input type="password" placeholder="Enter your Password">
    <br>
    <button>Login</button>
</main>

Typescript component

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

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

}

#17 component name: fahrenheittocelsius

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


<div class="converter">
    <label for="fahrenheitInput">Enter temperature in Fahrenheit:</label>
    <input 
      type="number" 
      id="fahrenheitInput" 
      placeholder="Fahrenheit" 
      (input)="onInputChange($event)">
  </div>

  <div>
    <h3>Temperature in Celsius:</h3>
    <p>{{ celsiusValue !== null ? celsiusValue + ' °C' : '--' }}</p>
  </div>

Typescript component

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

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


  convertFahrenheitToCelsius(fahrenheit: number): number {
    return (fahrenheit - 32) * 5 / 9;
  }


  onInputChange(event: Event): void {
    const input = (event.target as HTMLInputElement).value;
    const fahrenheitValue = parseFloat(input);


    if (!isNaN(fahrenheitValue)) {
      this.celsiusValue = parseFloat(this.convertFahrenheitToCelsius(fahrenheitValue).toFixed(2));
    } else {
      this.celsiusValue = null;
    }
  }
}

#18 component name: bookmarklist

Allow users to input URLs and display them using anchor tags.

<div class="url-input">
    <label for="urlInput">Enter the link:</label>
    <input type="text" id="urlInput" placeholder="Enter a valid URL" (input)="onUrlInput($event)" />
    <button (click)="addUrl()">Add URL</button>
  </div>

  <div class="url-list">
    <h3>Saved URLs:</h3>
    <ul>
      <li *ngFor="let url of urlList">
        <a [href]="url" target="_blank">{{ url }}</a>
      </li>
    </ul>
  </div>

Typescript component

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

@Component({
  selector: 'app-bookmarklist',
  templateUrl: './bookmarklist.component.html',
  styleUrl: './bookmarklist.component.css'
})
export class BookmarklistComponent {
  urlInputValue: string = ''; 
  urlList: string[] = [];     


  onUrlInput(event: Event): void {
    const input = (event.target as HTMLInputElement).value;
    this.urlInputValue = input;
  }


  addUrl(): void {
    if (this.isValidUrl(this.urlInputValue)) {
      this.urlList.push(this.urlInputValue);
      this.urlInputValue = ''; 
    } else {
      alert('Please enter a valid URL.');
    }
  }


  isValidUrl(url: string): boolean {
    const pattern = new RegExp('^(https?:\\/\\/)?' + 
      '((([a-zA-Z0-9$_.+!*\'(),-]+\\.[a-zA-Z0-9-]+)|' + 
      '([a-zA-Z0-9]+))|' + 
      '\\[?[a-fA-F0-9:.]+\\]?)' + 
      '(\\:[0-9]{1,5})?' + 
      '(\\/.*)?$'); 
    return pattern.test(url);
  }
}

#19 component name: charactercounter

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


    <div class="character-counter">
        <label for="stringInput">Enter a word:</label>
        <input 
          type="text" 
          id="stringInput" 
          placeholder="Type something..." 
          (input)="onStringInput($event)">
      </div>

      <div>
        <h3>Character Count:</h3>
        <p>{{ characterCount }}</p>
      </div>

Typescript componet

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

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

  onStringInput(event: Event): void {
    const inputString = (event.target as HTMLInputElement).value;
    this.characterCount = inputString.length;
  }
}

#20 component name: palindromechecker

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

<main>
    <div class="palindrome-checker"></div>
    <label for="wordInput">Enter a word:</label>
    <input 
      type="text" 
      id="wordInput" 
      placeholder="Type a word..." 
      (input)="onWordInput($event)" />


  <div>
    <h3>Palindrome Check:</h3>
    <p>{{ isPalindrome !== null ? (isPalindrome ? 'Yes, it is a palindrome!' : 'No, it is not a palindrome.') : 'Enter a word to check.' }}</p>
  </div>
</main>

Typescript component

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

@Component({
  selector: 'app-palindrome',
  templateUrl: './palindrome.component.html',
  styleUrl: './palindrome.component.css'
})
export class PalindromeComponent {
  isPalindrome: boolean | null = null;  


  onWordInput(event: Event): void {
    const inputWord = (event.target as HTMLInputElement).value.trim().toLowerCase();


    if (inputWord) {
      this.isPalindrome = inputWord === inputWord.split('').reverse().join('');
    } else {
      this.isPalindrome = null;  
    }
  }
}

#21 component name: temperatureconverter

Convert temperature from Celsius to Fahrenheit and vice versa.

#22 component name: shoppinglist

Create a shopping list where users can add and remove items (use list data structure).

#23 component name: factorialcalculator

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

#24 component name: todomanager

Create a simple to-do list where users can add and remove tasks (use list data structure).

#25 component name: guessnumbergame

Create a number guessing game where the user inputs guesses.

#26 component name: wordcounter

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

#27 component name: randomnumbergenerator

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

#28 component name: multiplicationchecker

Check if a number is a multiple of another number.

#29 component name: uppercaseconverter

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

#30 component name: wordshuffler

Input a word and shuffle its letters randomly.

#31 component name: bmisolver

Input height and weight, calculate and display the BMI.

#32 component name: usernamevalidator

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

#33 component name: interestcalculator

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

#34 component name: compoundinterestcalculator

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

#35 component name: fibonaccigenerator

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

#36 component name: oddsumcalculator

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

#37 component name: currencyformatter

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

#38 component name: randomquotedisplay

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

#39 component name: uppercasegreeting

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

#40 component name: divisiblechecker

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

Additional 10 project ideas

#41. Simple recipe book

#42. In Flash card App is like a digital reviewer where you can see and next the questions.

#43. Movie list App

#44. Random letter

#45. Image gallery

#46. Crochet project generator where some ideas you might wanna create when you are bored or need some inspiration or ideas.

#47. Playlist list

#48.Expense tracker

#49. probability test

#50. Table of elements

Table elements generator when you enter any letter it generates the elements value in periodic table.

OUTPUT:

Github Repository: https://github.com/Koronuma4Dev/murtheHelp