Angular Components
Updated
•21 min readI made 40 components for this exercise using HTML and TYPESCRIPT, along with 10 components. These variously oriented parts will aid in your comprehension of the systems' logic. For a reviewer to familiarize themselves with the principles, I have included them.
50 Components with different functions
- Component name: displayhelloworld
Display the text "Hello World" on the screen using a variable from the TypeScript file.
import { Component } from '@angular/core';
@Component({
selector: 'app-displayhelloworld',
templateUrl: './displayhelloworld.component.html',
styleUrl: './displayhelloworld.component.css'
})
export class DisplayhelloworldComponent {
message: string = 'Hello World!';
}
<p>{{message}}</p>
- component name: showhellobutton
Create a button, and when the user clicks the button, "Hello World" is displayed on the screen.
import { Component } from '@angular/core';
@Component({
selector: 'app-showhellobutton',
templateUrl: './showhellobutton.component.html',
styleUrl: './showhellobutton.component.css'
})
export class ShowhellobuttonComponent {
}
<p>Hello World!</p>
- component name: displayname
User inputs their name, and when the button is clicked, their name is displayed on the screen.
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;
}
}
<input type="text" placeholder="Input your name" [(ngModel)]="name">
<button type="button" (click)="show()">Submit</button>
<br>
<p>{{result}}</p>
- component name: counter
Create a counter that increases by 1 when the user clicks a button.
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++;
}
}
<div class="counter-container">
<h2>Counter: {{ count }}</h2>
<button (click)="increment()">Increase</button>
</div>
- component name: simpleform
Create a form with text inputs and a submit button, display the submitted input data.
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,
};
}
}
`<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>
- component name: userage
Input user’s birth year, and when the button is clicked, display their age.
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;
}
}
}
<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>
- component name: usergreeting
User inputs their name, and when clicked, display a personalized greeting.
import { Component } from '@angular/core';
@Component({
selector: 'app-usergreeting',
templateUrl: './usergreeting.component.html',
styleUrls: ['./usergreeting.component.css'] // Use 'styleUrls' for an array
})
export class UsergreetingComponent {
name: string = '';
greeting: string = '';
generateGreeting(): void {
if (this.name.trim()) {
this.greeting = `Hello, ${this.name}! Welcome to my project about Angular Components.`;
} else {
this.greeting = 'Please enter your name.';
}
}
}
<div>
<h2>Enter Your Name:</h2>
<input type="text" [(ngModel)]="name" placeholder="Enter your name">
<button (click)="generateGreeting()">Greet Me</button>
<p *ngIf="greeting">{{ greeting }}</p>
</div>
- component name: calculator
Create a simple calculator with add, subtract, multiply, and divide functionalities.
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;
}
}
}
}
<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>
component name: textlength
Input a string, and when the button is clicked, display the length of the string.
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;
}
}
<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>
component name: currencyconverter
Input a value in one currency, convert it to another currency on button click (1 dollar = 56 Php).
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;
}
}
}
<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>
component name: evenoddchecker
Input a number and check if it is even or odd.
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';
}
}
}
<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>
component name: wordreverser
Input a word, and when the button is clicked, display the word reversed.
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('');
}
}
<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>
component name: showdate
Create a button that shows the current date and time when clicked.
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();
}
}
<div>
<h3>Show Current Date and Time</h3>
<button (click)="showDate()">Show Date</button>
<p *ngIf="currentDate">Current Date and Time: {{ currentDate }}</p>
</div>
component name: showusername
User inputs their username, and on clicking a button, their username is displayed on the screen.
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;
}
}
<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>
component name: multiplicationtable
Input a number and generate its multiplication table.
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));
}
}
}
<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>
component name: simplelogin
Create a simple login form with email and password fields.
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}`;
}
}
<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>
component name: fahrenheittocelsius
Convert temperature from Fahrenheit to Celsius when the user inputs a value.
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;
}
}
}
<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>
component name: bookmarklist
Allow users to input URLs and display them using anchor tags.
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 = '';
}
}
}
<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>
component name: charactercounter
Input a string and count the number of characters in it.
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;
}
}
<div>
<h3>Character Counter</h3>
<input type="text" [(ngModel)]="inputText" (input)="countCharacters()" placeholder="Enter text">
<p>Character Count: {{ characterCount }}</p>
</div>
component name: palindromechecker
Input a word and check if it's a palindrome.
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.';
}
}
<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>
component name: temperatureconverter
Convert temperature from Celsius to Fahrenheit and vice versa.
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;
}
}
}
<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>
component name: shoppinglist
Create a shopping list where users can add and remove items (use list data structure).
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);
}
}
<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>
component name: factorialcalculator
Input a number and calculate its factorial when a button is clicked.
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);
}
}
<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>
component name: todomanager
Create a simple to-do list where users can add and remove tasks (use list data structure).
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);
}
}
<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>
component name: guessnumbergame
Create a number guessing game where the user inputs guesses.
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;
}
}
<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>
component name: wordcounter
Input a string and count the number of words in it.
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;
}
}
}
<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>
component name: randomnumbergenerator
Generate and display a random number between a specified range when a button is clicked.
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;
}
}
<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>
component name: multiplicationchecker
Check if a number is a multiple of another number.
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}.`;
}
}
}
<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>
component name: uppercaseconverter
Input a string and convert it to uppercase when the button is clicked.
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();
}
}
<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>
component name: wordshuffler
Input a word and shuffle its letters randomly.
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('');
}
}
<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>
component name: bmisolver
Input height and weight, calculate and display the BMI.
import { Component } from '@angular/core';
@Component({
selector: 'app-bmisolver',
templateUrl: './bmisolver.component.html',
styleUrl: './bmisolver.component.css'
})
export class BmisolverComponent {
height: number | null = null;
weight: number | null = null;
bmi: number | null = null;
category: string = '';
calculateBMI(): void {
if (this.height && this.weight) {
this.bmi = this.weight / (this.height = this.height);
this.setBMICategory();
} else {
this.bmi = null;
this.category = '';
}
}
setBMICategory(): void {
if (this.bmi) {
if(this.bmi < 18.5) {
this.category = 'Underweight';
} else if (this.bmi >= 18.5 && this.bmi < 24.9) {
this.category = 'Normal weight';
} else if (this.bmi >= 25 && this.bmi < 29.9) {
this.category = 'Overweight';
} else {
this.category = 'Obese';
}
}
}
}
<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>
component name: usernamevalidator
Input a username and check its validity based on predefined rules (Create a variable).
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);
}
}
<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>
component name: interestcalculator
Input principal, rate, and time, and calculate simple interest.
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;
}
}
<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>
component name: compoundinterestcalculator
Calculate compound interest when principal, rate, time, and frequency are input.
import { Component } from '@angular/core'
@Component ({
selector: 'app-compoundinterestcalculator',
templateUrl: './compoundinterestcalculator.component.html',
styleUrl: './compoundinterestcalculator.component.css'
})
export class CompoundinterestcalculatorComponent {
principal: number | null = null;
rate: number | null = null;
time: number | null = null;
frequency: number | null = null;
compoundingInterest: number | null = null;
calculateCompoundingInterest(): void {
if (this.principal !== null && this.rate !== null && this.rate !== null && this.time !== null && this.frequency !==null) {
const r = this.rate / 100;
const n = this.frequency;
const t = this.time;
const amount = this.principal * Math.pow((1 + r / n), n * t);
this.compoundingInterest = amount - this.principal
} else {
this.compoundingInterest = null;
}
}
}
<div>
<label for="principatInput">Principal (Amount): </label>
<input type="number" id="principatInput" [(ngModel)]="Principal" placeholder="Enter Principal amount">
<label for="rateInput">Rate of Interest (%): </label>
<input type="number" id="rateInput" [(ngModel)]="rate" placeholder="Enter interest rate">
<label for="timeInput">Time (Years): </label>
<input type="number" id="timeInput" [(ngModel)]="time" placeholder="Enter time period in years">
<label for="frequencyInput"> Compounding frequency (e.g., 12 for monthly, 4 for quarterly, 1 for yearly): </label>
<input type="number" id="frequencyInput" [(ngModel)]="frequency" placeholder="Enter compounding frequency">
<button (click)="calculateCompoudingInterest()"> Calculate Compound Interest</button>
</div>
<div *ngIf="compoundingInterest !== null">
<p>Compound Interest: {{ compoundInterest | currency }}</p>
</div>
component name: fibonaccigenerator
Generate and display the first N Fibonacci numbers when a button is clicked.
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];
}
}
}
<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>
component name: oddsumcalculator
Input a number, and calculate the sum of odd numbers up to that number.
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;
}
}
}
}
<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>
component name: currencyformatter
Input a number and format it as currency when a button is clicked (Dollar, Php, Euro - search euro conversion).
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;
}
}
}
<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>
component name: randomquotedisplay
Display a random quote when a button is clicked (use list data structures).
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];
}
}
<div>
<button (click)="displayRandomQuote()">Show Random Quote</button>
<p>{{ displayedQuote }}</p>
</div>
component name: uppercasegreeting
User inputs their name, and when the button is clicked, display the name in uppercase.
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();
}
}
<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>
component name: divisiblechecker
Input two numbers, and check if the first is divisible by the second.
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;
}
}
<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>
- component name: emailvalidator
import { Component } from '@angular/core';
@Component({
selector: 'app-emailvalidator',
templateUrl: './emailvalidator.component.html',
styleUrls: ['./emailvalidator.component.css']
})
export class EmailValidatorComponent {
email: string = '';
isValid: boolean | null = null;
validateEmail() {
const regex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g;
this.isValid = regex.test(this.email);
}
}
<div>
<input type="email" [(ngModel)]="email" placeholder="Enter email"/>
<button (click)="validateEmail()">Validate Email</button>
<p *ngIf="isValid !== null">{{ isValid ? 'Valid' : 'Invalid' }} email</p>
</div>
- component name: areacalculator
import { Component } from '@angular/core';
@Component({
selector: 'app-areacalculator',
templateUrl: './areacalculator.component.html',
styleUrls: ['./areacalculator.component.css']
})
export class AreaCalculatorComponent {
length: number = 0;
width: number = 0;
area: number | null = null;
calculateArea() {
this.area = this.length * this.width;
}
}
<div>
<input type="number" [(ngModel)]="length" placeholder="Enter length"/>
<input type="number" [(ngModel)]="width" placeholder="Enter width"/>
<button (click)="calculateArea()">Calculate Area</button>
<p *ngIf="area !== null">Area: {{ area }} sq. units</p>
</div>
- component name: lengthconverter
import { Component } from '@angular/core';
@Component({
selector: 'app-lengthconverter',
templateUrl: './lengthconverter.component.html',
styleUrls: ['./lengthconverter.component.css']
})
export class LengthConverterComponent {
meters: number = 0;
kilometers: number | null = null;
convertToKilometers() {
this.kilometers = this.meters / 1000;
}
}
<div>
<input type="number" [(ngModel)]="meters" placeholder="Enter length in meters"/>
<button (click)="convertToKilometers()">Convert to Kilometers</button>
<p *ngIf="kilometers !== null">Length: {{ kilometers }} km</p>
</div>
- component name: emailobfuscator
import { Component } from '@angular/core';
@Component({
selector: 'app-emailobfuscator',
templateUrl: './emailobfuscator.component.html',
styleUrls: ['./emailobfuscator.component.css']
})
export class EmailObfuscatorComponent {
email: string = '';
obfuscatedEmail: string = '';
obfuscateEmail() {
this.obfuscatedEmail = this.email.replace(/@/g, '[at]').replace(/\./g, '[dot]');
}
}
<div>
<input type="email" [(ngModel)]="email" placeholder="Enter email"/>
<button (click)="obfuscateEmail()">Obfuscate Email</button>
<p *ngIf="obfuscatedEmail">Obfuscated: {{ obfuscatedEmail }}</p>
</div>
- component name: dayofweekdisplay
import { Component } from '@angular/core';
@Component({
selector: 'app-dayofweekdisplay',
templateUrl: './dayofweekdisplay.component.html',
styleUrls: ['./dayofweekdisplay.component.css']
})
export class DayOfWeekDisplayComponent {
day: string = '';
showDay() {
const today = new Date();
const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
this.day = days[today.getDay()];
}
}
<div>
<button (click)="showDay()">Show Day of the Week</button>
<p *ngIf="day">Today is: {{ day }}</p>
</div>
- component name: percentcalculator
import { Component } from '@angular/core';
@Component({
selector: 'app-percentcalculator',
templateUrl: './percentcalculator.component.html',
styleUrls: ['./percentcalculator.component.css']
})
export class PercentCalculatorComponent {
total: number = 0;
percentage: number = 0;
result: number | null = null;
calculatePercentage() {
this.result = (this.percentage / 100) * this.total;
}
}
<div>
<input type="number" [(ngModel)]="total" placeholder="Enter total value"/>
<input type="number" [(ngModel)]="percentage" placeholder="Enter percentage"/>
<button (click)="calculatePercentage()">Calculate Percentage</button>
<p *ngIf="result !== null">Result: {{ result }}</p>
</div>
- component name: primechecker
import { Component } from '@angular/core';
@Component({
selector: 'app-primechecker',
templateUrl: './primechecker.component.html',
styleUrls: ['./primechecker.component.css']
})
export class PrimeCheckerComponent {
number: number = 0;
isPrime: boolean | null = null;
checkPrime() {
if (this.number <= 1) {
this.isPrime = false;
return;
}
for (let i = 2; i < this.number; i++) {
if (this.number % i === 0) {
this.isPrime = false;
return;
}
}
this.isPrime = true;
}
}
<div>
<input type="number" [(ngModel)]="number" placeholder="Enter number"/>
<button (click)="checkPrime()">Check Prime</button>
<p *ngIf="isPrime !== null">{{ number }} is {{ isPrime ? '' : 'not' }} a prime number.</p>
</div>
- component name: cubecalculator
import { Component } from '@angular/core';
@Component({
selector: 'app-cubecalculator',
templateUrl: './cubecalculator.component.html',
styleUrls: ['./cubecalculator.component.css']
})
export class CubeCalculatorComponent {
number: number = 0;
cube: number | null = null;
calculateCube() {
this.cube = Math.pow(this.number, 3);
}
}
<div>
<input type="number" [(ngModel)]="number" placeholder="Enter number" />
<button (click)="calculateCube()">Calculate Cube</button>
<p *ngIf="cube !== null">The cube of {{ number }} is {{ cube }}</p>
</div>
- component name: randomcolorgenerator
import { Component } from '@angular/core';
@Component({
selector: 'app-randomcolorgenerator',
templateUrl: './randomcolorgenerator.component.html',
styleUrls: ['./randomcolorgenerator.component.css']
})
export class RandomColorGeneratorComponent {
color: string = '#ffffff';
generateRandomColor() {
this.color = '#' + Math.floor(Math.random()*16777215).toString(16);
}
}
<div>
<button (click)="generateRandomColor()">Generate Random Color</button>
<p [style.background]="color">Random
</div>
- component name: gradecalculator
import { Component } from '@angular/core';
@Component({
selector: 'app-gradecalculator',
templateUrl: './gradecalculator.component.html',
styleUrls: ['./gradecalculator.component.css']
})
export class GradeCalculatorComponent {
score: number = 0;
grade: string = '';
calculateGrade() {
if (this.score >= 90) {
this.grade = 'A';
} else if (this.score >= 80) {
this.grade = 'B';
} else if (this.score >= 70) {
this.grade = 'C';
} else if (this.score >= 60) {
this.grade = 'D';
} else {
this.grade = 'F';
}
}
}
<div>
<input type="number" [(ngModel)]="score" placeholder="Enter score" />
<button (click)="calculateGrade()">Calculate Grade</button>
<p *ngIf="grade">Your grade is {{ grade }}</p>
</div>