diff --git a/README.md b/README.md index 0b22305..b504bd5 100644 --- a/README.md +++ b/README.md @@ -16,6 +16,7 @@ Angular extensions powered by community. + `@angular-contrib/common` + [``][NgHost] + [`ngForIn`][NgForIn] + + [`ngInit`][NgInit] + [`ngNoCheck`][NgNoCheck] + [`ngSwitchCaseContinue`][NgSwitchContinue] @@ -70,6 +71,7 @@ class AppComponent { } [IterableDiffersExtensibility]: https://github.com/trotyl/angular-contrib/tree/master/packages/core/iterable-differs [KeyValueDiffersExtensibility]: https://github.com/trotyl/angular-contrib/tree/master/packages/core/key-value-differs [NgForIn]: https://github.com/trotyl/angular-contrib/tree/master/packages/common/for-in -[NgNoCheck]: https://github.com/trotyl/angular-contrib/tree/master/packages/common/no-check +[NgInit]: https://github.com/trotyl/angular-contrib/tree/master/packages/common/init [NgHost]: https://github.com/trotyl/angular-contrib/tree/master/packages/common/host +[NgNoCheck]: https://github.com/trotyl/angular-contrib/tree/master/packages/common/no-check [NgSwitchContinue]: https://github.com/trotyl/angular-contrib/tree/master/packages/common/switch-continue diff --git a/packages/common/index.ts b/packages/common/index.ts index 73fc825..ddbd0c3 100644 --- a/packages/common/index.ts +++ b/packages/common/index.ts @@ -1,4 +1,5 @@ export * from './for-in/index'; export * from './host/index'; +export * from './init/index'; export * from './no-check/index'; export * from './switch-continue/index'; diff --git a/packages/common/init/README.md b/packages/common/init/README.md new file mode 100644 index 0000000..add5e7b --- /dev/null +++ b/packages/common/init/README.md @@ -0,0 +1,35 @@ +# NgInit + +Helper directive to perform side-effects in template. + +## Type + +**Directive** + +## Provenance + ++ https://github.com/angular/angular/issues/6585 + +## NgModule + +`@angular-contrib/core#InitModule` + +## Usage + +```typescript +@Component({ + template: ` +

+ Will be Bar: {{ value }} +

+ ` +}) +class MyComponent { + value = 'Foo'; +} +``` + +## Note + ++ Please do not use this when possible; ++ The order is equivant to `OnInit` hook on the given element; diff --git a/packages/common/init/index.ts b/packages/common/init/index.ts new file mode 100644 index 0000000..42976c0 --- /dev/null +++ b/packages/common/init/index.ts @@ -0,0 +1,2 @@ +export * from './init'; +export * from './init.module'; diff --git a/packages/common/init/init.module.ts b/packages/common/init/init.module.ts new file mode 100644 index 0000000..1f2a8cb --- /dev/null +++ b/packages/common/init/init.module.ts @@ -0,0 +1,8 @@ +import { NgModule } from '@angular/core'; +import { NgInit } from './init'; + +@NgModule({ + declarations: [ NgInit ], + exports: [ NgInit ], +}) +export class InitModule { } diff --git a/packages/common/init/init.spec.ts b/packages/common/init/init.spec.ts new file mode 100644 index 0000000..8af58e3 --- /dev/null +++ b/packages/common/init/init.spec.ts @@ -0,0 +1,34 @@ +import { Component } from '@angular/core'; +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { InitModule } from './init.module'; + +describe('ngForIn', () => { + let fixture: ComponentFixture; + let component: TestComponent; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [TestComponent], + imports: [InitModule], + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(TestComponent); + component = fixture.componentInstance; + }); + + it('should perform statement during init', () => { + fixture.detectChanges(); + + expect(fixture.nativeElement.textContent).toBe(`2`); + }); +}); + +@Component({ + selector: 'test-cmp', + template: `

{{ value }}

`, +}) +class TestComponent { + value = 1; +} diff --git a/packages/common/init/init.ts b/packages/common/init/init.ts new file mode 100644 index 0000000..3c960c1 --- /dev/null +++ b/packages/common/init/init.ts @@ -0,0 +1,12 @@ +import { Directive, EventEmitter, OnInit, Output } from '@angular/core'; + +@Directive({ + selector: '[ngInit]', +}) +export class NgInit implements OnInit { + @Output() ngInit = new EventEmitter(); + + ngOnInit(): void { + this.ngInit.emit(); + } +}