Angular 6 tutorials - Learn basics of Angular

Angular is one of the most popular open-source front-end web application framework. This framework is written in TypeScript(Superset of JavaScript) and currently maintained by Google. The latest version is Angular 6.
In this tutorial I will show you how to create a basic Angular-6 app from the scratch. So we will cover below items:

1. How to install Angular 6 using the Angular CLI
2. How to create Angular 6 application
3. How to create Angular 6 components
4. How to create Angular 6 services

So before we stat make sure you have installed Node.Js in your system. Incase you do not have Node.js installed then please visit my below post and install Node.js.
How to create a basic RESTful API using Node.js and Express Framework

How to install Angular 6 using the Angular CLI
Now open a terminal and run the below NPM command to install Angular CLI globally.
npm install -g @angular/cli

Now if you want to verify whether Angular CLI has been properly installed or not then run the below command in the terminal and it will display the installed Angular CLI version.
ng -v

Now move on to the next section i.e.:

How to create Angular 6 application
To create a new Angular application run the below command in the terminal. ng new my-app

Now navigate to my-app project and run the below command to view the application in browser. cd my-app ng serve -o

How to create Angular 6 components
An Angular component is the basic building block of Angular application. Angular component is made up by below things:

1. A HTML template file which is used to create the view/user interface of the application.
2. A SCSS or CSS file that is used to style the view of the Angular component.
3. A typescript class which contains properties and methods. This class is used to control the logic of the view.
4. A typescript test class that is used to test the logic of the Angular component class.

The main component of an Angular application is app.component.ts and it looks like below: import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app'; }

The @componet decorator is responsible to convert a normal typescript class to a Angular component class. This selector property of component decorator is a HTML tag that is used to represent the view of Angular component. The templateUrl and styleUrls property contains the HTML and CSS file of the component.
Now let us create a new Angular component inside the application. So to create a new component run the below command in the terminal. ng generate component demo CREATE src/app/sidebar/demo.component.html (26 bytes) CREATE src/app/sidebar/demo.component.spec.ts (635 bytes) CREATE src/app/sidebar/demo.component.ts (274 bytes) CREATE src/app/sidebar/demo.component.css (0 bytes) UPDATE src/app/app.module.ts (479 bytes)

After running this command it will create a new folder called demo inside my-app/src/app directory and create four new files called demo.component.html, demo.component.spec.ts, demo.component.ts, demo.component.css. Also it will update the app.module.ts file with the newly created component details. The app.module.ts file looks like below:
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { DemoComponent } from './demo/demo.component'; @NgModule({ declarations: [ AppComponent, DemoComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

How to create Angular 6 services
To generate a basic service class use the Angular CLI and run the below command in the terminal.
ng generate service demo

After running this command it will create a new file called demo.service.ts inside my-app/src/app folder. The demo.service.ts file will look like below: import { Injectable } from '@angular/core'; @Injectable() export class DemoService { constructor() { } }

Now to use this service class we need to register this with Angular AppModule. Open the app.module.ts file and import the DemoService class and include that in the providers array like below:
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { DemoComponent } from './demo/demo.component'; import { DemoService } from './demo.service'; @NgModule({ declarations: [ AppComponent, DemoComponent ], imports: [ BrowserModule ], providers: [ DemoService ], bootstrap: [AppComponent] }) export class AppModule { }

Now to use this service inside a component class we need to inject the dependency of the service class inside the component class. So to do that import the service class inside the component class and declare the dependency inside the constructor like below:
import { Component, OnInit } from '@angular/core'; import { DemoService } from './demo.service'; @Component({ selector: 'app-demo', templateUrl: './demo.component.html', styleUrls: ['./demo.component.css'] }) export class DemoComponent implements OnInit { constructor(private _demoService: DemoService) { } }