Part 4- How to use various Data types in Angular 5 Application - TypeScript Data Types

In this tutorial, You will learn about how to use data types in Angular 5 application. Here we will talk about the  useful data types available in TypeScript. If you are new to Angular then please also visit below Links Part1: Create your first Angular 5 application and Part2 :  How does Angular 5 works?

Useful Data Types( TypeScript)

1. String
2. Number 
3. Array
4. Any
5. Boolean
6. Tuple
7. object
8. Null
9. void

Component.ts Code

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

import { Employee } from './Employee';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.scss']

})

export class AppComponent {

name: string;

age: number;

numArray: number[];

strArray: Array<string>;

dynamicValue: any;

IsTrue: boolean;

tupleVal: [string, number, boolean];

student: object;

employee: Employee;

constructor() {

this.name="Ashish";

this.age = 52;

this.numArray = [10, 11, 20];

this.strArray = ["Ashish", "Kumar", "Tiwary"];

this.dynamicValue = 10000;

this.IsTrue = false;

this.tupleVal = ["Ashish", 45, true];

this.student = { name: "Ashish", age: "45", email: "a@b.com" }

this.employee = new Employee();

this.employee.Name = "Rose";

this.employee.Salary = 52000;

this.employee.Department = "Development";

this.employee.IsActive = true;

}

Test(mynum: number,str:string): number {

return 

}

}

Component.Html Code

<div style="margin:3% 10% 10% 10%;border:2px solid gainsboro;padding:2% 2% 2% 2%; ">

<ul>

<li>Name: {{name}}</li>

<li>Age:{{age}}</li>

<li>Number Array: {{numArray}}</li>

<li>String Array: {{strArray}}</li>

<li>Dynamic value: {{dynamicValue}}</li>

<li>Is true: {{IsTrue}}</li>

<li>Tuple:{{tupleVal}}</li>

<li>Student Object:{{student|json}}</li>

<li>Employee Class: {{employee|json}}</li>

</ul>

<ul>

<li *ngFor="let arr of strArray">

{{arr}}

</li>

</ul>

<router-outlet></router-outlet>

</div>

Employee.ts Class

export class Employee {

Name: string;

Salary: number;

Department: string;

IsActive: boolean;

}

Output

For more details please watch above video.

You are done! Please share, Like, Comment

Angular Code Factory

• Part 1- Create your first Angular 5 application 
• Part 2- How does Angular 5 works?
• Part 3- Module and Component in Angular 5
• Part 4- How to use Data Types in Angular 5 application