Hello to all, welcome again on therichpost.com. In this post, I will tell you, How to make custom quantity selector into Angular 9 application?

Here are the complete commands and code snippet and please follow carefully:

1. Here are the basics commands to set angular 9 your system:

npm install -g @angular/cli 

ng new angularbootstrap //Create new Angular Project

$ cd angularbootstrap // Go inside the Angular Project Folder

ng serve --open // Run and Open the Angular Project

http://localhost:4200/ // Working Angular Project Url

 

2. Here is the command to install bootstrap 4 into your angular 9 applicatiopn:

npm install --save bootstrap

 

3. Here are the bootstrap 4 css and js path, you need to include into your angular.json file:

"styles": [
        ...
        "node_modules/bootstrap/dist/css/bootstrap.min.css"
        ...
         ],
"scripts": [
       ...
      "node_modules/bootstrap/dist/js/bootstrap.min.js"
      ...
       ]

 

4. Here is the html code, you need to add into your src\app\app.component.html file:

<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="container" style="margin-top:30px">
  <div class="row">
    <div class="col-sm-4">
      <h5>Product Qunatity Button demo:</h5>
    </div>
    <div class="col-sm-8 mb-5">
  <div class="form-check-inline">
  <button class="btn btn-primary" (click)="plus()"><i class="fa fa-plus"></i></button>
  </div>
  <div class="form-check-inline">
  <input type="text" class="form-control" [(ngModel)]="inputnumber">
  </div>
  <div class="form-check-inline">
  <button class="btn btn-primary" (click)="minus()"><i class="fa fa-minus"></i></button>
  </div>
      
    </div>
  </div>
</div>

 

5. Here is the code, you need to add into your app.module.ts file:

...
import { FormsModule } from '@angular/forms';
...

imports: [
    ...
  FormsModule
    ...
  ],
...

 

6. Here is the code, you need to add into your app.component.ts file:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angularbootstrap';
  inputnumber = 0;
  
  plus()
  {
   this.inputnumber = this.inputnumber+1;
  }
  minus()
  {
    if(this.inputnumber != 0)
  {
   this.inputnumber = this.inputnumber-1;
  }
  
  }
}

 

This is it and please run ng serve command and check the output. If you have any kind of query then please do comment below.

Jassa

Thank you