ghetolay

/* http://codepen.io/Ghetolay/pen/PNLKpO */
.container{
  position: relative;
  z-index: 0;
}

$borderSize: 2px;
/* 1px bigger only needed when sizes are float */
$coverBorderSize: $borderSize + 1px;
$bgColor: #f1f1f1;

ghetolay

//Example of a custom decorator
import { forwardRef } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';

import { ExtendsComponent, ExtendsComponentMetadata } from './extendscomponent';

export var DatePicker = function( metadata: ExtendsComponentMetadata ): (cls: any) => any {

  return (target: Function) => {
    metadata.providers = metadata.providers || [];

ghetolay

/*
  This function allows you to create singleton service that'll stay singleton throughout all the app.
  Even(especially) if you use lazy module.
  This covers that problem : https://angular.io/docs/ts/latest/guide/ngmodule.html#!#why-_userservice_-isn-t-shared

  Idea isn't mine, it's how they handle it on Angular Material. I'm just creating an helper function for it.

  Basically we create a factory provider instead of a plain class provider and inject the service into the factory function.
  If the service is present it means it has already been instantiated somewhere in the injector tree and we can return it.
  If injection fails and service is nulll this means we are the first provider so we can instantiate and return the service.

ghetolay

##feature

1. @Until() : less restrictive @Host()
2. ngStyle allows array as value so we can do 'padding.px': [10 20]
3. Define pure function inside component to act like local Pipe. avoid the hassle to create Pipe when it's non-reusable/component specific.
4. Typings of RendererV2.listen() should be false | void done => boolean | void
5. Provide non-singleton service on modules (maybe breaking the design and purpose of injection). when we want service tied to component we need to provide it inside @Component({ providers: )} This is a bit boilerplate and error prone because if you inject the service and forget to provide it on your component you may get one of the parent's instance. Would be good to add the possibility to define per-component service at module which will create a new instance for each injection (not meant to be shared with children or else). Current need if for extending component so if something comes up in the meantime it won't be needed
6. Define which controls aff

ghetolay

export interface Action<T> {
	type: T;
}

export interface PayloadAction<T, R> {
	readonly type: T;
	payload: R;
}

export interface ActionFactory<T> {

ghetolay

@Injectable()
export class NgrxStoreService {

	ondestroy$: Observable<void> = new Subject<void>();

	constructor(protected store: Store<State>, protected changeDetector: ChangeDetectorRef) { }

	select<R>(mapFunc: (state: State) => R): Observable<R> {
		return this.store.select(mapFunc).pipe(
			takeUntil(this.ondestroy$),

ghetolay

Problem / Need

When you inject a token on a Component, the injection system will use a recursive pattern to inject the token an stops either once it has successfully found the token or once it has reach top injector. In some case we would like to create some kind of encapsulation and set a different boundary that the top injector.

Current solution

@Self() and @Host() were created in order to create that kind of encapsulation, this allows injection to stop at respectively the current component or the host component.

Problem

ghetolay

Problem

At the moment it's not really easy to create reusable part of a form as a component like an address component for example. You either have to create a fake input by implementing ControlValueAccessor or pass the form down to the component using @Input and use a form directive on the component (kinda creating a sub-form).

Expected behavior

It'll be nice if we could make that easier. Like we would just have to create a component with some form directives in it. It'll then register to the parent form like for direct child form directive.
This plunker is a working example except we had to use some tricks with providers in order to make it work that way.

Cause

All form directives, like FormControlName, FormGroupName, NgModel etc..., are injecting the ControlContainer that way :

ghetolay

export class LoopContext<T> {
  index: number;
  count: number;

  constructor() {}

  get first(): boolean { return this.index === 0; }

  get last(): boolean { return this.index === this.count - 1; }

ghetolay

interface Context {
  $implicit: any
}

@Directive({
  selector: '[imbaTemplateOutlet]'
})
export class ImbaTemplateOutlet {

  @Input()