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.
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.
Are you new to blogging, and do you want step-by-step guidance on how to publish and grow your blog? Learn more about our new Blogging for Beginners course and get 50% off through December 10th.
WordPress.com is excited to announce our newest offering: a course just for beginning bloggers where you’ll learn everything you need to know about blogging from the most trusted experts in the industry. We have helped millions of blogs get up and running, we know what works, and we want you to to know everything we know. This course provides all the fundamental skills and inspiration you need to get your blog started, an interactive community forum, and content updated annually.
use the following debug configuration, in order to enable chrome debugging from vscode iteself.
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
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
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
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.
read this fine article about caching in your data service, by using RxJs
Here is a great post that described the new adition to the angular 2 framework, starting with version 2.3 .
just to put it in a nutshell:
“Component Inheritance in Angular 2.3 covers all of the following:
@Input()
, @Output
), etc. defined in a derived class will override any previous metadata in the inheritance chain otherwise the base class metadata will be used.ngOnInit
, ngOnChanges
) will be called even when are not defined in the derived class.Component inheritance DO NOT cover templates and styles. Any shared DOM or behaviours must be handled separately.”
where should i store it ?
i am previous post (Load configuration from external file) i’ve described the way to load the configuration from a json file.
Here, i want to address the option to have our configuration as part of our application, in a class.
We could use angular-cli’s environment.ts file, and add values to the constant that is declared there. but i want to show a more elegant way. this is based on the angular DI documentation and on a stackoverflow answer.
1) app.config.ts
import { OpaqueToken } from "@angular/core";
export let APP_CONFIG = new OpaqueToken("app.config");
export interface IAppConfig {
apiEndpoint: string;
}
export const AppConfig: IAppConfig = {
apiEndpoint: "http://localhost:15422/api/"
};
2) app.module.ts
import { APP_CONFIG, AppConfig } from './app.config';
@NgModule({
providers: [
{ provide: APP_CONFIG, useValue: AppConfig }
]
})
3) your.service.ts
import { APP_CONFIG, IAppConfig } from './app.config';
@Injectable()
export class YourService {
constructor(@Inject(APP_CONFIG) private config: IAppConfig) {
// You can use config.apiEndpoint now
}
}
Now you can inject the config everywhere without using the string names and with the use of your interface for static checks.
please note: in my tests, i get warnings if i use the : IappConfig statement in the constractor of “YourService”. you can omit this, and things continue to work as expected (eventually, javascript doesn’t have interfaces)
Found a nice github project with custom pipes.