Remove component tag in angular 6

Question

Im trying to remove the called component tag from html to prevent a some broken css from external libraries (for example, calling a sidenav from clarity project):

something.component.ts

import {Component, OnInit, Input} from '@angular/core';
@Component({
  selector: 'app-something',
  templateUrl: './something.component.html',
  styleUrls: ['./something.component.css']
})
export class SomethingComponent implements OnInit {
  @Input() config: {} = {};
  ....
}

something.component.html

<div>
    Hello World
</div>

another.component.html

 <div>
    <app-something [config]="somethingConfig"></app-something>
 </div>

Then outputs:

 <div>
    <app-something>
      <div>
          Hello World
      </div>
    </app-something>
</div>

And I want:

<div>
  <div>
     Hello World
  </div>
</div>

Yes, i know, many answers about it in stackoverflow and basically i can resume all the answers in 2 items :

Add brackets to selector (selector: '[app-something]'): Doesnt works, it triggers an error

The selector of the component SomethingComponent should be used as element (https://angular.io/styleguide#style-05-03) (component-selector).
Use a Directive: Directives cannot have templateUrl param.

Using the attribute selector seems to be the best way of solving this problem. The error you are getting is not due to angular not supporting the square brackets to achieve this, something else must be going wrong in your application. I suggest looking into examples on how to use the attribute selector for components. — enf0rcer, Jun 05 '18 at 09:47
@enf0rcer you right. Isnt a angular problem, its a tslint.json configuration. Put your answer to select as right answer. Thanks man. — Stefan Luv, Jun 05 '18 at 17:09

score 8 · Accepted Answer · edited Jun 26 '19 at 11:27

8

Using the attribute selector seems to be the best way of solving this problem. The error you are getting is not due to angular not supporting the square brackets to achieve this, something else must be going wrong in your application. I suggest looking into examples on how to use the attribute selector for components.

Also remember to change

<div> 
    <div>Hello World</div>
</div>

to

<div> 
    <div app-something></div> 
</div>

for the attribute selector to be effective.

edited Jun 26 '19 at 11:27

Abdullah Khan

12,010
6
65
78

answered Jun 05 '18 at 19:36

enf0rcer

545
2
11

What if the component accepts some input how do we pass it to the component? – Alex Onozor Aug 20 '18 at 22:47
It's the same as usual: `
` – enf0rcer Aug 21 '18 at 09:52
1

What if I want to render 3 TD elements with a single Component? _attribute selector_ does not work here. – Alex 75 Dec 22 '19 at 11:46
@Alex75 as far as I know that should work as well. Though I havent used angular in a long time. – enf0rcer Dec 31 '20 at 09:33

score 2 · Answer 2 · answered Jun 23 '20 at 06:59

From your component, change selector to div[app-something]

import {Component, OnInit, Input} from '@angular/core';
@Component({
  selector: 'div[app-something]',
  templateUrl: './something.component.html',
  styleUrls: ['./something.component.css']
})
export class SomethingComponent implements OnInit {
  @Input() config: {} = {};
  ....
}

Then you can use that component together with div tag

<div> 
    <div app-something [config]="config"></div> 
</div>

Remove component tag in angular 6

2 Answers2