Angular's Articles

Angular - Browse articles to learn, error solve for angular web application framework.

Angular 12 Line Chart using ng2-charts Example
This example is fixated on the angular 11 line chart example. we will avail you to give an example of angular 11 line chart npm. let’s discuss angular 11 ng2-charts line chart. i would relish to show you how to integrate line chart in angular 11. In this example, we will utilize ng2-charts npm package to engender line chart example in angular 11 application. we will simply install that ng2-charts npm package and use ChartsModule module to engender code. Step 1: Create New App You can easily create your angular app using bellow command: ng new myNewApp Step 2: Install ng2-charts npm Package Now in this step, we need to just install ng2-charts in our angular application. so let's add as like bellow: npm install ng2-charts chart.js --save Step 3: Import ChartsModule we will import ChartsModule module as like bellow code: src/app/app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import { ChartsModule } from 'ng2-charts'; @NgModule({ imports: [ BrowserModule, FormsModule, ChartsModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } Step 4: Update Ts File here, we need to update ts file as like bellow: src/app/app.component.ts import { Component, OnInit, ViewChild } from '@angular/core'; import { ChartDataSets, ChartOptions } from 'chart.js'; import { Color, Label } from 'ng2-charts'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent { public lineChartData: ChartDataSets[] = [ { data: [61, 59, 80, 65, 45, 55, 40, 56, 76, 65, 77, 60], label: 'Apple' }, { data: [57, 50, 75, 87, 43, 46, 37, 48, 67, 56, 70, 50], label: 'Mi' }, ]; public lineChartLabels: Label[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; public lineChartOptions: (ChartOptions & { annotation: any }) = { responsive: true, }; public lineChartLegend = true; public lineChartType = 'line'; public lineChartPlugins = []; constructor() { } ngOnInit() { } } Step 5: Update HTML File here, we need to update html file as like bellow code: src/app/app.component.html <h1>Angular Line Chart Example - HackTheStuff</h1> <div style="display: block;"> <canvas baseChart width="500" height="200" [datasets]="lineChartData" [labels]="lineChartLabels" [options]="lineChartOptions" [colors]="lineChartColors" [legend]="lineChartLegend" [chartType]="lineChartType" [plugins]="lineChartPlugins"> </canvas> </div> Now you can run by bellow command: ng serve now you can check it. I hope it can help you.
Set Up Angular Project From Scratch
Angular is open-source web application framework written in Typescript by Angular team in Google. Angular is commonly used for single page web application. It uses  Typescript core library and builds application using HTML and CSS. In this article, we are going to setup and create new Angular application. So first let's start with Nodejs. Install Node.js Angular requires LTS version of Node.js to install Angular application and its component. So first We start from installing Node.js. If you direct try to install Node.js with apt command, it will install Nodejs version 10.X which is not compitible for Angular. So first you need to change Node.js version. Run the below curl command to get script file. curl -sL -o sudo bash Now try to install Node.js with apt command. This will install latest Node.js version. sudo apt-get install -y nodejs Verify that Node.js is correctly installed. Run the below command and it will output the installed version. nodejs --version Install npm We will also need npm, Javascript runtime environment for Node.js. npm will install all package that you will need for Angular. Install npm with below command. sudo apt-get install npm You can also check npm version with command: npm --version Angular CLI After you installed npm, you will need to install Angular CLI. Angular CLI will used to create Angular project, bundle, testing and creating component etc. Run the below npm command and it will install angular-cli tool. You might need to run command with sudo permission otherwise it will return permission error. sudo npm install -g @angular/cli If everything goes ok, then we can run all angular commands using ng word. For example, to check angular-cli version, ng --version      _                      _                 ____ _     ___     / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|    / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |   / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |  /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|                 |___/ Angular CLI: 12.1.3 Node: 14.17.2 Package Manager: npm 6.14.13 OS: linux x64 Angular:  ...  Package                      Version ------------------------------------------------------ @angular-devkit/architect    0.1201.3 (cli-only) @angular-devkit/core         12.1.3 (cli-only) @angular-devkit/schematics   12.1.3 (cli-only) @schematics/angular          12.1.3 (cli-only) Create Angular project Now you have installed everything that you need to run Angular application. So create new Angular project with ng command. ng new awesome-app This will first ask to add routing module in app. Give y and hit Enter key. ?Would you like to add Angular routing? (y/N)  Again it will ask which to choose between CSS or other styling format. Just press Enter for CSS. ? Which stylesheet format would you like to use? (Use arrow keys) ❯ CSS    SCSS   [                ]    Sass   [ ]    Less   [  This will create awesome-app application folder. To run the Angular project run the below commands one by one.  cd awesome-app ng serve --open This command will build the Angular application. --open flag will automatically open project URL http://localhost:4200 in default browser. Conclusion So far in this article, we have learned how you can install and create new Angular application from the scratch. In the upcoming articles, we will drive deep in Angular articles.