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.

Answer 1

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.

Answer 2

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>