Angular 4+ : How to add a selector in Component Using Custom HTML tag or as a Class or Using as an attribute.

Add angular selector as Custom HTML Tag

Add selector name as below inside a double quotes in your component ts file

test.component.ts

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

app.component.html

 <div > 
   <app-test></app-test>   
</div>
 

Add angular selector as Class

use ” . ” in selector to use it as class

test.component.ts

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

app.component.html

   <div class="app-test" > </div>   
 

Use as Attribute

Add “[” “]” tp selecter as below

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

<div  app-test> </div>