feat(attributes): Add support for ngComponentOutlet * syntax

gund · Apr 23, 2018 · 2130057 · 2130057
1 parent 1bab4d2
commit 2130057
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 2 deletions.
diff --git a/src/dynamic/dynamic-attributes.directive.spec.ts b/src/dynamic/dynamic-attributes.directive.spec.ts
@@ -184,6 +184,46 @@ describe('DynamicAttributesDirective', () => {
     });
   });
 
+  describe('with `ngComponentOutlet` * syntax', () => {
+    let fixture: ComponentFixture<TestComponent>;
+
+    @Component({
+      template: `<ng-container *ngComponentOutlet="comp; ndcDynamicAttributes: attrs"></ng-container>`,
+    })
+    class TestComponent extends TestComponentBase {
+      comp = InjectedComponent;
+      attrs: { [k: string]: string };
+    }
+
+    beforeEach(async(() => {
+      TestBed.configureTestingModule({
+        imports: [CommonModule, TestModule],
+        declarations: [
+          DynamicAttributesDirective,
+          TestComponent,
+          ComponentOutletInjectorDirective,
+        ],
+        providers: [{ provide: COMPONENT_INJECTOR, useValue: null }],
+      }).compileComponents();
+
+      fixture = TestBed.createComponent(TestComponent);
+    }));
+
+    it('should set attributes on injected component', () => {
+      const attrs = {
+        'attr-one': 'val-1',
+        attrTwo: 'val-two',
+      };
+      fixture.componentInstance.attrs = attrs;
+
+      fixture.detectChanges();
+
+      const injectedElem = getInjectedComponentFrom(fixture).componentElem;
+
+      expect(injectedElem.attributes).toMatchObject(attrs);
+    });
+  });
+
   describe('with `ndc-dynamic`', () => {
     let fixture: ComponentFixture<TestComponent>;
 

diff --git a/src/dynamic/dynamic-attributes.directive.ts b/src/dynamic/dynamic-attributes.directive.ts
@@ -19,18 +19,23 @@ export interface AttributesMap {
 }
 
 @Directive({
-  selector: '[ndcDynamicAttributes]',
+  selector: '[ndcDynamicAttributes],[ngComponentOutletNdcDynamicAttributes]',
   exportAs: 'ndcDynamicAttributes',
 })
 export class DynamicAttributesDirective implements DoCheck {
   @Input() ndcDynamicAttributes: AttributesMap;
+  @Input() ngComponentOutletNdcDynamicAttributes: AttributesMap;
 
   private _attrsDiffer = this.differs.find({}).create<string, string>();
   private _componentInjector: ComponentInjector = this.injector.get(
     this.componentInjectorType,
     null,
   );
 
+  private get _attributes() {
+    return this.ndcDynamicAttributes || this.ngComponentOutletNdcDynamicAttributes;
+  }
+
   private get _compInjector() {
     return this.componentOutletInjector || this._componentInjector;
   }
@@ -51,7 +56,7 @@ export class DynamicAttributesDirective implements DoCheck {
   ) {}
 
   ngDoCheck(): void {
-    const changes = this._attrsDiffer.diff(this.ndcDynamicAttributes);
+    const changes = this._attrsDiffer.diff(this._attributes);
 
     if (changes) {
       this._updateAttributes(changes);