What’s the use of “selector” in Angular 4?

Question

I am new to Angular and following the Tour of Heroes tutorial from the official website.

I downloaded the part 5 tutorial, and saw the code

@Component({
  selector: 'my-heroes',

in one of the components. Reading up to the beginning of the tutorial and looking through the documentation, it says that the selector matches the element in your HTML, but when I check all the HTML files in the downloaded example, there's no element with a <my-heroes></my-heroes> tag. Still, it works perfectly fine with no error.

What, then, is the purpose of selector: 'my-heroes' ?

I even tried changing its name to something like

selector: 'my-heroes223'

and it continued to work without any error or warning.

Note: This is not duplicate question of any post. My question is that "why does selector not have any effect if its mentioned otherwise in documentations"

Answer 1

It is because <router-outlet></router-outlet> is doing the job for you.

you can inspect app.component.ts file. inside template they defined router-outlet .

Here are the two routes specified in àpp.component.ts

<a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
<a routerLink="/heroes" routerLinkActive="active">Heroes</a>

what it does is when you click on a link Dashboard or Heroes it will check for the appropriate component class in app-routing.module.ts where routes are defined and display the content accordingly.

const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard',  component: DashboardComponent },
  { path: 'detail/:id', component: HeroDetailComponent },
  { path: 'heroes',     component: HeroesComponent }
];

Here is a use case for selector .

If you want to add a footer to your app first generate a footer component with Angular cli like this ng generate component footer . then you can add the footer in app.component.ts like this

<h1>{{title}}</h1>
<nav>
  <a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
  <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
</nav>
<router-outlet></router-outlet>
<app-footer></app-footer>

Then footer component will be common to app and router-outlet will take care which component to load.

Answer 2

selector - defines the name of the HTML tag where the component will live. In this case, your component will by shown through the tags in the DOM.

Reference - Angular Docs

Answer 3

selector will say what will be a name of tag in parent template. Your component will be inserted to that tag. Using that tag with corresponding selector name you can pass parameters (and do actions off course) to component which owns selector. And catch too (in component).

Answer 4

I am trying to use C# dictionary to make analogy for it. The dictionary in C# has key and value pair. Each key has the corresponding value.

Somehow the selector likes a key in the dictionary, bring the key to the component in the parent html then the corresponding value will be rendered.