Typescript polymorphism for Angular component

Angular project may have several components that have some shared methods and properties. It is better to create a common base component and then extends it to to other sub components. The base component has an empty html template and css style, and only contain typescript code.

Both base component and sub components need to be added into module declaration section.

The injected constructor parameter needs to be passed from subclass constructor to base class constructor as constructor parameters with public access.

Similar to Java, typescript uses runtime binding when deciding which method to be invoked, it does not matter what is the current variable type, instead it will invoke the instance object's last method implemented by the inheritance tree. If the subclass does not implement the method, then it goes up to find the implementation from its parent class.

When a method in base class calls another method, it will invoke the implementation of the subclass. The only way to invoke the parent class' method is using super.certainFunc().

Sample code:

class animal {

  public name: string;

  constructor(n) {

    this.name = n;

  }

  public makeSound() {

    console.log(this.name);

  }

  public run() {

    this.makeSound();

    console.log('animal run');

  }

}

class dog extends animal {

   constructor(dn){

     super(dn);

   }

   public makeSound() {

     console.log('dog call. ' + name);

   }

   public run() {

    this.makeSound();

    super.makeSound();

    super.run();

    console.log('dog run');

  }

}

call the method from a button event handler:

  onTempTest2() {

   const d = new dog('pa');

   d.makeSound();

   d.run();

   const a: animal = d;

   a.makeSound();

   a.run();

  }

 

Azure windows server virtual machine setup notes

When setting up Azure Windows server virtual machine, there are several issues to handle in order to make it work:

1. after creating the virtual machine, you can install iis by running the below command in windows server's power shell prompt

Install-WindowsFeature -name Web-Server -IncludeManagementTools

Note, in virtual machine's azure portal's networking blade, you must add an inbound port rule for port 80 with priority of 100 in order to connect the iis using the vm's ip address.

2. Disable IE enhanced to allow IE to download other apps

By default, IE does not allow you to visit or download anything, you will need to connect to VM from remote desktop to allow IE to download. To do so, open VM's server manager app in VM, and click on Local Server and then click on "IE Enhanced Security Configuration" option, turn the option to off for both Administrator and user.

3. download and install dotnet core

By default, dotnet core is not installed on Windows VM server, you will need to download and install dotnet core in order to create and build dotnet apps.

Browser tab, javascripte, and sessionstoage

 Some note about browser tabs, javascript and session storage:

1. On same browser window, each tab will create and have its own session storage, the data stored in session storage are not shared between tabs. To share the data, use localstorage.

2. Data in session storage are kept as long as the tab is not closed. If user navigates away from current url to other urls, and then navigates back to the original url later, the previous session storage data are still available. Session storage will only lose if user closes the tab.

3. When the browser window is not active, or the tab is not the active, the javascript still still runs in background, although the event are raised slowly than active window or tab, (about once per second).