Angular 19 Tutorial in Hindi #11 Make Counter App
Make Buttons for increment, Decrement and Reset
Take Country Property and Display on UI
Make function for increment, decrement and reset
Add Style to buttons
Interview Questions
<h1>Counter App</h1>
<div style="text-align: center;">
<h3 class="count">{{count}}</h3>
<div>
<button (click)="handleCounter('minus')" class="btn bg-red">Decrement</button>
<button (click)="handleCounter('reset')" class="btn bg-black">Reset</button>
<button (click)="handleCounter('plus')" class="btn bg-green">Increment</button>
</div>
</div>
.btn {
width: 80px;
height: 80px;
border-radius: 50%;
border: 1px solid #000;
margin: 10px;
color: #fff;
cursor: pointer;
}
.bg-red{
background-color: red;
}
.bg-green{
background-color: green;
}
.bg-black{
background-color: black;
}
.btn:hover{
border: 1px solid #fff;
}
.count{
font-size: 30px;
margin: auto;
margin-bottom: 20px;
width: 100px;
background-color: gray;
text-align: center;
padding: 10px;
border-radius: 10px;
}
import { Component, signal } from '@angular/core';
@Component({
selector: 'app-root',
imports: [],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
count = 0
handleCounter(val: string) {
if (val == 'minus') {
this.count = this.count - 1
} else if (val == 'plus') {
this.count = this.count + 1
} else {
this.count = 0
}
}
}