Bootstrap

How to Add Bootstrap to Angular

How to Add Bootstrap to Angular

How to Add Bootstrap to Angular : In this article , we will tell you the best way to add Bootstrap to the Angular application. This instructional exercise utilizes Bootstrap 4 and Angular 9. We will tell you the best way to introduce the bootstrap CSS.

What is Bootstrap:

The bootstrap is a responsive mobile-first CSS framework for building Web Applications. It is open source and has all the features like Sass variables, mixings, responsive grid system, prebuilt components, and powerful JavaScript plugins.

Bootstrap consists of few CSS files & JS files.

The CSS files contains all the styles definitions.

Many of bootstrap components require the use of JavaScript to function. For Example, carousels, drop-down menus, auto-suggest, etc require bootstraps.js file. It also has dependency on jQueryPopper.js.

Step 1 : Create a new Angular Application

ng new Bootstrap-example

Step 2 : Adding Bootstrap CSS File –

Assuming you are not utilizing any of the components that utilization JavaScript, you don’t have to introduce JS documents. There are a couple of manners by which you can add the CSS Files.

We can introduce the Bootstrap CSS document in one of the accompanying ways

  • You can use the CSS file from a CDN
  • Also, copy the bootstrap.min.css file to a local folder
  • Install the bootstrap npm package

Once introduced, you can remember it for the application by utilizing the one of the techniques

  • You can add it in index.html using the link tag
  • Alos, include it in angular.json
  • Import it in styles.css

Add Bootstrap using the CDN –

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bootstrap CSS Example</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"  crossorigin="anonymous">
</head>
<body>
  <app-root></app-root>
</body>
</html>

Alternatively, you can use the @import directive in the styles.css file

@import "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"

Install the bootstrap package :

This way is recommended to everyone to add Bootstrap to Angular :

Run the following command to install the latest version of Bootstrap to your Application.

npm install --save bootstrap

This will add the bootstrap files to the node_modules/bootstrap directory.

Open the angular.json file and locate the projects -> Bootstrap-example (your project name) -> architect -> build -> styles node.

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

Also, you can just add the @import directive to import it in the styles.css

@import "~../node_modules/bootstrap/dist/css/bootstrap.min.css";

Step 3: Run your app using the following command

ng serve

 

React Color Picker Tutorial Example

React Color Picker Tutorial Example

React Color Picker Tutorial Example : In this instructional exercise, you will figure out how to execute color picker in React JS applications.

You more likely than not seen in many web and applications that you can pick the shading straightforwardly on color picker. You need to add basic color picker to your React JS application. So in this instructional exercise you will get bit by bit guide. With the assistance of which you can add your React JS application basic color picker.

Live demo : See here

Create Color Picker in React :

  • Step 1 – Create React App
  • Step 2 – Add Bootstrap Library
  • Step 3 – Add Color Picker Library
  • Step 4 – Create Color Picker Component
  • Step 5 – Add Color Picker Component in App.js

Step 1 – Create React App :

npx create-react-app my-colorpicker-app

Run app now:

npm start

Go to URL: localhost:3000

Step 2 – Add Bootstrap Library :

Install bootstrap:

npm install bootstrap --save

Add bootstrap.min.css file in src/App.js file:

import React, { Component } from 'react'
 
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
 
function App() {
  return (
    <div>
      <h2>How to create color picker in React</h2>
    </div>
  );
}
 
export default App;

Step 3 – Add Color Picker Library :

npm install react-color --save

Step 4 – Create Color Picker Component :

Make ColorPickerComponent.js document. Along these lines, visit the src directory of your application and make a table component document named ColorPickerComponent.js. What’s more, add the accompanying code into it :

'use strict'
 
import React from 'react'
import reactCSS from 'reactcss'
import { SketchPicker } from 'react-color'
 
class ColorPickerComponent extends React.Component {
    state = {
      displayColorPicker: false,
      color: {
        r: '241',
        g: '112',
        b: '19',
        a: '1',
      },
    };
 
    handleClick = () => {
      this.setState({ displayColorPicker: !this.state.displayColorPicker })
    };
 
    handleClose = () => {
      this.setState({ displayColorPicker: false })
    };
 
    handleChange = (color) => {
      this.setState({ color: color.rgb })
    };
 
    render() {
 
      const styles = reactCSS({
        'default': {
          color: {
            width: '36px',
            height: '14px',
            borderRadius: '2px',
            background: `rgba(${ this.state.color.r }, ${ this.state.color.g }, ${ this.state.color.b }, ${ this.state.color.a })`,
          },
          swatch: {
            padding: '5px',
            background: '#fff',
            borderRadius: '1px',
            boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
            display: 'inline-block',
            cursor: 'pointer',
          },
          popover: {
            position: 'absolute',
            zIndex: '2',
          },
          cover: {
            position: 'fixed',
            top: '0px',
            right: '0px',
            bottom: '0px',
            left: '0px',
          },
        },
      });
 
      return (
        <div>
          <div style={ styles.swatch } onClick={ this.handleClick }>
            <div style={ styles.color } />
          </div>
          { this.state.displayColorPicker ? <div style={ styles.popover }>
            <div style={ styles.cover } onClick={ this.handleClose }/>
            <SketchPicker color={ this.state.color } onChange={ this.handleChange } />
          </div> : null }
 
        </div>
      )
    }
}
 
export default ColorPickerComponent

Step 5 – Add Color Picker Component in App.js

In this progression, you need to add ColorPickerComponent.js document in src/App.js record:

import React from 'react';
 
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
 
import ColorPickerComponent from './ColorPickerComponent'
 
function App() {  
     
  return (  
    <div className="App">  
      <ColorPickerComponent />  
    </div>  
  );  
}  
 
export default App;

Angular Crop Image Before Upload with Preview

Angular Crop Image Before Upload with Preview

Angular Crop Image Before Upload with Preview : In this article, we will talk about Angular crop picture before upload to the application . This post will give you straightforward illustration of Angular cropper model. you’ll learn picture upload with crop in Angular. This article goes in nitty gritty on Angular  picture upload with crop utilizing cropper.

In the event that you need to utilize picture transfer with crop, you can undoubtedly utilize ngx-image-cropper npm package. it will give you Cropping, Zooming, Scaling, and Preview usefulness while uploading time. it’s effectively use with your Angular.

In this model, I will give you bit by bit clarification how you can upload transfer in crop in Angular application.

Step 1: Create New App

Create Angular app using the following command :

ng new ngPicCrop

Step 2: Install Npm Packages : 

In this progression, we will introduce ngx-image-cropper npm package for upload picture crop work in precise.

npm install ngx-image-cropper --save

Step 3: Import ImageCropperModule

Now, here we will import ImageCropperModule from ngx-image-cropper and then we add on declarations part. so let’s update app.module.ts file as like bellow:

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
  
import { AppComponent } from './app.component';
  
import { ImageCropperModule } from 'ngx-image-cropper';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ImageCropperModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

Step 4: Update Component ts File : 

Here, we will refresh app.component.ts document here, in this record we will compose fileChangeEvent(), imageCropped(), imageLoaded(), cropperReady() and loadImageFailed() that gave by ngx-image-cropper.

You can refresh as howl app.component.ts document.

src/app/app.component.ts

import { Component } from '@angular/core';
import { ImageCroppedEvent } from 'ngx-image-cropper';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ngImageCrop';
  
  imageChangedEvent: any = '';
    croppedImage: any = '';
  
    fileChangeEvent(event: any): void {
        this.imageChangedEvent = event;
    }
    imageCropped(event: ImageCroppedEvent) {
        this.croppedImage = event.base64;
    }
    imageLoaded() {
        /* show cropper */
    }
    cropperReady() {
        /* cropper ready */
    }
    loadImageFailed() {
        /* show message */
    }

Step 5: Update HTML File : 

<div class="container">
    <div class="card">
      <div class="card-header">
          Angular Crop Image Tutorial Example - ItSolutionStuff.com
      </div>
      <div class="card-body">
        <input type="file" (change)="fileChangeEvent($event)" />
        <div class="row" style="margin-top: 15px;">
            <div class="text-center col-md-8">
                <h5>Crop Image</h5>
                <image-cropper 
                [imageChangedEvent]="imageChangedEvent" 
                [maintainAspectRatio]="true" 
                [aspectRatio]="4 / 4"
                [resizeToWidth]="256" 
                format="png" 
                (imageCropped)="imageCropped($event)" 
                (imageLoaded)="imageLoaded()"
                (cropperReady)="cropperReady()" 
                (loadImageFailed)="loadImageFailed()"></image-cropper>
            </div>
            <div class="text-center col-md-4">
                <h5>Preview</h5>
                <img [src]="croppedImage" />
            </div>
        </div>
      </div>
    </div>
</div>

Now you run your Angular app by following command :

ng serve

 

Output :

Angular Crop Image Before Upload with Preview

Angular Crop Image Before Upload with Preview

Angular Display JSON Data in Table Example

Angular Display JSON Data in Table Example

Angular Display JSON Data in Table : This instructional exercise will give you illustration of Angular showcase json data in table. you can comprehend an idea of how to show information in Angular . this model will help you Angular show information in table. I disclosed just about how to show information in Angular. Okay, how about we plunge into the means.

At some point we need to show our information in table arrangement for front end. we will utilize *ngfor mandate for show information in table. we will likewise utilize bootstrap for showing information in Angular application.

JSON is an abbreviation for JavaScript Object Notation, is an open standard organization, which is lightweight and text-based, planned expressly for intelligible information exchange. It is a language-free information design. It upholds pretty much every sort of language, structure, and library.

How about we see straightforward after advance to done basic model that will help you to showing information in Angular application.

 

Create New App

Assuming you are doing model without any preparation, You can undoubtedly make your Angular application utilizing cry order:

ng new my-app

In this record we will make understudies object cluster utilizing Student interface. so how about we see howl record code.

src/app/app.component.ts

import { Component } from '@angular/core';
  
interface Employee{
    id: Number;
    name: String;
    email: String;
    gender: String;
}
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
    
  students: Employee[] = [
    {
      id: 1,
      emp_code : "3505",
      name: "Rohit",
      email: "rohit@gmail.com",
      gender: "male"
      
    },
    {
      id: 2,
      emp_code : "3506",
      name: "Amit",
      email: "amit@gmail.com",
      gender: "male"
    },
    {
      id: 3,
      emp_code : "3507",
      name: "Kumkum",
      email: "kumkum@gmail.com",
      gender: "female"
    },
    {
      id: 4,
      emp_code : "3508",
      name: "Ajit",
      email: "ajit@gmail.com",
      gender: "male"
    },
    {
      id: 5,
      emp_code : "3509",
      name: "Mohit",
      email: "mohit@gmail.com",
      gender: "male"
    },
  ]
}

In this step, we will write code for display data of employee object array variable using ngfor directive.

I have used bootstrap class.

src/app/app.component.html

<div class="container"> 
  <table class="table table-striped">
    <thead>
        <tr>
          <th>S.no</th>
          <th>Name</th>
          <th>Employee Code</th>
          <th>Email</th>
          <th>Gender</th>
        </tr>
    </thead>
    <tbody>
      <tr *ngFor="let emp of employee">
        <td>{{ emp.id }}</td>       
        <td>{{ emp.name }}</td>
        <td>{{ emp.emp_code}}</td>       
        <td>{{ emp.email }}</td>  
        <td>{{ emp.gender }}</td>     
      </tr>
    </tbody>
  </table>
</div>

Presently you can run your application using following command.

ng serve

 

Output :

Angular Display JSON Data in Table Example

How to Add and Remove Row Dynamically in React JS

How to Add and Remove Row Dynamically in React JS

How to Add and Remove Row Dynamically : React is a front-end library created by Facebook. It is utilized for dealing with the view layer for web and portable applications. ReactJS permits us to make reusable UI segments. It is right now perhaps the most well known JavaScript libraries and has a solid establishment and huge local area behind it.

This instructional exercise will help JavaScript engineers who look forward to manage ReactJS interestingly. We will attempt to present each idea by showing basic code models that can be handily perceived. Subsequent to completing every one of the parts, you will feel sure working with ReactJS. As a little something extra we will present extra components that function admirably with ReactJS to assist you with learning the prescribed procedures and pursue the advanced JavaScript directions.

Introduction to the Blog

This tutorial will teach you how to add and remove rows from the network.

This instructional exercise additionally covers the Reactive structure approvals on powerfully created components and reset structure in the wake of presenting the structure.

In the wake of Researching numerous things over google about this usefulness the websites were not covering everything simultaneously.

So I chose to compose code myself and offer it with each and every individual who actually needs it.

This will required to Setup ReactJS Locally on you system along with Node JS : See here

We should begin :

It will require 2 Files.

app.js

app.css

App.js :

In this file you will have to install two dependency :

npm install react-bootstrap

and  then

npm install react-bootstrap bootstrap

 

import './App.css';
import React , {useState}   from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import { Container } from 'react-bootstrap';
function App() {
//------------Contact Information Phone Script starts here------------- //
const[contactPhoneList, setcontactPhoneList] = useState([
{contactPhoneType: "Program 1", contactCountryCode: "Test", contactMobileNumber: "9050131191", contactExtension: "Extension 1", contactIsPrefered : true}]
) 
const cPhoneHandleChange = (e,index) => {  
let {id, value} = e.target; // accessing the value of element by ID\ 
//Checking if element is checkbox or not and setting it's value true 
if(e.target.checked == true && e.target.type === 'checkbox'){
value = true;
}
//Checking if element is checkbox or not and setting it's value false
else if(e.target.checked == false &&  e.target.type === 'checkbox'){   
value=false;
} 
const cPhonelist = [...contactPhoneList];
cPhonelist[index][id] = value; 
setcontactPhoneList(cPhonelist);
}
const cPhonehandleAddInput = () => {
setcontactPhoneList([...contactPhoneList, {contactPhoneType: "Program 1", contactCountryCode: "Test", contactMobileNumber: "9050131191", contactExtension: "Extension 1",contactIsPrefered : true}])
}
const cPhoneHandleRemoveInput = (index) => {
const cPhonelist = [...contactPhoneList];
cPhonelist.splice(index, 1);
setcontactPhoneList(cPhonelist);
}
//------------Contact Information Phone ends starts here------------- //  
return (
<div className="App">
<header className="App-header">
<Container>
<div class="row result">
{JSON.stringify(contactPhoneList , null , 2)}
</div>
{contactPhoneList.map((item,i) => {
return(
<div className="row">
<div className="col-md-2 col-6">
<div className="form-group floating">
<select className="form-select" id="contactPhoneType" value={item.contactPhoneType} onChange={e => cPhoneHandleChange(e,i)}>
<option selected disabled value="">Phone Type</option>
<option>Personal</option> 
<option>Work</option>    
<option>Alternate</option>      
<option>PA</option>                   
</select>
</div>
</div>
<div className="col-md-2 col-6">
<div className="form-group floating">
<select className="form-select" id="contactCountryCode" value={item.contactCountryCode} onChange={e => cPhoneHandleChange(e,i)} required >
<option selected disabled value="">Country Code</option>
<option>+1</option> 
<option>+2</option>    
<option>+3</option>      
<option>+4</option>                   
</select>
<div className="invalid-feedback">
Please select Country Code.
</div>
</div>
</div>                            
<div className="col-md-2 col-6">
<div className="form-group">
<input type="text" id="contactMobilenumber" className="form-control" placeholder="Number" name="contactMobilenumber" value={item.contactMobilenumber} onChange={e => cPhoneHandleChange(e,i)} required />
</div>
</div>
<div className="col-md-2 col-6">
<div className="form-group">
<input type="text" id="contactExtension" className="form-control" placeholder="Extension" name="cextension" value={item.contactExtension} onChange={e => cPhoneHandleChange(e,i)} />

</div>
</div>
<div className="col-md-2 col-6">
<div className="d-flex ">
<label htmlFor="floatingInput">Active
</label>
<div className="form-check form-switch ms-3">
<input className="form-check-input contactIsPrefered" type="checkbox" id="contactIsPrefered" defaultChecked={item.contactIsPrefered} value={item.contactIsPrefered}  onChange={e => cPhoneHandleChange(e,i)}/>
<label className="form-check-label" htmlFor="contactIsPrefered" />
</div>
</div>
</div>
<div className="col-md-2 col-6">
<div className="actionContainer ">
{contactPhoneList.length - 1 === i &&
// <button type="button" className="btn btn-primary">Add More</button>
<a href className="ms-4" onClick={cPhonehandleAddInput} >
<img src="https://img.icons8.com/color/48/000000/add.png"/>
{/* <div className="icon dripicons-trash" /> */}
</a> 

}                                
{contactPhoneList.length !== 1 &&
<a href className="ms-4" onClick={e => cPhoneHandleRemoveInput(i)}>
<img src="https://img.icons8.com/color/48/000000/delete-sign--v1.png"/>
{/* <div className="icon dripicons-trash" /> */}
</a>  
}                                   
</div>
</div>                                
</div>   
)
})}
</Container>
</header>
</div>
);
}
export default App;

App.css

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.result{
  height: 200px;
  overflow: scroll;
  border: 1px solid;
  background-color: #3e3e3e;
  margin-bottom: 30px;
  font-size: 14px;
}

 

How to Import Components from React Bootstrap

How to Import Components from React Bootstrap

Introduction

How to Import Components from React Bootstrap : React Bootstrap is one of the broadly utilized libraries in React, and its different segments are utilized in React applications to make them portable agreeable. It has huge loads of segments that give applications the different subtleties of design, structure controls, data pointers, and navigational segments.

In this aide, you will figure out how to add React Bootstrap into a React application by bringing in and utilizing the React Bootstrap parts in your React segments.

Adding React Bootstrap into a React App :

Install the React Bootstrap library by using the below npm command.

npm install react-bootstrap bootstrap

After installing the above two libraries, the next step is to add bootstrap CSS file into either index.js or app.js like this:

import 'bootstrap/dist/css/bootstrap.min.css';

On the other hand, in case you are utilizing SASS in your application, you can add it as displayed beneath.

App.scss

@import "~bootstrap/scss/bootstrap";

App.js

import './App.scss';

Presently you are a great idea to proceed to can continue further with React Bootstrap by bringing different segments into your React application.

Importing Components from React Bootstrap :

Since you have introduced the bootstrap library and arranged the CSS record into your application, it’s an ideal opportunity to import the segments from react-bootstrap.

The essential language structure for bringing in anything from react-bootstrap resembles this:

import { COMPONENT_NAME } from 'react-bootstrap';
or
import COMPONENT_NAME from 'react-bootstrap/COMPONENT_NAME';

It is the fundamental language structure that is utilized to import the particular segments from the library, yet you can in any case import it utilizing alternate ways that you will learn in the following segment of this aide.

Import Components from the React Bootstrap Library

Importing Single Components

You can import any Solo component from react-bootstrap as shown below.

import React, { Component } from "react";
import { Image } from "react-bootstrap";

class SoloComponent extends Component {
  render() {
    return (
      <div>
        <Image
          src="https://dummyimage.com/170x180/000/fff.png&text=TEST123"
          thumbnail
        />
      </div>
    );
  }
}

export default SoloComponent ;

In the above model, to import the Solo component called Image from the react-bootstrap library, the order utilized is:

import { Image } from "react-bootstrap";

Inside the render() work, the <Image/> component is utilized alongside different properties like href and another supporting property called thumbnail.

This is the means by which you can import any single segment from React Bootstrap:

Import Solo Components Individually : 

You can import and utilize any React Bootstrap component exclusively from respond bootstrap instead of bringing in them from the total library as displayed beneath.

import React, { Component } from "react";
import Breadcrumb from "react-bootstrap/Breadcrumb";

class SoloIndividualComp extends Component {
  render() {
    return (
      <Breadcrumb>
        <Breadcrumb.Item href="#">Home</Breadcrumb.Item>
        <Breadcrumb.Item href="#">Profile</Breadcrumb.Item>
        <Breadcrumb.Item active>Test123</Breadcrumb.Item>
      </Breadcrumb>
    );
  }
}

export default SoloIndividualComp ;

As displayed in the above model, Breadcrumb exclusively imported by utilizing this order:

import Breadcrumb from "react-bootstrap/Breadcrumb";

Pulling the particular component from the library instead of getting the entire bundle works on the exhibition while bringing and delivering the specific segment.

Use React Bootstrap Default Syntax 

The default sentence structure is an approach to utilize React Bootstrap powerfully without naming the particular segments, as done beforehand.

import React, { Component } from "react";
import * as ReactBootstrap from "react-bootstrap";

class DynamicImport extends Component {
  render() {
    return (
      <ReactBootstrap.Button bsStyle="success" bsSize="small">
        Something
      </ReactBootstrap.Button>
    );
  }
}

export default DynamicImport;

The above model doesn’t import any parts by name yet utilized a powerful import configuration to bring a particular segment when required, as displayed underneath.

import * as ReactBootstrap from "react-bootstrap";

At the point when you need any segments while fostering the UI, you need to utilize prefix ReactBoootstrap.comp_name followed by the particular segment name, which makes it simpler to utilize.

Importing Multiple Components

So far in this aide, you have figured out how to import a solitary explicit segment, yet you can import different segments from the single import articulation also.

The following is a basic model that tells the best way to import numerous segments from respond bootstrap from a solitary import proclamation.

 

import React, { Component } from "react";
import { Form, Col, Button } from "react-bootstrap";

class MultipleImport extends Component {
  render() {
    return (
      <Form>
        <Form.Row>
          <Col>
            <Form.Control placeholder="First name..." />
          </Col>
          <Col>
            <Form.Control placeholder="Last name..." />
          </Col>
          <Col>
            <Button>Submit</Button>
          </Col>
        </Form.Row>
      </Form>
    );
  }
}

export default MultipleImport;

In the above model, three segments, Form, Col, and Button, are imported from the single import explanation.

import { Form, Col, Button } from "react-bootstrap";

You can pick any of these techniques, however with regards to the exhibition, the different segments import proclamation or individual part import are way better compared to the others. I trust this aide assists you with messing about bringing in different segments. That was it from this aide; be protected, and continue to code.