CODEWITHSUNDEEP
htmlangulartypescript
SimOn TIBAS
SimOn TIBAS

Reputation: 3

Remove custom component's name from HTML angular 5

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;

Upvotes: 0

Views: 994

Answers (2)

SimOn TIBAS
SimOn TIBAS

Reputation: 3

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']
})

Upvotes: -1

Alexander Staroselsky
Alexander Staroselsky

Reputation: 38807

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!

Upvotes: 2

Related Questions