DEV Community

Anubhab Mukherjee
Anubhab Mukherjee

Posted on • Edited on

Various Types of Angular Component Selectors

#angular #typescript #component #beginners

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

Top comments (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 •

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.

Read next

takuuu profile image

Comparing Rust's and_then and map for Option Handling

Takuu Kaku -

prince_beec5ccde00b7c6c73 profile image

Toggle Switch Realistic illusion using the core html and core Css Code

Prince -

the_rusty_dev profile image

Integrating Google Calendar API in Node.JS: A Guide to Event Creation and Meeting Scheduling

Gaurav D. Lohar -

abhay_yt_52a8e72b213be229 profile image

Mastering JavaScript Objects: The Backbone of Dynamic Programming

Abhay Singh Kathayat -