Following is a list of the topics covered in this blog tutorial:
Watch this Full Stack Web Development Course video to learn more about its concepts:
What is Angular 6?
Angular 6 is a framework based on JavaScript and is used for building web applications in JavaScript, TypeScript and html. The entire framework of Angular consists of built-in features for carrying out operations like animation, http service etc. Angular 6 also consists of features like auto-complete, navigation, toolbar, menus etc. that make it a favorite tool for the majority of web developers, especially Front-end developers.
Angular 6 Tutorial
In this Angular Tutorial, we will learn about basics of Angular 6 and the entire Angular environment to get started with Angular 6.
How to get started with Angular?
To successfully work with Angular, it is important to understand its basics, prerequisites for learning it and the working of Angular framework. First, let us start with the various prerequisites to start working with Angular 6.
It is essential to understand the following languages to be able to effectively work with Angular 6:
- HTML
- TypeScript
- JavaScript
JavaScript is very important as the entire Angular 6 framework is built on JavaScript.
Let us now move further into creating sample project in Angular 6
How to create a sample project ?
Now, the first thing you need to do is generate the project using StackBlitz. Once you are done generating the ready-made project, you need to save it for proceeding further. To save your project:
- Log into StackBlitz account
- Select the project you generated above
- Finally save it .
Once we are done creating the project and saving it, let us create the product lists.
How to create a product list in Angular 6 ?
To create a product list in Angular 6 :
- In the product-list folder, open the template file named ‘product-list.component.html.’
- Add an *ngFor structural directive on a <div>
- Inside the ‘<div>’, add an ‘<h3>’ and ‘{{ product.name }}’. The ‘{{ product.name }}’ statement is an example of Angular’s interpolation syntax. Interpolation ‘{{ }}’ lets you render the property value as text.
- Add the ‘<a>’ element around {{ product.name }} to make each product name a link to product details.
- Use the property binding [ ] syntax to make the title as the product’s name.
- Now add the product descriptions. On a <p> element, use an ‘*ngIf directive’. This will allow Angular to only create the ‘<p>’ element if the current product has a description.
- Now, in order to let users share a product, add a ‘Button’. Bind the button’s click event to the share() method in product-list.component.ts.
Now let us move on to learning about the Angular 6 project structure.
Get 100% Hike!
Master Most in Demand Skills Now !
Angular 6 Project Structure
Consider the below image for better understanding the project structure of Angular 6.
The structure of Angular 6 project is built up of the following files, folders and components:
- node_modules
- angular-cli-json
- js
- Josn
- json
- json
- conf.js
- gitignore
- editorconfig
- src folder
- app/app.component.{ts,html,css,spec.ts}
- app/app.module.ts
- html
- ts
- css
- {app|spec}.json
- ts
Angular 6 Module File
In Angular 6, Module means a location or area where you can perform the grouping of various components, pipes, directives etc. related to the web application. For example- consider a website development still in progress. The headers, footers, etc. can be considered parts of a Angular 6 module file. One of the popular modules in Angular 6 is the NgModule.
Components of Angular 6
The components in Angular 6 refer to the various classes which tend to interact with .html files. These components are in the form of app and comprise of the following files:
- app.component.css
- app.component.html
- app.component.spec.ts
- app.component.ts
- app.module.ts
Angular 6 Routing
Routing refers to the process of navigation between various pages. Whenever a user clicks on a link when he is already on a web page, it redirects him to a new page. This process is carried out with the help of Routing. The pages are in the form of components.
The process goes like whenever a user clicks on a new component, the page does not get refreshed. Also, the page does not get reloaded and the content of the page is displayed as it is.
Want to become an Angular expert? Join this Angular JS Course in Bangalore now!
Angular 6 Services
In some cases, it might be required that a particular code is to be used across various pages. Similarly there can be other requirements wherein the same object or connection needs to be shared across all other components in the entire application framework. The Services in Angular 6 help to achieve all of this.
Let us now understand how to create a service in Angular 6.
In Angular 6, command line is used to create a service and the following command is used for doing the same:
C:projectA6Angular6App>ng g service myservice
CREATE src/app/myservice.service.spec.ts (392 bytes)
CREATE src/app/myservice.service.ts (138 bytes)
Angular 6 Data Binding
Data Binding simply refers to the communication that takes place between the TypeScript code and the template visible to the user. In the process of Data Binding, only curly parenthesis ‘ {{}} ‘ is used. This act of using ‘{{}}’ is termed as interpolation. Also, one thing that needs to be noted is that in Angular 6, Data Binding can be done in either one-way or two-way. In Angular 6, there are 4 ways in which Data Binding can be done:
- String Interpolation
- Property Binding
- Event Binding
- Two-way binding
String Interpolation
In String Interpolation, the Data Binding happens one-way where template expressions are used in double curly parenthesis. String Interpolation is used to get the output from TypeScript code in HTML view (template).
Let us consider an example:
The app.component.ts view :
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Data binding using String Interpolation';
}
Now, let us have a look at the HTML view, i.e. app.component.html :
<h2>
{{ title }}
</h2>
Property Binding
Again, even Property Binding is a one-way Data Binding in Angular 6, where a property of a DOM component is bound to a field. .
For Example- The syntax for property binding in order to display the values between H3 headings will be:
<h3 [textContent]="title"></h3>
Two-Way Binding
In Two-Way Data Binding, the data in the components can be updated to view and the data in the view can be updated to the component. The syntax for a two-way binding is:
[(ngModel)] = ”[property of your component]”
As you see above in the syntax, it is important to enable the ‘ngModel’ directive in order to implement the two-way binding process.
Event Binding
This type of Data Binding is a one-way binding which is used for managing the events arising from the DOM. Some of the instances of these events can be clicking on a button, a mouse movement etc. Say for example, a click event of the HTML button needs to be handled, the click event of the HTML button needs to be bound with a method of the component.
Templates of Angular 6
In general terms, templates define the component’s view. There is a companion template for each given component. Hence, templates in Angular 6 are nothing but a form of HTML that directs Angular 6 on how to render a component. The working of components is dependent on the hierarchy of the views. The hierarchy of these views are such that they allow you to modify, show or hide the UI sections. Angular 6 uses the ‘<ng-template> .
Directives in Angular 6
In Angular 6, Directives is a js class and it is declared as @directive. There are 3 directives offered by Angular 6 :
They consist of the details regarding the way in which a component should be processed and instantiated at runtime. Component Directives are the most common and are the main class of directives in Angular 6.
These directives typically involve dealing with manipulating elements present in DOM. Structural Directives usually contain the sign ‘*’ which is put before the directive.
If the look and behavior of the DOM elements need to be changed, Attribute directives are used.
Creating an Angular 6 Bootstrap
When Angular was first released, it became an instantaneous success among developers. It was initially designed by a Google employee for the purpose of making it easier to build web applications for their internal projects. This was the birth of AngularJS.
AngularJS is an open-source, JavaScript-based, front-end web development framework that aids in developing single-page applications. After the release, AngularJS was incorporated by some of the biggest brands for their web app development.
However, we know that technologies are ever-evolving. There are new improvements made in every aspect of these technologies continuously. Angular is not different.
Note: Starting from Angular 2, all later versions were written in TypeScript which is basically a superset of JavaScript.
Angular 6, yet another improved version of Angular, was released by the Angular team on May 5, 2018. In this tutorial, we will be discussing the highlights of Angular 6, its key features and, much more about Angular. We assume here that you have a basic knowledge about the previous versions of Angular.
We will start the tutorial with the evolution of Angular, then we will look at the Application Shell, and then we will learn how we can perform Angular installation and setup.
Evolution of Angular
Angular JS was the first one of its kind, written in JavaScript and released in 2010 by Google. Later on, a few versions of Angular JS were released such as 1.1, 1.2, and so on.
Then came the ‘great rewrite’ phase. When new standards and advancement were introduced in JavaScript, the whole scenario of web development started changing. The Angular team had to come up with new versions so as not to get left behind. They had to build the framework from scratch to solve difficult problems they were facing while building large and cross-platform applications. So, they rewrote the whole framework using TypeScript and thus came Angular 2.
The Angular team did not stop there. They kept on improving the framework by introducing new features and fixing various bugs, and a few years later came Angular 4.
Note: There is no Angular 3, not because they forgot to name the next version, Angular 3 but because they skipped it. Why? Let’s see. The Angular codebase had various libraries with their own versions such as core, animations, router, etc. Now while all the other libraries were at their 2.3 version, the router alone was at Version 3. The next version had to be 2.4, but for the router going back to Version 2.4 from 3 was not correct. Therefore, to avoid confusion, Google decided to skip Version 3 altogether, and the next version was named Angular 4. ‘Angular’ gradually became a blanket term for Angular 2 and all the other versions released after Angular 2.
Then came the next version, Angular 5. The main purpose of Angular 5 was to make Angular faster. Google managed to improve the loading time and the execution time with Angular 5.
Angular 6, which was released in March 2018, was the next version. In Angular 6, Google focused on a toolchain, for example, Angular CLI, Ng Angular Elements, etc.
Now, moving further in this tutorial, let’s learn more about Angular 6 starting with its installation.
Preparing for a Job interview? Check out our Top Angular Interview Questions!
The Application Shell
In this section of the Angular 6 tutorial, we will install Angular 6 step by step and then will create a demo application.
Installation and Setup
To install and set up, first we need to download and install Node.js. Refer below steps to know how.
Downloading and Installing Node.js
Step 1: We are going to start the whole process by downloading the Node.js environment. Click here to download.
Step 2: After downloading the installer, we can start the installation by making sure that we include the ‘npm package manager’ as shown in the following screenshot:
Step 3: Type in the following command in the terminal to make sure if Node.js is correctly installed:
node -v
npm -v
After running the above, we will see the versions of Node and NPM like in the following screenshot:
Installing Angular CLI
Before starting with the installation of Angular CLI, let’s first get fully acquainted with it.
Angular CLI is a command-line interface that is used to Scaffold and build angular applications using Node.js style modules. It helps in creating Angular applications, from scratch as well as adding new elements to an existing Angular application. After installing Angular CLI, we will be able to use all of the ng commands. These commands can save us a lot of time since it practically helps in creating and running projects in a matter of minutes. Some of these commands are listed below:
To create a project named ‘ProjectName’, we can use this command:
ng new ProjectName
The below command is used when we want to open our project in a web browser:
ng serve --o
OR
ng serve --open
When we use the serve command without specifying the port like in the previous command, the project runs on Port 4200 by default. The below command is used when we want to run the project on a specified port (In this case, Port 4201):
ng serve --port 4201
To compile our Angular project into an output directory, we make use of this command:
ng build
To retrieve or send Angular configuration values from/to the angular.json file, we use the following command:
ng config
We use the below command to run the project with an optional custom builder:
ng run ProjectName
This helps in adding elements to our applications:
ng generate
OR
ng g
The below command runs unit tests in our project:
ng test
We can also display a list of all the available commands in Angular CLI along with their short descriptions using the ng help command.
Getting back to the installation part, after the installation of Node JS, let’s now install angular CLI.
Step 1: First, we will type in the following command to install or upgrade the latest Angular 6 CLI:
npm install -g @angular/cli
Step 2: After the installation, we need to type in the following command to make sure if Angular CLI is successfully installed or not:
ng v
After running the above command, we will see an output screen like the following:
Watch this video on ‘What is Angular 8?’ video:
Conclusion
Angular 6 is a newer version of Angular and is slightly complex as it has more features. This tutorial covers almost everything about Angular 6. Starting from downloading Node.js to installing and creating Angular 6 Bootstrap and installing Angular CLI, all the major topics related to Angular 6 have been covered in this tutorial. We hope this blog tutorial will help you in understanding more about Angular 6 and what is new about it. However, we also want to recommend our readers and learners to enroll in a course to have a more solid knowledge of Angular 6.
Having doubts? Drop it on our Web Technology Community!