Number Count Button

Step 1: Design the Blog and Button:

In the blog.component.html file, design your blog content. Include the number count button from the number-count-button component. Here's an example:

<div>
  <div class="d-flex number-selection-btn justify-content-center">
    <div class="d-flex align-items-center">
      <ion-button (click)="decrementCount()">
        <ion-icon
          name="remove-outline"
          class="icon-size"
          slot="icon-only"
        ></ion-icon>
      </ion-button>
    </div>
    <div class="d-flex align-items-center px-3 number-input-div">
      <ion-input
        class="text-center"
        type="number"
      >
      </ion-input>
    </div>
    <div class="d-flex align-items-center">
      <ion-button (click)="incrementCount()">
        <ion-icon
          name="add-outline"
          slot="icon-only"
          class="icon-size"
        ></ion-icon>
      </ion-button>
    </div>
  </div>
</div>

Step 2: Implement Number Count Css:

You can add Css As you Required

.input-bg {
  background: white;
  border-radius: 6px;
  border: 1px solid #9593a4;
  color: #06295b;
}

Step 3: Implement Number Count Logic:

In the number-count-button.component.ts file, implement the number count logic. Create a button that increments and decrement counter when clicked:

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

@Component({
  selector: 'app-number-count-button',
  templateUrl: './number-count-button.component.html',
  styleUrls: ['./number-count-button.component.css']
})
export class NumberCountButtonComponent {
  count: number = 0;

  incrementCount(): void {
    this.count++;
  }

  decrementCount(): void {
    this.count--;
  }
}

Step 4: Run the Application:

Run the Angular development server to see your blog with the number count button:

ng serve

Open your browser and navigate to http://localhost:4200 to view your Angular blog with the number count button.