What is Selector in Angular 4 Components?

In previous article i have showed how to create your first Angular 4 application, this time we will take a look about how this is working in the background.

The below figure shows an example for an Angular 4 folder structure, let us just concentrate on three files which will explain the whole mystery

Angular Folder Structure

  • index.html
    Since Angular is a single page application the index.html will work as the main loading page, as you see in the above figure the index.html is showing <app-root>Loading...</app-root>, <app-root> here is reserving that place for whatever code called <app-root>, here comes the role of the next file.
  • app.component.ts
    Below figure shows a highlighted selector property "selector:'app-root'" which is setting the name of the selector inside that typescript file, so the previous index.html will look for a selector name to grab and then based on the file
    app.component.ts
  • app.component.html
    This file has the html which will be replacing the reserved part in the first index.html <app-root> , this selector name can be replaced to whatever name you want to use.
    app.component.html

Extra tips:

#1 In the index.html between the tags we used there was <app-root>Loading....</app-root>, this loading text can be replaced by any text to be used while loading that selector components

#2 main.ts "below figure" is used to load whatever app module components from app.module.ts and load those modules or scripts inside the loaded html in the browser.

main.ts


Subscribe to
for video tutorials updates

One thought on “What is Selector in Angular 4 Components?

  1. Pingback: What Are Components in Angular 4 | dotsway

Comments are closed.