Angular Heroes tutorial <app-heroes> css selector

Question

in the Angular tutorial https://angular.io/tutorial/toh-pt1#selector, I dont understand the sentence: "The CSS element selector, 'app-heroes', matches the name of the HTML element that identifies this component within a parent component's template." I don't know what is like for a css selector, because I cannot find anything that matches the name of some HTML element.. there is no HTML element with the name app-heroes or similar... How does this work?

I only have a folder structure /src/app/heroes, where my heroes components are defined. Does it construct a name consisting of "parentfolder-folder"? and what exactly will be referenced by the css element selector ?

davecar21 · Accepted Answer · 2018-05-18 09:20:01Z

1

I dont understand the sentence: "The CSS element selector, 'app-heroes', matches the name of the HTML element that identifies this component within a parent component's template."

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

As you can see in the @Component it defines the selector with the value app-heroes this means that you will use app-heroes to be like html element (eg. <div> </div> therefore you will use <app-heroes></app-heroes>) to be able to show the view of HeroesComponent.

answered May 18, 2018 at 9:20

davecar21

2,6741 gold badge24 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Justinas · Accepted Answer · 2018-05-18 08:55:22Z

1

Scroll down where it says Show the HeroesComponent view. There you will see HTML:

<h1>{{title}}</h1>
<app-heroes></app-heroes>

So your CSS selector app-heroes matches this HTML node <app-heroes></app-heroes>. Same as CSS selector h1{} matches <h1></h1>

answered May 18, 2018 at 8:55

Justinas

43.9k5 gold badges72 silver badges108 bronze badges

2 Comments

MarcL Over a year ago

thanks nice, and that basically means, that my "template" or rather selector which refers to <app-heroes> will be bound inside the other html document? and which part gets replaced? will the whole code of my heroes.component.ts placed at that point or will only my heroes.component.html file be added at that place?

Justinas Over a year ago

@user2883596 All code from AppHeroes component will be placed as child of app-heroes

Collectives™ on Stack Overflow

Angular Heroes tutorial <app-heroes> css selector

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related