Setup

Angular 11 How to convert HTML to image?

Angular 11 How to convert HTML to image, This article will tell the developer how to change over HTML into an image utilizing the html-to-image NPM bundle. developer can change over any Dom components into a image, Dom components like div, length, table, and so forth

By utilizing html-to-image bundle client can change HTML over to an image, a developer can change HTML over to JPEG, PNG, SVG, BLOB(Binary Large Object), This model gives you a straightforward and simple approach to change Angular 11 HTML over to Image.

Angular 11 How to convert HTML to Image Example

Step 1 – Create a new Angular 11 app
Step 2 – Install html-to-image Package
Step 3 – Add HTML into a view file
Step 4 – Add code in Component .ts file
Step 5 – Run Angular app

Step 1 – Create a new Angular 11 app

First of all, open your command prompt and execute the following command to create a new Angular 11 app.

ng new htmltoImage

Step 2 – Install html-to-image Package

In this step, We will install html-to-image using node package module, open the terminal and execute the following command in the terminal.

npm install --save html-to-image

Step 3 – Add HTML into a view file

In this step, We will add HTML code in a view file so visit the src/app/app.component.html file and add your HTML code

<div id="image-section">
  <h1>Hello world!</h1>
</div>
 
<button type="button" (click)="generateImg()">GenerateImage</button>

In the above code, I have added the id attribute because this package will access the DOM Elements and generate an image.

Step 4 – Add code in Component .ts file

import { Component } from '@angular/core';
import * as htmlToImage from 'html-to-image';
 
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'htmltoImage';
 
  generateImg(){
    var node:any = document.getElementById('image-section');
    htmlToImage.toPng(node)
      .then(function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;
        document.body.appendChild(img);
      })
      .catch(function (error) {
        console.error('Error, something is missing!', error);
      });
  }
}
Step 5 –

Step 5 – Run Angular app

ng serve

Post Views: 23

September 30, 2021 by admin Angular HTML 0

Angular Google Bar Chart Example

Angular Google Bar Chart :

Google chart tools are powerful, simple to use, and free. Try out our rich gallery of interactive charts and data tools. Get started Chart Gallery. insert_chart Rich Gallery Choose from a variety of charts. From simple scatter plots to hierarchical treemaps, find the best fit for your data.

This instructional exercise shows you Angular google bar graph model. it’s straightforward illustration of Angular google bar graph npm. This post will give you straightforward illustration of Angular precise google-graphs google bar diagram . Here you will figure out how to add google bar graph in Angular .

you can without much of a stretch add google programming interface bar graph in Angular 6, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11 and Angular 12 form application.

In this model we will utilize Angular google-graphs npm bundle to make google programming interface bar outline model in Angular 11 application. we will essentially introduce that Angular google-graphs npm bundle and use GoogleChartsModule module to make code.

Along these lines, we should see cry step and get qr code as like roar screen capture:

Step 1: Create New App

ng new myNewApp

Step 2: Install angular-google-charts npm Package

Add angular-google-charts in our angular application by using following command.

npm install angular-google-charts

Step 3: Import GoogleChartsModule

src/app/app.module.ts

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

Step 4: Update Ts File

src/app/app.component.ts

import { Component } from '@angular/core';
   
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    
  chartData = {
      type: 'BarChart',
      data: [
      ["Pendrive",  500],
      ["Hard Disk",  800],
      ["Charger",  400],
   ],
   chartColumns: ['Sweets', 'Sell'],
   width: 1000,
   height: 400
  };
     
}

Step 5: Update HTML File

<google-chart 
    [type]="chartData.type" 
    [data]="chartData.data" 
    [columns]="chartData.chartColumns" 
    [width]="chartData.width"
    [height]="chartData.height">     
</google-chart>

Now run your application using the following command

ng serve

Post Views: 62

August 19, 2021 by admin Angular 0

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;

Post Views: 48

August 13, 2021 by admin React JS 0

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

Post Views: 181

August 11, 2021 by admin Angular 0

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;
}

Post Views: 1,512

August 4, 2021 by admin NodeJS React JS 0

Setup React App

Create React App

Setup React App : is an agreeable climate for learning React and is the most ideal approach to begin assembling another single-page application in React.

ReactJS is a declarative, efficient, and flexible JavaScript library for building reusable UI components. It is an open-source, component-based front end library which is responsible only for the view layer of the application. It was initially developed and maintained by Facebook and later used in its products like WhatsApp & Instagram.

Respond makes it effortless to make intuitive UIs. Plan straightforward perspectives for each state in your application, and React will effectively refresh and deliver the perfect segments when your information changes.

Explanatory perspectives make your code more unsurprising and simpler to investigate

It sets up your advancement climate with the goal that you can utilize the most recent JavaScript highlights, gives a pleasant designer experience, and enhances your application for creation. You’ll have to have Node >= 10.16 and npm >= 5.6 on your machine. To make an undertaking, run:

npm create-react-app my-application
cd my-application
npm start

Make React App doesn’t deal with backend rationale or data sets; it simply makes a frontend construct pipeline, so you can utilize it with any backend you need. In the engine, it utilizes Babel and webpack, however you don’t have to know anything about them.

You can study Create React App from its README and the User Guide.

Post Views: 860

July 17, 2021 by admin React JS 0

How to Install Angular on Windows

Requirements :

How to Install Angular on Windows : To install Angular on your local machine , you need to follow this below :

1 NodeJS :

Angular will need an active LTS or maintenance LTS version of Node.js.

npm package manager :

Precise, the Angular CLI, and Angular applications rely upon npm bundles for some highlights and capacities. To download and introduce npm bundles, you need a npm bundle supervisor. This aide utilizes the npm customer order line interface, which is introduced with Node.js naturally. To watch that you have the npm customer introduced, run npm – v in a terminal window

Install the Angular CLI :

You utilize the Angular CLI to make projects, produce application and library code, and play out an assortment of progressing improvement undertakings like testing, packaging, and arrangement.

To introduce the Angular CLI, open a terminal window and run the accompanying order:

npm install -g @angular/cli

Create a workspace and initial application :

To create a new workspace and initial starter app:

Run the CLI order ng new and give the name my-application, as displayed here:

ng new my-application

The ng new order prompts you for data about highlights to remember for the underlying application. Acknowledge the defaults by squeezing the Enter or Return key.

The Angular CLI introduces the essential Angular npm bundles and different conditions. This can require a couple of moments.

The CLI makes another workspace and a basic Welcome application prepared to run.

Run the application :

The Angular CLI incorporates a worker, so you can assemble and serve your application locally.

Explore to the workspace organizer, for example, my-application.

Run the accompanying order:

cd my-app
ng serve --open

The ng serve order dispatches the worker, watches your documents, and revamps the application as you make changes to those records.

The – open (or just – o) alternative naturally opens your program to http://localhost:4200/.

On the off chance that your establishment and arrangement were effective, you should see a page like the accompanying.

How to Install Angular on Windows — This is how it looks

Post Views: 882

July 7, 2021 by admin Angular 0