Remove custom component's name from HTML angular 5

Question

I have a problem with using my custom component on the HTML table, it looks like it hampers the tag

my app component HTML:

<table cellpadding="0" cellspacing="0" border="0">
     <tbody>
        <app-item-form *ngFor="let item of checklists?.items" [child]="item"></app-item-form>
     </tbody>
</table>

app-item-form.html :

<table cellpadding="0" cellspacing="0" border="0">
     <tbody>
        <app-item-form *ngFor="let item of checklists?.items" [child]="item"></app-item-form>
     </tbody>
</table>

app-item-form.ts :

@Component({
  selector: 'app-item-form',
  templateUrl: './item-form.component.html',
  styleUrls: ['./item-form.component.scss']
})
export class ItemFormComponent implements OnInit {

  @Input()
  child: ItemChecklistModel;

Alexander Staroselsky · Accepted Answer · 2020-06-24 15:28:27Z

You can specify an attribute selector for the custom component such as [someSelector]. This selector can be put onto the element to retain the original tag. This pattern can be helpful in your situation as well in situations where making accessible components such as inputs would otherwise require dozens of @Input() to be specified (Angular Material Input for example).

At the base level it would look like this:

Component:

import { Component, Input } from '@angular/core';

@Component({
  selector: '[appItemForm]',
  template: `<tbody>your markup</tbody>`,
  styles: [`h1 { font-family: Lato; color: red; }`]
})
export class ItemFormComponent  {
  @Input() name: string;
}

Template:

<table appItemForm></table>

With your nested structure, you could use a combination of attribute selector component selector as well as ng-container to avoid adding invalid markup tags. Something like:

<table cellpadding="0" cellspacing="0" border="0">
     <tbody>
        <ng-container *ngFor="let item of checklists?.items">
          <table [appItemForm] [child]="child"></table>
        </ng-container>
     </tbody>
</table>

Here is an example in action.

Hopefully that helps!

SimOn TIBAS · Accepted Answer · 2020-06-24 16:20:04Z

-1

I solved it with bootstrap classes

my app component HTML:

<div class="tbl-content" >
    <div app-item-form *ngFor="let item of checklists?.items" [child]="item"></div>
/div>

app-item-form.html :

<div class="row" >
  <div class="col">{{child.label}}</div>
  <div class="col" *ngFor="let att of child?.attrValues"></div>
</div>
  <div app-item-form *ngFor="let c of child?.childrens" [child]="c"></div>

app-item-form.ts :

@Component({
  selector: '[app-item-form]',
  templateUrl: './item-form.component.html',
  styleUrls: ['./item-form.component.scss']
})

answered Jun 24, 2020 at 16:20

SimOn TIBAS

36 bronze badges

2 Comments

Alexander Staroselsky Over a year ago

Glad to hear you solved it, but this is a complete change to the structure and tags of your component. Was your intention to use a table component?

SimOn TIBAS Over a year ago

Yeah but if you noticed I need it to call my custom component inside himself and that's gonna missed up how the table looks if I used table/tr/td tags

Collectives™ on Stack Overflow

Remove custom component's name from HTML angular 5

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related