Categories

Thursday, June 13, 2024
#919814419350 therichposts@gmail.com
Angular 8Angular 9Angular7Bootstrap 4

How to make custom quantity selector into Angular 9 application?

angular 9 qunatity selector

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

therichpost
the authortherichpost
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

4 Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.