使用Angular 6指令在组件上设置属性

Question

I have a custom component ComponentA with an input property Format I can use it like this:

<componentA Format="#.00"></componentA>

ComponentA is a 3rd party component I do not want to touch.

I would like to build a directive named MyFormatDirective that will set the property on that component to a fixed value of "#.00", so that instead of the above I can write:

<componentA MyFormat></componentA>

This is ofcourse a simplification. In reality I would like the directive to set multiple properties - basically custom configure the component

Creating a component that wraps it is not an option, since componentA is a part of a large structure of a 3rd party library that relies on specific DOM structure. Wrapping it breaks that. Moreover, I need this approach to set multiple types of configurations by multiple directives

Pls help me to acheive that, or suggest an alternative

Answer 1

You can just create a directive with the same selector (or a different one, but then you'll have to add an attribute to the component), and inject the component inside:

import { Directive, Input } from '@angular/core';
import { ComponentAComponent } from './component-a.component';

@Directive({
  selector: 'component-a'
})
export class ComponentADirective {
  constructor(cmp: ComponentAComponent) {
    cmp.format = '#.00';
  }
}

Complete demo: https://stackblitz.com/edit/angular-qnxqqz?file=src%2Fapp%2Fcomponent-a.directive.ts