Angular replace component selector with html

Question

Say you have the following component:

@Component({
  selector: 'passport-cell',
  templateUrl: './passport-cell.component.html',
  styleUrls: ['./passport-cell.component.scss']
})
export class PassportCell {
  @Input()
  public label: LabelTranlations;

  @Input()
  public language: PassportLanguage;

  @Input()
  public labelPosition: LabelPosition = LabelPosition.LEFT;

  @Input()
  public fontsize: number;

  public LabelPositions = LabelPosition;

  constructor() {}
}

export enum LabelPosition {
  LEFT = 'LEFT',
  RIGHT = 'RIGHT',
  CENTER = 'CENTER'
}

Now I really want to use the <dd> and <dt> tag however I can't make a <dl> list since no other tag is allowed directly after a <dl>

example:

<dl class="person-info">
<passport-cell class="surname" [labelPosition]="LabelPositions.LEFT" [label]="labels.surName"
    [language]="language">
    {{personInfo?.personName?.last | texttransform : TextTransform.UPPERCASE }}
</passport-cell>
</dl>

So it is possible to "remove" the custom tag and replace it with the actual HTML of the template?

score 0 · Answer 1 · answered Jul 06 '21 at 15:31

You can use attribute or class selectors instead of tag.

@Component({
  selector: '[passport-cell]', // for class selector '.passport-cell'
  templateUrl: './passport-cell.component.html',
  styleUrls: ['./passport-cell.component.scss']
})

And then you can use the component with the following attribute:

<dl class="person-info">
<dd passport-cell class="surname" [labelPosition]="LabelPositions.LEFT" [label]="labels.surName"
    [language]="language">
    {{personInfo?.personName?.last | texttransform : TextTransform.UPPERCASE }}
</dd>
</dl>

If you prefer class selector, then it will be:

<dd class="surname passport-cell" ...

Angular replace component selector with html

1 Answers1