DEV Community

Anubhab Mukherjee
Anubhab Mukherjee

Posted on • Updated on

Various Types of Angular Component Selectors

Today we will be learning the various ways of using the component selector in Angular.
If you are unaware of what is a component in Angular or what are the different parts of it I would recommend you to have a quick read on the following article - Understanding-Components.

There are mainly four different ways you can define a selector in Angular component.

i. Tag Selector
When a component is created by default it is provided with a tag selector.
app.component.ts file

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'MyFirstProject';
}
Enter fullscreen mode Exit fullscreen mode

Lets use the selector in our index.html file in the following way-

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>MyFirstProject</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width,
     initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
  </head>
  <body>
    <app-root></app-root>
  </body>
  </html>
Enter fullscreen mode Exit fullscreen mode

ii. Class Selector
The class selector syntax is similar to the CSS class .

import { Component } from '@angular/core';

@Component({
  selector: '.app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'MyFirstProject';
}

Enter fullscreen mode Exit fullscreen mode

In the index file we can use the selector in the below way

  <body>
    <div class="app-root"></div>
  </body>
Enter fullscreen mode Exit fullscreen mode

iii. ID Selector
The id selector syntax also resemble like the CSS id selector.

import { Component } from '@angular/core';

@Component({
  selector: '#app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'MyFirstProject';
}
Enter fullscreen mode Exit fullscreen mode

In the index.html file lets see how the selector has been used.

 <body>
    <div id="app-root"></div>
  </body>
Enter fullscreen mode Exit fullscreen mode

iv. Attribute Selector
The attribute selector syntax in the component decorator selector metadata looks like [app-name]

import { Component } from '@angular/core';

@Component({
  selector: '[app-root]',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'MyFirstProject';
}
Enter fullscreen mode Exit fullscreen mode

In the index.html it will be used as any other attribute inside a html element.

<div app-root></div>
Enter fullscreen mode Exit fullscreen mode

So now we completed learning the different ways we can write and use the selectors in Angular.

Hope you enjoyed the post, if you enjoyed it do like and comment.
Also if you want any specific topic please write it in the comment section.

Coming up next some more advanced features on Angular Component and more Angular topics. So stay tuned.

Cheers!!!
Happy Coding

Discussion (2)

Collapse
gaurangdhorda profile image
GaurangDhorda

Very Informative and helpful too!

Same things are also applicable for angular directive selectors too. Because component is special kind of directive with own UI while directive does not have their own UI. Thank you.

Collapse
anubhab5 profile image
Anubhab Mukherjee Author

Thank You Gaurang that you found it helpful.
True that's absolutely correct.
Components are directives without a template of it own. On the other hand Components are special directives (I can think of) with a view/ template.