My AngularJS directive is functioning correctly with jQuery, but now I want to convert it to Angular 4.
Previous 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>');
}
});
}
}
});
The old directive checks for errors in the image on load, hides the element, and then creates a span. In my Angular 4 directive, I am able to hide the element and get the value, but struggling to create the span afterwards.
New Directive that I'm working on:
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>');
})
}
}
I would like to know if there's a way to create a span in the Angular 4 directive and insert the specified HTML code.