How to create an element after directive element in Angular 4

Question

I have one directive in angularjs which is working fine but it uses jQuery and now I want tot convert it in Angular 4

Old Directive (AngularJS)

app.directive('errName', function () {
    return {
        link: function (scope, element, attrs) {
            element.bind('error', function () {
                if (attrs.src != attrs.errName) {
                    var name = attrs.errName.split(' ');
                    var attr = '?';
                    if (name.length == 1)
                    {
                        attr = name[0].substring(1, 0);
                    }
                    if (name.length > 1)
                    {
                        attr = name[0].substring(1, 0) + name[1].substring(1, 0);
                    }
                    $(element).hide();
                    $(element).after('<span class="thumb-alpha"><span class="default-thumb"><span class="default-thumb-placeholder">' + attr.toUpperCase() + '</span></span></span>');
                }
            });
        }
    }
});

it simply check there's an error in image on load then it hide that element and create one span after that I changes its name in Angular 4 to show initials I'm getting value hiding element as well but can't able to create span after that

New Directive which I try to build :

export class ShowInitialsDirective {

    @Input() initials;

    constructor(el: ElementRef, renderer:Renderer) {
        var element = el.nativeElement
        renderer.listen(el.nativeElement, 'error', (event) => {
            var initial_default = '?';
            var name = this.initials;
            name = name.split(' ');
            if (name.length == 1)
            {
                initial_default = name[0].substring(1, 0);
            }
            if (name.length > 1)
            {
                initial_default = name[0].substring(1, 0) + name[1].substring(1, 0);
            }
            this.initials = initial_default;
            renderer.setElementStyle(el.nativeElement,'display','none');
           // element.after('<span class="thumb-alpha"><span class="default-thumb"><span class="default-thumb-placeholder">' + this.initials.toUpperCase() + '</span></span></span>');
        })
    }
}

Is there any way to create span in it and put this html code in it

Answer 1

Sure, but you might think about rewriting it all together, and creating it into a component. If you really really don't want that, you can use the insertBefore on the parent of nativeElement , and with a little trickery:

const div: HTMLDivElement = document.createElement('div');
div.innerHTML = '<span class="thumb-alpha"><span class="default-thumb"><span class="default-thumb-placeholder">' + this.initials.toUpperCase() + '</span></span></span>';
const insert: HTMLElement = div.firstChild as HTMLElement;
const before: HTMLElement = el.nativeElement.nextElementSibling;
const parent: HTMLElement = el.nativeElement.parentElement;
if (before) {
   parent.insertBefore(insert, before);
} else {
   parent.appendChild(insert);
}

But again, way prettier would be to create a completely new component doing all this awesome work for you

Answer 2

In Angular 2+, you should create a component when you want to change html. Components are directives with html templates. The directive you are creating here is an attribute directive. Attribute directives do not contain html templates. For more information, please refer angular website .