Seeking advice about Directive Implementation in Angular 2

Question

I am designing a text editing component. I have developed the basic text editor to a minimally viable state. Now, I want to be able to add the ability to implement field text / templates.

I am imagining that the markup will look something like this:

//basic text editor
<text-editor></text-editor>

//text editor with templates
<text-editor *templateProvider='templateProviderIdentifier'></text-editor>

//templates used on some future item
<not-yet-defined *templateProvider='templateProviderIdentifier'></not-yet-defined>

The Angular2 documentation for Directives indicates that the Directive Constructor can have the ElementRef injected, which gives the Attribute Directive access to the DOM Element, but how does an Attribute Directive gain access to the Controller?

I don't want to edit the text editor, because templates might be used elsewhere. Ideally, when the attribute appears on an element, the Directive grabs the associated controller and tests it for a usable interface. If detected, it modifies the Component by setting itself as a behavior modifier on the element, or as a decorator of a sub-object.

I'm looking for information on how an Attribute Directive can Access the Controller object and any tips or tricks or pitfalls that you all see in the approach I am planning.

For quick reference to the manual pages that I have read, I include the following links:

score 0 · Answer 1 · answered May 12 '17 at 00:03

0

you can use angular2 component with input value like this:

import { Component, OnInit, AfterViewChecked, AfterViewInit, Input, Output, ElementRef, EventEmitter } from '@angular/core';

@Component({
    selector: 'text-editor',
    template: require('./text-editor.component.html'),
    styleUrls: ['css/text-editor.css']
})
export class TextEditorComponent implements OnInit, AfterViewInit {

    @Input() templateProvider: any;
    @Output() something_for_output = new EventEmitter<any>();

    private el:HTMLElement;

    constructor(elementRef:ElementRef) {
    }

    ngAfterViewInit()
    {
    }

    ngAfterViewChecked()
    {
    }

    ngOnInit()
    {
    }
}

and then you could use this in html:

 <text-editor [templateProvider]='something'></text-editor>

answered May 12 '17 at 00:03

Houtan

403
2
5

I like that suggestion, but then the TextEditor must be aware and "know" about the existence of the Template Provider. This is actually my current implementation, though, so I like your thought. In the new design, the text editor has a content window with a content window interface, and I am hoping that the template directive can extract the content window, wrap it (as a Decorator, which has the same interface) ... – Jared Clemence May 12 '17 at 15:09
... and then set the wrapped object back into the component. In this way, the editor only deals with the content window, and it has no idea that a template provider is actually inserted as a layer in between. – Jared Clemence May 12 '17 at 15:09

Seeking advice about Directive Implementation in Angular 2

1 Answers1