Lets say I have a following angular component:

@Component({
  selector: 'app-bar',
  templateUrl: './bar.component.html',
  styleUrls: ['./bar.component.css']
})
export class BarComponent implements OnInit {

If I instantiate this component I get the following html:

<body>
  <my-app _nghost-rkr-c45="" ng-version="10.0.1">
    <app-bar _ngcontent-rkr-c45="" _nghost-rkr-c43=""> (*)
      <p _ngcontent-rkr-c43="">bar works!</p>
    </app-bar>
  </my-app>
</body>

Angular has created a tag which corresponds to components selector. Now lets say I want to create a component such that it does not have a corresponding tag in the HTML. How can I do that? Lets say I want to attach my component to a div instead in of creating a new tag.

I can do this by modifying the selector decorator. selector decorator can take any valid css selector. So If I use class selector angular will attach the component instance to the elements which have that class. I create the example below.

@Component({
  selector: '.container',
  templateUrl: './foo.component.html',
  styleUrls: ['./foo.component.css']
})

This component will attach itself to the elements which have a class called container so the following html will be generated.

<body>
  <my-app _nghost-jpn-c54="" ng-version="10.0.1">
    <app-bar _ngcontent-jpn-c54="" _nghost-jpn-c43="">
      <p _ngcontent-jpn-c43="">bar works!</p>
    </app-bar>
  </my-app>
</body>

Notice that no html tag is created.

I hope you learned something new 🙂

Complete example on stackblitz