Issue
Is there anyway to change this:
<div>Some text here</div>
To:
<tr>Some text here</tr>
Change the tag DIV tag to TR tag dynamically? Basically Replace the Tags?
Solution
you could create custom structure directive to do this.
replace-tag.directive.ts
import { Directive, Input, TemplateRef, ViewContainerRef, ElementRef, AfterViewChecked } from '@angular/core';
@Directive({
selector: '[replaceTag]'
})
export class ReplaceTagDirective implements AfterViewChecked {
constructor(
private templateRef: TemplateRef<any>,
private vcf: ViewContainerRef
) { }
private _tag: string;
private _needUpdate: boolean = false;
@Input('replaceTag')
set tag(t: string): void {
this._tag = t;
this._needUpdate = true;
this.vcf.clear();
let template = this.templateRef.elementRef.nativeElement.nextElementSibling;
if (template) {
this.templateRef.elementRef.nativeElement.parentNode.removeChild(template);
}
this.vcf.createEmbeddedView(this.templateRef);
}
ngAfterViewChecked() {
if (this._needUpdate) {
this._updateTemplate();
this._needUpdate = false;
}
}
private _updateTemplate() {
let template = this.templateRef.elementRef.nativeElement.nextElementSibling;
if (template) {
let r = document.createElement(this._tag);
r.innerHTML = template.innerHTML;
this.templateRef.elementRef.nativeElement.parentNode.replaceChild(r, template);
}
}
}
app.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
template: `
App
<span *replaceTag="tag">
<strong>content {{ tag }} </strong>
<em>{{ message }}</em>
</span>
`
})
export class AppComponent implements OnInit {
tag: string = 'div';
timeOut: number = 2;
get message(): string {
return this.timeOut? `<- this tag will change after ${this.timeOut} seconds.` : 'done';
}
ngOnInit() {
setTimeout(() => {
this.tag = 'h2';
this.timeOut = 4;
}, 2000);
setTimeout(() => {
this.tag = 'sub';
this.timeOut = 0;
}, 4000);
}
}
Answered By - Tiep Phan
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.