CODEWITHSUNDEEP
htmlangulartypescript
Krishna Prashatt
Krishna Prashatt

Reputation: 639

Angular - How to use a variable in typescript file as a tagname in a HTML file?

This question is a direct link to this. That question has been marked dupe but in my case, using innerHTML would not be a wise choice because the content present as HTML is quite huge.

This is my component's HTML file:

<div>
<!-- This ul is the variable value I get from parent -->
    <ul class={{props.wrapperClasses.class}} id={{props.id}}_ul>
        <li class={{props.labelWrapper.direct.class}} >
            <label id={{props.labelProps.direct.id}} for={{props.labelProps.direct.htmlFor}} class={{props.labelProps.direct.class}} ><!-- {...childProps.labelProps.direct} -->
                {{props.labelProps.title}}
            </label>
        </li>
        <li id={{props.contentWrapper.direct.id}} class={{props.contentWrapper.direct.class}}  ><!-- {...childProps.contentWrapper.direct} -->
            <span class={{props.spanWrapper.class}}>
                <input id={{props.id}} #inp/>
            </span>
        </li>
    </ul>   
</div>

And the corresponding TS file:

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

@Component({
    selector:'inputcomponent',
    templateUrl:"./inputcomponent.html",
    styleUrls:['../app.component.css']
})

export class inputcomponent{
    @ViewChild('inp', { static: false }) inp: ElementRef;
    @Input() props;
    isWrapped = false;
    maxLength ='';
    tagName;
     ngAfterViewInit() {
        Object.assign(this.inp.nativeElement, this.props.content.direct);
     }
    ngOnInit(){
         this.tagName = this.props.tagName;
    }

}

As you can see, the ul tag is the one I get dynamically. It can be either ul or ol. If I have to use innerHTML, I have to unnecessarily repeat all the internal content. So is there any other way to achieve this?

Upvotes: 1

Views: 341

Answers (2)

user1971419
user1971419

Reputation:

If it was me, I would simply divide into two smaller subcomponents, one for the list and one for list items. You could avoid repetition with a parent component like this:

<ng-container *ngIf="ordered; else unordered">
  <ol><slot></slot></ol>
</ng-container>
<ng-template #unordered>
  <ul><slot></slot></ul>
</ng-template>

then your current component could look something like this.

<dynamic-list [ordered]="someBoolean">
  <!-- ... your <li> items here ... -->
</dynamic-list>

Upvotes: 1

Adrian Brand
Adrian Brand

Reputation: 21638

You can't, Angular templates are compiled at build time and you can't have variable names for tags. You would have to use ngIf to switch between which tags you want to use.

Upvotes: 0

Related Questions