Expert Angular: Build deep understanding of Angular to set you apart from the developer crowd

Angular framework has various libraries that are grouped as modules in order to build an application. Angular applications are modular in nature and are constructed by assembling various modules. Modules may have components, services, functions, and/or values. Some modules may have a collection of other modules and are known as library modules.

Angular packages, such as core, common, http, and router that are prefixed with @angular comprise many modules. We import what our application needs from these library modules as follows:

import {Http, Response} from @angular/http'; 

Here, we import Http and Response from the library module, @angular/http. @angular/http refers to a folder in the Angular package. Any module defined to be exported can be imported into another module by referring to the filename of the module.

However, we can also refer to the folder as we referred to @angular/http. This can be achieved by adding an index.ts file to the folder and adding the code to export modules from the folder. This is a best practice suggested by Angular's style guide and is called the barrel technique:

export * from './http'; 

This is the export statement in the index.ts found in @angular/http. The statement means that it exports all the modules in HTTP and that they can be imported to our application wherever needed.

When we write an Angular application, we start by defining an AppComponent (not necessarily with the same name) and exporting it.

A component is a class that has properties and methods to be used in the view. These properties and methods exposed to view enable the view to interact with components. We code logic that supports the view in the component class:

For example, next is a component class book that has a properties title and author and a getPubName method that returns the name of the book:

export class BookComponent { 
  title: string; 
  author: string; 
  constructor() { 
      this.title = 'Learning Angular for .Net Developers'; 
      this.author = 'Rajesh Gunasundaram'; 
  } 
  getPubName() : string { 
    return 'Packt Publishing'; 
  } 
} 

The life cycle of a component is managed by Angular according to user interactions with the application. We can also add an event method that will be fired according to the state changes of the component. These event methods are known as life cycle hooks and are optional.

We will learn in detail about components in Chapter 5, Implementing Angular Routing and Navigation.

Templates can be thought of as a representation of a component that is visualized according to the UI/UX needs of an application. A component will have a template associated with it. The template is responsible for displaying and updating data according to user events:

Here is a simple template that displays the title and author of a book:

<h1>Book Details</h1> 
<p>Title of the Book: {{title}}</p> 
<p>Author Name : {{author}}</p> 

Here, the title and author values wrapped in curly braces will be supplied by the associated component instance.

We will discuss templates and their syntax in detail in Chapter 8, Template and Data Binding Syntax.

A class can be turned into a component by annotating it with @Component and passing the necessary metadata, such as selector, template, or templateUrl. Angular considers a class as a component only after attaching metadata to it:

Let's revisit the BookComponent class we defined earlier. Angular does not consider this class as a component unless we annotate it. TypeScript leverages the ES7 feature by providing a way to decorate a class with metadata as follows:

@Component({ 
  selector:    'book-detail', 
  templateUrl: 'app/book.component.html' 
}) 
export class BookComponent { ... } 

Here, we have decorated the BookComponent class with @Component and attached metadata selector and templateUrl. It means that, wherever Angular sees the special <book-detail/> tag in the view, it will create an instance of BookComponent and render the view assigned to templateUrl, which is book.component.html.

A decorator provided by TypeScript is a function that takes configuration parameters that are used by Angular to create an instance of the component and render the associated view. Configuration parameters may also have information about directives and providers, which will be made available by Angular when the component is created.

Data Binding is one of the core responsibilities of developers when writing code to bind data to the user interface and update changing data according to user interactions with the user interface. Angular has reduced the burden of writing large amounts of code to handle Data Binding:

Angular handles Data Binding by coordinating with templates and components. The templates provide instructions to Angular on how and what to bind. There are two types of binding in Angular: globally One-way Data Binding and Two-way Data Binding. One-way Data Binding deals with either binding data from the component to the DOM or from the DOM to the component. Two-way Data Binding deals with both sides of communication, that is, the component to the DOM and the DOM to the component.

<div>Title: {{book.title}}<br/> 
  Enter Author Name: <input [(ngModel)]="book.author"> 
</div> 

Here, book.title wrapped in double curly braces deals with One-way Data Binding. The value of book title, if available in the component instance, will be displayed in the view. book.author, assigned to the ngModel property of the input element, deals with Two-way Data Binding. If the component instance has a value in the author property, then it will be assigned to the input elements, and if the value is changed by the user in the input control, then the updated value will be available in the component instance.

We will learn in detail about Data Binding in Chapter 8, Template and Data Binding Syntax.

A directive is instructions or guidelines for rendering a template. A class decorated with @Directive to attached metadata is called a directive. There are three types of directive supported by Angular, namely Component Directive, Structural Directive, and Attribute Directive:

A component is one form of a directive with a template that is decorated with @Component: it is actually an extended @Directive with a template feature:

<book-detail></book-detail> 

Structural Directives manipulate the DOM elements and alter their structure by adding, removing, and replacing DOM elements. The following code snippet uses two Structural Directives:

<ul> 
<li *ngFor="let book of books"> 
    {{book.title}} 
</li> 
</ul> 

Here, the div element has a *ngFor directive that iterates through the books collection object and replaces the title of each book.

An Attribute Directive helps to update the behavior or the appearance of an element. Let's use the Attribute Directive to set the font size of a paragraph. The following code snippet shows an HTML statement implemented with an Attribute Directive:

<p [myFontsize]>Fontsize is sixteen</p> 

We need to implement a class annotated with @Directive along with the selector for the directive. This class should be implemented with the instructions on the behavior of the directive:

import { Directive, ElementRef, Input } from '@angular/core'; 
@Directive({ selector: '[myFontsize]' }) 
export class FontsizeDirective { 
    constructor(el: ElementRef) { 
       el.nativeElement.style.fontSize = 16; 
    } 
} 

Here, Angular will look for elements with the [myFontsize] directive and sets the font size to 16.

It is necessary to pass the myFontSize directive to the declarations metadata of @NgModule as follows:

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 
import { FontsizeDirective } from './fontsize.directive'; 
@NgModule({ 
  imports: [ BrowserModule ], 
  declarations: [ 
    AppComponent, 
    FontsizeDirective 
  ], 
  bootstrap: [ AppComponent ] 
}) 
export class AppModule { } 

We will discuss directives in detail in Chapter 6, Creating Directives and Implementing Change Detection.

Services are user-defined classes used to solve problems. Angular recommends only having template-specific codes in components. A component's responsibility is to enrich the UI/UX in the Angular application and delegate business logic to services. Components are consumers of services:

Application-specific or business logic such as persisting application data, logging errors, and file storage should be delegated to services, and components should consume the respective services to deal with the appropriate business or application-specific logic:

For example, we can have a service called BookService that deals with inserting new books, editing or deleting existing books, and fetching a list of all the books available.

We will see more about services in Chapter 11, Implementing Angular Pipes.

When an instance of a class is created, supplying the required dependencies of that class for it to function properly is called Dependency Injection. Angular provides a modern and improved version of Dependency Injection:

In Angular, the injector maintains the containers to hold the instances of the dependencies and serves them as and when required. If the instance of a dependency is not available in the container, then the injector creates an instance of the dependency and serves it:

As stated earlier, components have logic that is related to templates and mostly consume services to perform business logic. So, components depend on services. When we write code for components, we create a parameter constructor that takes the service as an argument. It means that creating an instance of the component depends on the service parameter in the constructor. Angular requests that the injector provide the instance of the service in the parameter of the constructor of the component. The injector will serve the instance of the requested service, if available; otherwise, it creates a new one and serves it:

export class BookComponent { 
  constructor(private service: BookService) { } 
} 

In this code snippet, the : symbol comes from TypeScript and is not Angular syntactical sugar. The private keyword is also from TypeScript and enables assigning the passed constructor to the class instance automatically. The type information is used to infer the type to be injected. The BookComponent has a dependency to BookService and is injected in the constructor. So when an instance of the BookComponent is created, Angular will also make sure the instance of BookService is readily available for the BookComponent instance to consume.

The injector has knowledge of the dependencies to be created from providers that are configured with the required dependency types when bootstrapping the application or when decorating the components, as follows:

@NgModule({ 
  imports: [BrowserModule], 
  declarations: [AppComponent,], 
  providers: [BookService], 
  bootstrap: [ AppComponent ] 
}) 
export class AppModule { } 

The preceding code snippet adds BookService as a provider to the bootstrap function. The injector will create an instance of BookService and keep it available in the container for the entire application to inject whenever it's requested:

@Component({ 
  providers:   [BookService] 
}) 
export class BookComponent { ... } 

The preceding code snippet adds BookService as a provider in the metadata of the component. The injector will create an instance of BookService when it encounters a request to create an instance of BookComponent.

We will discuss Dependency Injection and hierarchical Dependency Injection in detail in Chapter 12, Implementing Angular Services.

Let's explore some of the basic types in TypeScript and how to use them. Basic types include primitive types such as number, string, boolean, and array in TypeScript. JavaScript only validates types during runtime, but TypeScript validates variable types during compile time and greatly reduces the possibility of typecast issues during runtime.

let decimal: number = 6; 
let hex: number = 0xf00d; 
let binary: number = 0b1010; 
let octal: number = 0o744; 

let isSaved: Boolean; 
isSaved = true; 

var authorName: string = "Rajesh Gunasundaram"; 

var even:number[] = [2, 4, 6, 8, 10]; 

var even:Array<number> = [2, 4, 6, 8, 10]; 

enum Day {Mon, Tue, Wed, Thu, Fri, Sat, Sun}; 
var firstDay: Day = Day.Mon; 

var mixedList:any[] = [1, "I am string", false]; 
mixedList [2] = "no you are not"; 

function alertMessage(): void { 
    alert("This function does not return any value"); 
} 

A class is an extensible template that is used to create objects with member variables to hold the state of the object and member functions that deal with the behavior of the object.

JavaScript only supports function-based and prototype-based inheritance to build reusable components. ECMAScript 6 provides the syntactic sugar of using classes in supporting object-oriented programming. However, not all browsers understand ES6 and we need transpilers, such as TypeScript, that compile the code down to JavaScript and target ES5, which is compatible with all browsers and platforms:

class Customer { 
    name: string; 
    constructor(name: string) { 
        this.name = name; 
   } 
    logCustomer() { 
        console.log('customer name is ' + this.name; 
   } 
} 
  
var customer = new Customer("Rajesh Gunasundaram"); 

This Customer class has three members: a name property, a constructor, and a logCustomer method. The last statement outside the customer class creates an instance of the customer class using the new keyword.

An interface is an abstract type that defines the behavior of a class. An interface is a contract that abstracts the implementation. An interface provides a type definition for an object that can be exchanged between clients. This enables the client to only exchange an object that is complied with the interface type definition. Otherwise, we get a compile time error.

In TypeScript, interfaces define contracts for an object within your code and the code outside your project. Let's see how to use TypeScript with an example:

function addCustomer(customerObj: {name: string}) { 
  console.log(customerObj.name); 
} 
  
var customer = {id: 101, name: "Rajesh Gunasundaram"}; 
addCustomer(customer); 

The type checker verifies the addCustomer method call and examines its parameter. addCustomer expects an object with the name property of the string type. But the client that calls addCustomer is passed an object with two parameters, id and name, respectively.

However, the compiler does not check the id property as it is not available in the parameter type of the addCustomer method. It only matters for the compiler that the required properties are present.

Let's rewrite the method applying interface as a parameter type as follows:

interface Customer { 
  name: string; 
} 
  
function addCustomer(customerObj: Customer) { 
  console.log(customerObj.name); 
} 
var customer = {id: 101, name: "Rajesh Gunasundaram"}; 
addCustomer(customer); 

Here, we declared the Customer interface with the name parameter, and we modified the addCustomer signature to accept the parameter of the type Customer interface. The remaining statements are same as in the previous code snippet. The compiler only checks for the shape of the object as TypeScript implements the structural type system. It will not check whether the object we are passing implements the Customer interface. It only looks for the name property of the string type in the parameter and then allows it, if it's present.

interface Customer { 
  id: number; 
  name: string; 
  bonus?: number; 
} 
  
function addCustomer(customer: Customer) { 
  if (customer.bonus) { 
    console.log(customer.bonus); 
  } 
} 
  
addCustomer({id: 101, name: "Rajesh Gunasundaram"}); 

interface AddCustomerFunc { 
  (firstName: string, lastName: string): string; 
} 

var addCustomer: AddCustomerFunc; 
addCustomer = function(firstName: string, lastName: string) { 
  console.log('Full Name: ' + firstName + ' ' + lastName); 
  return firstName + ' ' + lastName; 
} 

addCustomer = function(fn: string, ln: string) { 
  console.log('Full Name: ' + fn + ' ' + ln); 
} 

interface CutomerNameArray { 
  [index: number]: string; 
} 
  
var customerNameList: CutomerNameArray; 
customerNameList = ["Rajesh", "Gunasundaram"]; 
 

interface CustomerInterface { 
    id: number; 
    firstName: string; 
    lastName: string; 
    addCustomer(firstName: string, lastName: string); 
    getCustomer(id: number): Customer; 
} 
  
class Customer implements CustomerInterface { 
    id: number; 
    firstName: string; 
    lastName: string; 
    constructor() { } 
    addCustomer(firstName: string, lastName: string) { 
        // code to add customer 
   } 
    getCustomer(id: number): Customer { 
        return this; 
    } 
} 

interface Manager { 
    hasPower: boolean; 
} 
  
interface Employee extends Manager { 
    name: string; 
} 
  
var employee = <Employee>{}; 
employee.name = "Rajesh Gunasundaram"; 
employee.hasPower = true; 

interface Customer { 
    (name: string); 
    name: string; 
    deleteCustomer(id: number): void; 
} 
  
var c: Customer; 
c('Rajesh Gunasundaram'); 
c.name = 'Rajesh Gunasundaram'; 
c.deleteCustomer(101); 

Inheritance is the concept of inheriting behaviors from another class or object. It helps to achieve code reusability and build a hierarchy in relationships of classes or objects. Also, inheritance helps you to cast similar classes.

JavaScript, by targeting ES5, doesn't support classes, and so class inheritance is impossible to implement. However, we can implement prototype inheritance instead of class inheritance. Let's explore inheritance in ES5 with examples.

First, create a function named Animal as follows:

var Animal = function() { 
  
    this.sleep = function() { 
       console.log('sleeping'); 
   } 
  
    this.eat = function() { 
       console.log('eating'); 
   } 
} 

Here, we created a function named Animal with two methods: sleep and eat. Now, let's extend this Animal function using the prototype as follows:

Animal.prototype.bark = function() { 
    console.log('barking'); 
} 

Now, we can create an instance of Animal and call the extended function, bark, as follows:

var a = new Animal(); 
a.bark(); 

We can use the Object.Create method to clone a prototype of the parent and create a child object. Then, we can extend the child object by adding methods. Let's create an object named Dog and inherit it from Animal:

var Dog = function() { 
    this.bark = new function() { 
       console.log('barking'); 
   } 
} 

Now, let's clone the prototype of Animal and inherit all the behavior in the Dog function. Then, we can call the Animal method using the Dog instance, as follows:

Dog.prototype = Object.create(animal.prototype); 
var d = new Dog(); 
d.sleep(); 
d.eat(); 

class SimpleCalculator { 
   z: number; 
    constructor() { } 
   addition(x: number, y: number) { 
        this.z = this.x + this.y; 
   } 
    subtraction(x: number, y: number) { 
        this.z = this.x - this.y; 
   } 
} 
  
class ComplexCalculator extends SimpleCalculator { 
    constructor() { super(); } 
   multiplication(x: number, y: number) { 
        this.z = x * y; 
   } 
    division(x: number, y: number) { 
        this.z = x / y; 
   } 
} 
var calculator = new ComplexCalculator(); 
calculator.addition(10, 20); 
calculator.Substraction(20, 10); 
calculator.multiplication(10, 20); 
calculator.division(20, 10); 

In TypeScript, all members in a class are public by default. We have to add the private keyword explicitly to control the visibility of the members, and this useful feature is not available in JavaScript:

class SimpleCalculator { 
    private x: number; 
    private y: number; 
    z: number; 
    constructor(x: number, y: number) { 
       this.x = x; 
       this.y = y; 
    } 
    addition() { 
        this.z = this.x + this.y; 
   } 
   subtraction() { 
        this.z = this.x - this.y; 
   } 
} 
  
class ComplexCalculator { 
    z: number; 
    constructor(private x: number, private y: number) { } 
    multiplication() { 
       this.z = this.x * this.y;  
   } 
    division() { 
        this.z = this.x / this.y; 
   } 
} 

Note that in the SimpleCalculator class, we defined x and y as private properties, which will not be visible outside the class. In ComplexCalculator, we defined x and y using parameter properties. These Parameter properties will enable us to create and initialize a member in one statement. Here, x and y are created and initialized in the constructor itself without writing any further statements inside it.

We can also implement getters and setters to the properties to control accessing them from the client. We can intercept a process before setting a value to a property variable or before getting a value of the property variable:

var updateCustomerNameAllowed = true; 
class Customer { 
    private _name: string; 
    get name: string { 
          return this._name; 
   } 
    set name(newName: string) { 
          if (updateCustomerNameAllowed == true) { 
               this._name = newName; 
          } 
          else { 
               alert("Error: Updating Customer name not allowed!"); 
          } 
   } 
} 

Here, the setter for the name property ensures that the customer name can be updated. Otherwise, it shows an alert message to the effect that it is not possible.

These properties are not instance-specific and are accessed by a class name instead of using the this keyword:

class Customer { 
     static bonusPercentage = 20; 
     constructor(public salary: number) {  } 
 
   calculateBonus() { 
          return this.salary * Customer.bonusPercentage/100; 
     } 
} 
var customer = new Customer(10000); 
var bonus = customer.calculateBonus(); 

Here, we declared a static variable called bonusPercentage that is accessed using the class name Customer in the calculateBonus method. This bonusPercentage property is not instance-specific.

JavaScript is a powerful and dynamic language. With dynamic programming in JavaScript, we need to structure and organize the code so that it will make its maintainability easier and also enable us to easily locate the code for a specific functionality. We can organize code by applying a modular pattern. Code can be separated into various modules, and relevant code can be put in each module.

TypeScript made it easier to implement modular programming using the module keyword. Modules enable you to control the scope of variables, code reusability, and encapsulation. TypeScript supports two types of module: internal and external modules.

namespace Inventory { 
      class Product { 
             constructor (public name: string, public quantity:  
                  number) {   } 
      } 
      // product is accessible 
      var p = new Product('mobile', 101); 
} 
 
// Product class is not accessible outside namespace 
var p = new Inventory.Product('mobile', 101); 

module Inventory { 
      export class Product { 
             constructor (public name: string, public quantity: number) {   } 
      } 
} 
 
// Product class is now accessible outside namespace 
var p = new Inventory.Product('mobile', 101); 

/// <reference path="Inventory.ts" /> 

Import { inv } from "./Inventory"; 
var p = new inv.Product('mobile', 101); 

JavaScript, which follows the ES5 specs, does not support classes and modules. However, we tried to scope variables and modularity using functional programming in JavaScript. Functions are the building blocks of an application in JavaScript.

Though TypeScript supports classes and modules, functions play a key role in defining a specific logic. We can define both named functions and anonymous functions in JavaScript as follows:

//Named function 
function multiply(a, b) { 
    return a * b; 
} 
 
//Anonymous function 
var result = function(a, b) { return a * b; }; 

In TypeScript, we define functions with the type of the parameters and the return type using function arrow notation, which is also supported in ES6, as follows:

var multiply:(a: number, b: number) => number = 
          function(a: number, b: number): number { return a * b; }; 

function CustomerName(firstName: string, lastName: string, middleName?: string) { 
    if (middleName) 
        return firstName + " " + middleName + " " + lastName; 
    else 
        return firstName + " " + lastName; 
} 
//ignored optional parameter middleName 
var customer1 = customerName("Rajesh", "Gunasundaram"); 
//error, supplied too many parameters 
var customer2 = customerName("Scott", "Tiger", "Lion", "King");  
//supplied values for all 
var customer3 = customerName("Scott", "Tiger", "Lion");  

function CustomerName(firstName: string, lastName: string, middleName: 
     string = 'No Middle Name') { 
    if (middleName) 
        return firstName + " " + middleName + " " + lastName; 
    else 
        return firstName + " " + lastName; 
} 

Using the rest parameter, you can pass an array of values to the function. This can be used in scenarios where you are not sure about how many values will be supplied to the function:

function clientName(firstClient: string, ...restOfClient: string[]) { 
   console.log(firstClient + " " + restOfClient.join(" ")); 
} 
clientName ("Scott", "Steve", "Bill", "Sergey", "Larry"); 

Here, note that the restOfClient rest parameter is prefixed with an ellipsis (...), and it can hold an array of strings. In the caller of the function, only the value of the first parameter that is supplied will be assigned to the firstClient parameter, and the remaining values will be assigned to restOfClient as array values.

Generics are very useful for developing reusable components that can work against any data type. So, the client that consumes this component will decide what type of data it should act upon. Let's create a simple function that returns whatever data is passed to it:

function returnNumberReceived(arg: number): number { 
    return arg; 
} 
unction returnStringReceived(arg: string): string { 
    return arg; 
} 

As you can see, we need individual methods to process each data type. We can implement them in a single function using the any data type, as follows:

function returnAnythingReceived (arg: any): any { 
    return arg; 
} 

This is similar to generics. However, we don't have control over the return type. If we pass a number and we can't predict whether the number will be returned or not by the function, the return type can be of any type.

Generics offers a special variable of type T. Applying this type to the function as follows enables the client to pass the data type they would like this function to process:

function returnWhatReceived<T>(arg: T): T { 
    return arg; 
} 

So, the client can call this function for various data types as follows:

var stringOutput = returnWhatReceived<string>("return this");  
// type of output will be 'string' 
var numberOutput = returnWhatReceived<number>(101);  
// type of output will be number 
 

interface GenericFunc<T> { 
    (arg: T): T; 
} 
function func<T>(arg: T): T { 
    return arg; 
} 
var myFunc: GenericFunc<number> = func; 

class GenericClass<T> { 
    add: (a: T, b: T) => T; 
}

var myGenericClass = new GenericClass<number>(); 
myGenericClass.add = function(a, b) { return a + b; }; 

Decorators enable us to extend a class or object by adding behaviors without modifying code. Decorators wrap the class with extra functionality. Decorators can be attached to a class, property, method, parameter, and accessor. In ECMAScript 2016, decorators are proposed to modify the behavior of a class. Decorators are prefixed with the @ symbol and a decorator name that resolves to a function called at runtime.

The following code snippet shows the authorize function, and it can be used as the @authorize decorator on any other class:

function authorize(target) { 
    // check the authorization of the use to access the "target" 
} 

declare type ClassDecorator = <TFunction extends Function>(target:  
      TFunction) => TFunction | void; 

@freezed 
class Customer { 
  
  public firstName: string; 
  public lastName: string; 
  
  constructor(firstName : string, lastName : string) { 
    this.firstName = firstName; 
    this.lastName = lastName; 
  } 
} 

function freezed(target: any) { 
    Object.freeze(target); 
} 

class Hello { 
    @logging 
    increment(n: number) { 
        return n++; 
   } 
} 
 

function logging(target: Object, key: string, value: any) { 
    
        value.value = function (...args: any[]) { 
            var result = value.apply(this, args); 
            console.log(JSON.stringify(args)); 
            return result; 
        } 
    }; 
} 

class Customer { 
  private _firstname: string; 
  private _lastname: string; 
  
  constructor(firstname: string, lastname: string) { 
        this._firstname = firstname; 
        this._lastname = lastname; 
  } 
  
  @logging(false) 
  get firstname() { return this._firstname; } 
  
  @logging(false) 
  get lastname() { return this._lastname; } 
} 

function logging(value: boolean) { 
    return function (target: any, propertyKey: string, descriptor: 
                PropertyDescriptor) { 
        descriptor.logging = value; 
    }; 
} 

declare type PropertyDecorator = (target: Object, propertyKey: string | 
    symbol) => void; 

class Customer { 
  @hashify 
  public firstname: string; 
  public lastname: string; 
  
  constructor(firstname : string, lastname : string) { 
    this.firstname = firstname; 
    this.lastname = lastname; 
  } 
} 

function hashify(target: any, key: string) { 
  var _value = this[key]; 
  
  var getter = function () { 
        return '#' + _value; 
  }; 
  
  var setter = function (newValue) { 
    _value = newValue; 
  }; 
  
  if (delete this[key]) { 
    Object.defineProperty(target, key, { 
      get: getter, 
      set: setter, 
      enumerable: true, 
      configurable: true 
    }); 
  } 
} 

declare type ParameterDecorator = (target: Object, propertyKey:  
   string | symbol, parameterIndex: number) => void; 

class Customer { 
    constructor() {  } 
  
    getName(@logging name: string) { 
        return name; 
   } 
} 

function logging(target: any, key : string, index : number) { 
  
  console.log(target); 
  console.log(key); 
  console.log(index); 
}