TypeScript Part 3

Before going into OOPS, we need to know about the Object based programming system

Object Based Programming System

Features: Supports code reusability and code separation

Support Dynamic Memory Allocation

Can be Integrated with other programming system

Issues:

It will not support Inheritance

It will not support dynamic polymorphism

Code Extensibiity Issues

Ex: Javascript , VB Script

Object Oriented Programming 

Features

Code Reusability

Code Separation

Dynamic Memory Allocation

Code Extensibility

Issues

Uses more memory

Slow than other programming system

Complex in configuration

OOPS IN TypeScript

Object oriented programming is provided with 4 Synopsis

1 Data Encapsulation

 Combing/Binding related fields and methods as one unit is Called as "Data Encapsulation"

Practical:

Class is an implementation of data Encapsulation.

2 Data Abstraction

Hiding secured Data and functionality from user with the help of access specifiers is Called "Data Abstraction"

Practical:

Object is an implementation of data Abstraction.

TypeScript part 2

Variables in TypeScript

Variables are named storage locations in memory where you can store a value and use it as part of any expression.

TypeScript is in strict Mode of JavaScript and hence declaring variables in mandatory.

Variables in typescript can be declared by using the following reasons.

a) Var

b) let  

c) const

var is used to define function scope variables so that it is accessible from any location within the function.

let is used to define block scope variable and hence it cannot be accessed outside the block.

const is used to define block scope variables which must be initialized with a value and cannot be shadowed.

shadowing is the process of using the same name identifier with different value within the scope.

Syntax

Type Script Part 1

Likes/DisLikes Example with Angular

Step 1:

Download and Install Latest Node.js

URL : https://nodejs.org/en/download/

Step 2:

Install Visual Studio Code  (URL:  https://code.visualstudio.com/download)

Step 3:

Install Angular CLI Using the command 

npm install -g @angular/cli

Create a new Angular Application

Create a New Folder in your System (D:\\AngularApp)

Open folder using Visual Studio Code

Open Terminal Using the Ctrl + ` Type the below Command

ng new cars-demo

Below is the folder Structure you will be seeing.

ng g c carsdemo --spec=false

Now you can see the below files gets created in the folder  src\app as shown below

cars-demo.component.ts

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

@Component({

  selector: 'app-cars-demo',

  templateUrl: './cars-demo.component.html',

  styleUrls: ['./cars-demo.component.css']

})

export class CarsDemoComponent implements OnInit {

  constructor() { }

  public cars = [

    {carName: 'Audit', Photo: 'assets/Audit.Jpg', Likes: 0, DisLike: 0},

    {carName: 'Benz', Photo: 'assets/Benz.Jpg', Likes: 0, DisLike: 0}

    ];

  ngOnInit() {

  }

  public LikesCounter(car)

  {

    car.Likes++;

  }

  public DisLikesCounter(car)

  {

    car.DisLike++;

  }

}

cars-demo.component.html

<div align="center" *ngFor="let carobj of cars">

  <h3> {{ carobj.carName }} </h3>

  <img [src]="carobj.Photo" border="1" width="200" height="200" >

  <br/>

  {{carobj.Likes}} |  {{ carobj.DisLike}}

  <br/>

<a href="#" >

  <img src="assets/Like.Jpg" width="30" height="30" (click)="LikesCounter(carobj)" >

</a>

<span>  | </span>

<a href="#" >

  <img src="assets/DisLike.Jpg" width="30" height="30" (click)="DisLikesCounter(carobj)" >

</a>

</div>

Note: Add Images in the Asset Folder for displaying of Image as shown below

Now Go to app.module.ts(To make cars binding Component Run we need to make the following Changes)

Now Go to Index Page in the folder and make the below changes.

Output:

Go to Terminal And Type the Command 

ng s

Data Binding Technique using Interpolation in Angular

Interpolation: It is a data binding technique used by angular to bind the model data into any View. It uses angular Data Binding Expression  " { }"

Step 1:

Download and Install Latest Node.js

URL : https://nodejs.org/en/download/

Step 2:

Install Visual Studio Code  (URL:  https://code.visualstudio.com/download)

Step 3:

Install Angular CLI Using the command 

npm install -g @angular/cli

Create a new Angular Application

Create a New Folder in your System (D:\\AngularApp)

Open folder using Visual Studio Code

Open Terminal Using the Ctrl + ` Type the below Command

ng new databinding

Below is the folder Structure you will be seeing.

Go to that Path and run the below command to create a component using Visual Studio Code

Now you can see the below files gets created in the folder  src\app as shown below

data-binding.component.ts

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

@Component({
  selector: 'app-data-binding',
  templateUrl: './data-binding.component.html',
  styleUrls: ['./data-binding.component.css']
})

export class DataBindingComponent  {
  
  public title = 'Product Details';
  public product =
  {
    Name: 'Samsung TV',
    Price: 4500.64,
    Qty: 2,
    Mfd: new Date('2019/02/20'),
    Preview: 'assets/Samsung.JPG'
  };
  public GetTotal() {
    return this.product.Qty * this.product.Price;
}

}

data-binding.component.html 

<H1> Data Binding </H1>
 <h3> {{ title }} </h3>
<dl>
  <dt> Name </dt>
  <dd> {{ product.Name }} </dd>
  <dt> Price </dt>
  <dd> {{ product.Price}}</dd>
  <dt>  Quantity </dt>
  <dd> {{ product.Qty}}</dd>
  <dt> Manufactured Date </dt>
  <dd> {{ product.Mfd.toLocaleDateString() }} </dd>
  <dt> Preview</dt>
  <dd>
    <img src="{{product.Preview}}" width="100" height="100">
  </dd>
  <dt> Total Amount</dt>
  <dd> {{GetTotal() }}</dd>

  </dl>

Note: Add any Image in the Asset Folder for displaying of Image.

Now Go to app.module.ts(To make Data binding Component Run we need to make the following Changes)

Now Go to Index Page in the folder

Output:

Go to Terminal And Type the Command 
ng s

Output: