Achi's Blog

Featured

Angular 4

angular2

Hi everyone. This is my new blog about Angular 2/4.
During my work with Angular 2 , I encounter many issues that result in long searches for answers on the web.
So i’ve decided to write about those issues, and hopefully that could help others.

Debug Angular4 in VSCode

use the following debug configuration, in order to enable chrome debugging from vscode iteself.

{

“version”: “0.1.0”,

“configurations”: [

{

“name”: “Launch Client”,

“type”: “chrome”,

“request”: “launch”,

“url”: “http://localhost:4200/#”,

“port”: 9223,

“sourceMaps”: true,

“diagnosticLogging”: true,

“webRoot”: “${workspaceRoot}”,

“runtimeArgs”: [

“–disable-session-crashed-bubble”,

“–disable-infobars”

“userDataDir”: “${workspaceRoot}/.vscode/chrome”

}

]

}

unsubscribing – the right way

export class MyComponent implements OnDestroy, OnInit {

  public user: User;
  private alive: boolean = true;

  public ngOnInit() {
    this.userService.authenticate(email, password)
      .takeWhile(() => this.alive)
      .subscribe(user => {
        this.user = user;
      });
  }

  public ngOnDestroy() {
    this.alive = false;
  }

}

you can subscribe to multiple observable, and with one statement in the ngOnDestroy event, unsubscribe from them all.

Using this way, the observable’s complete event will fire, in case you handle it.

further reading, by Ben Lesh: RxJS: Don’t Unsubscribe

Angular Async Data Binding with ngIf and ngElse (Angular 4)

Using ngIF with observables has never been easier. and with the new option of ngElse – even sweeter.

read the following article by Cory Rylan about this new option

Iframe to Parent window communication

If you need to push a notification from an IFRAME to it’s parent, in a cross domain scenario, there is a very nice solution using window.postMessage

read here: https://www.codeproject.com/Tips/585663/Communication-with-Cross-Domain-IFrame-A-Cross-Br

TypeScript Importer – Add the “Import” to your code automatically

This feature was one of the reasons some of my friends chose WebStorm over VS Code.

What ? who?

suppose you create a new service AService. Then, you want to inject it into your component.
currently you have to add an Import statement at the top of your code, and inject the service in the constructor.

Here is the shortcut: install “TypeScript Imported” extension in your vs code (ctrl+p then “ext install tsimporter”) , and from now on your life will be much easier.

tsimporter