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
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/
Edit app.component.ts
Your application is running and rented “Hello World” in browser. Same way you can initialize variables and pass data from component to UI.
Create Array and String in
Here we have declared title as string and cars as array. Internally typescript will understand data types
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Display data of Cars';
cars = [ 'city' , 'nexon', 'scorpio' ];
}
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 “c” variable,
We can now simply prin
<div>
<h1> {{ title }} </h1>
<ul *ngFor = "let c of cars ">
<h1> Car Name:{{c}} </h1>
<li *ngIf = " c == 'nexon' ">
<h2 style="color: brown;">
This is new car: {{c}}
</h2>
</li>
</ul>
</div>
Once you save your changes just run below command
ng serve --openOutput:
Below output will get printed on HTML page..For loop will rotate array and if will add conditions to it.
GIT REPO:
https://github.com/letsblogcontent/AngularJS/tree/master/DisplayData
letsblogcontent.wordpress.com 