×

Angular 6 Tutorial - Learn Angular in 60 Minutes

Shailendra Chauhan  Print   12 min read  
18 Jun 2021
 
Beginner
645 Views

Angular 6 is a JavaScript framework for building apps and web application in HTML, JavaScript and TypeScript which is a superset of JavaScript. Angular provides built-in features for the http services, animation and materials which in turn provide features of auto-complete, toolbar, navigation, menus etc.

Angular 6 Tutorial

Angular 6 is a JavaScript framework for building apps and web application in HTML, JavaScript and TypeScript which is a superset of JavaScript. Angular provides built-in features for the HTTP services, animation and materials which in turn provide features of auto-complete, toolbar, navigation, menus etc. The Angular 6 Code is written in TypeSript but again compiles into JavaScript and displays the same thing in the browser.

Know About Angular:

Angular is basically a JavaScript Framework which can make you able to generate the reactive Single Page Applications (SPAs). This is one of the leading front-end development frameworks which is regularly updated by the team of Angular of Google.  Angular 6 is totally based on the components where so many components form a tree structure with child and parent component.

Prerequisite:

Before starting to learn and gain depth knowledge in Angular 6, you must have the basic knowledge of AngularJS, Visual Studio Code IdE, JavaScript and concepts of any server-side programming language.

How to Install Angular 6:

The easiest and quickest way to start Angular 6 app is through the Angular CLI(Command Line Interface). To install it, you required either the node package manager or the yarn package manager. To check, whether or not you have npm in your console or command the yarn package manager line, you need the yarn package manager to type:

>npm –v

If the above code goes unrecognized or not showing any version number, you have to install NodeJS. Once NoeJS has been installed, reload the command line or console that you will have access to NPM. Now, you can use the NPM to install the Angular CLI. To install it write:

>npm install –g @angular/cli

After installing if you run ng –v, it will show you the version number which may be 6.0.7. So, once the CLI is installed, the developer can use it to start install a new Angular 6 project.

>ng new ng6 – proj –style=scss –routing

On the above code what we can understand is mentioned below:

ng – In this way, we can call the Angular CLI.

new – It is one of the many commands that the developer can issue to the CLI.

ng6 –

  • proj : It is the name for which we are calling our project. The CLI can create the folder with this name, based on where you are running the command.

  • Optional Flags: There are two optional flags that I decided to add. First, we have to tell the CLI to generate the project that has SaSS enabled (by default, CSS is being used if it will not be specified) and then routing is added because we want a project which has different page URL’s and adding  this flag will help to create a routing file for us.

So, to check all the available commands, you can run ng at the command line. Once the CLI has generated the new project, you can jump into it:

>cd ng6-proj

Now, if you want to use Visual Studio Code, you can type the code to launch the code editor and to serve it to the browser, you can run:

>ng serve -o

The –o flag will let the CLI to launch the browser with the project. Now, the developer is able to watch the Angular 6 project as you code it, it will then automatically live reload.

Angular 6 Project Structure:

While you view the folder and file structure of the Angular 6 app, it woul look something which is almost similar to the below code:

>e2e
>node_modules
>src
 >app
  ….a bunch of files
…a bunch of files

You as a developer may be going to spend most of your time working within the /src/app folder. This is place where components and services are stored.

Now, in the /src/ folder itself, you can see an index.html (which is the entry point of the apps) and a style.css file which is where the global CSS rulesets has been placed.

The /src/assets folder is the place where the developer can place any assets like the graphics.

Another /dist/ folder can also be generated when you build the project.

Angular 6 Module File:

Before going to tackle anything, it is always important to look at the /src/app/app.module.ts file. The .ts extension here represents the TypeScript which is used by Angular 6. In fact TypeScript provides strong type checking on JavaSCript.

Angular Module mainly mentions the place where the developer can group the components, pipes, directives and services that are related to the application. Now, when you are developing the website, the header, footer, center, left and right section become the part of the module. So, to describe the module, we can use the NgModule. When you create a new project using the Angular – cli command, where the ngmodule has been created by default in the app.module.ts file. Now, the app.module file may look like the below:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component'

@NgModule({
  declarations: [
   AppComponent
 ], 
 imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

So, whenever you will use the CLI to create services and components, it will then automatically update the file to import and add them to the @NgModule decorator. In Angular 6, the Components are added to the declarations array and services are added as providers. The developers are also adding different imports to the imports array. Even, when you want to add animation, you can add them here as well.

Angular 6 Components:

Most of the important part of the development with Angular 6 is done in the components. Components are mainly classes that can be able to interact with the .html file of component which gets displayed on the browser. The file structure has the app component and it consists of the following app files:

  • component.html
  • component.css
  • component.ts
  • component.spec.ts
  • module.ts

Angular 6 Routing:

Now, if you want to work the routing, then you have to visit the /src/app/app-routing.module.ts file. With the code, it will look like this:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

After addition of that code, you have to import the components at the top and then you need to add them to the Routes. So, to import the component, the below mentioned code needs to be added:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { UsersComponent } from './users/users.component';
import { DetailsComponent } from './details/details.component';
import { PostsComponent } from './posts/posts.component';

const routes: Routes = [
 {
    path: '',
    component: UsersComponent
},
 {
   path: 'details/:id',
    component: DetailsComponent
  },
  {
   path: 'posts',
   component: PostsComponent
 },
];

Here, in the above code, three components have been defined and after that three objects in the Routes array.

In the above mentioned code, the first object identifies that the UserComponent will be the default component which loads on the root path. We can leave the path value blank for this. The next Route is specifying the User details section. Here, a Wild car named Id has been mentioned so that you can use this to fetch the value from the router to retrieve the correct user details. Another route for a component and path is termed as posts. After saving the file, the browser will show: “User Works”.

Angular 6 Services

If you are fetching a list of users from the public API, then the User Components will work. For this, you need to use the Angular CLI to generate a Service for all. Angular 6 Service is very important and useful to place the code which is reusable throughout different components of the app. So, in the console, write:

>ng generate  service data 

After opening the new service file - /src/app/data.service.ts, write:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {

 constructor() { }
}

It will almost look similar to the regular component. You can define the imports at the top and your methods and properties in the class that is exported.

Angular Data Binding

Data binding is not only available in Angular6 but it has been started from Angular JS, Angular 2 and 4 also. The developers are using curly braces for the data binding {{}} and this process is termed as interpolation. The variable in the app.component.html file is mainly termed as {{title}} and the value of the title is initialized in the app.component.ts file and it has been displayed in the app.component.html. Now, if you want to create a dropdown of months in the browser, you have to create the array of months in the app.component.ts as follows:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 6 Project!';
   // declared array of months.
   months = ["January", "February", "March", "April", "May", 
            "June", "July", "August", "September",
            "October", "November", "December"];
}

Now, if you want the array of the months which has been shown in the above code is to be displayed on the dropdown section of the browser, the following line of code need to write:

<div style="text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>
<div> Months :
   <select>
      <option *ngFor = "let I of months">{{i}}</option>
   </select>
</div>

Here, in the above code, a normal select tag has been used with option. Again the option, a forloop is used to iterate over the months’ array which in turn will create the option tag with the value in the months. The syntax ‘for’ is used in Angular as *ngFor = “let I of months” and to know the value of the months, we have to display it in {{i}}.

The above mentioned two curly brackets help in data binding. You can declare the variables in the app.component.ts file and the same can be easily replaced by using the curly brackets.

Event Binding

When any user interacts with an application in the form of a keyboard movement, a mouse click or a mouseover, it will then generate an event. Such events are required to handle the performance of some types of actions. At that moment, event binding of Angular 6 comes.

Angular 6 Templates

Angular 6 uses the <ng-template> as the tag is almost same to Angular 4 tag instead of <template> that is used in Angular 2. The template has been changed in Angular 4 from <template> to <ng-template> because there is a name <template> in the HTML tag which can be conflict with the Angular template name.

Angular directives

Directive in Angular 6 is a JS Class that is called as @directive. We have mainly 3 directives in Angular6 as mentioned below:

  • Component Directives
  • Structural Directives
  • Attribute Directives

What are the new features in Angular 6?

Updated Component development Kit (CdK): It supports to create the custom UI elements without the requirement of an angular material library. It also supports responsive web design layouts and overlay packages and overlay packages to create pop-ups.

Updated Angular Command Line Interface (CLI): In Angular 6, new commands have been added like the ng-update which was migrated from its previous version to current version. Ng-add are quickly adding the application features to make any application progressive web apps.

Usage of RxJs, a reactive JS library

Updated Angular Material: So many new Tree components have been added along with mat-tree, ck-tree, a styled version, an unstyled version to represent the hierarchical structure like Tree.

Angular Element: Angular 6 allow the Angular components to be published as Web Components which can then also be used in any HTML Page. Even, native custom elements can also be created by using Angular Element package.

Tree Shaking on Services: Tree Shaking in Angular 6 can be applied on services to remove any dead code.

Multiple Validators: It will allow the validators to be applicable to the form builder.

 

Share Article

Take our free skill tests to evaluate your skill!

In less than 5 minutes, with our skill test, you can identify your knowledge gaps and strengths.

Learn to Crack Your Technical Interview

Angular 6 Tutorial
Training Schedules
+91 9999123502
Accept cookies & close this