Create Class and manage data with Angular JS

In this tutorial we will create simple hello world example and pass data between typescript and html.We will also see *ngFor and *ngIf

Prerequisites

Angularj JS new version is using nodejs for setting up application and for running applicaion you will also need any code editor tool.

For current setup we are using visual code studio

Kindly down load latest version of nodejs and visual code studio on your machine and complete setup

Node Installation

1 Go to this site and download latest version of node js

https://nodejs.org/en/

2) Once installed open command prompt and type “node”

you will be able to see version on node js that means nodejs installed

Install Visual Studio

1 Go to this site and download latest version of

https://code.visualstudio.com/

2. Once installed on windows go to search menu and type visual you will be able to see its installed like below screenshot

3.Open Application and you will be able to see below screen

4) Select folder from file menu for your project

5) Open Terminal from Terminal option

Install Angular cli

Run below command

npm install -g @angular/cli

once its installed type below command in terminal to verify installation

Create a workspace and initial application

Run below command

ng new my-app

it will ask for angular routing =>select yes

then select css as style sheer language like below screenshot

Press Enter and it will generate your project

in below diagram 1) Creating html and components from schematics 2) DOwnloading required packages you can see under node_modules folder

Run the application

Run below command

traverse to application folder

cd my-app

run below command to start and open application

ng serve –open

this command will compile app and launch it with webpack on http://localhost:4200/

Congrats your first application is running and working fine

Creating Hello World

In angular data binding is happening between html and component classes .

Here we will declare one variable in component file and same will be visible on UI .

Delete everything from app.component.html.

2. Declare variable in app.component.ts

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-app';
  message = 'Hello World';
}

3. Now add binding between UI and component with scriplet tag

app.component.html

<div>
<h1>{{message}}</h1>
</div>

4. Run below command to compile app

ng serve

5. Open browser and enter http://localhost:4200/

Add Class

Now will see how we can use type script class and print data

Create class using below command

ng generate class car

this will create car class and its test class as well like below screen shot in your project

Add below snippet in car.ts. here we have declared two variables in it

name =>datatype is string
average=>datatype is number

we have also added constructor which will help to initialize these two variable while creating instance of this class

export class Car {
    name : string;
    average : number;
    constructor( name , average)
    {
        this.name = name;
        this.average = average;
    }
}

Edit app.component.ts

In this class will create instance of car and create array of new cars.

import { Component } from '@angular/core';
import { Car } from './car';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Display Cars';
  cars = ['city', 'nexon' , 'vento'];
  newcars =[
new Car('city', 10),
new Car('polo', 5),
new Car('vento', 6),
  ];
}

Edit app.component.html

Map variables in html using below code

with {{ }} we have mapped “title” in below html ..

For showing array we have to iterate through it so we have used “let”,which will help to get value one by one from array and store in “n” and “c”variable,

In below code first we are printing all cars and then filtering them using below condition

*ngIf =”n.average < 7″

<div>
  <h1>{{title}}</h1>
  <ul *ngFor =" let c of cars">
<li> {{c}}</li>
  </ul>
  <h1>Display data with Class</h1>
  <ul *ngFor =" let n of newcars">
    <li style="color:red" *ngIf ="n.average < 7 "> {{n.name}}</li>
    
      </ul>
  
</div>

Once you save your changes just run below command

ng serve --open

Output:

Below output will get printed on HTML page..For loop will rotate array and if will add conditions to it. In second loop all cars having less than 7 average will get printed