How angular works.

Navigate to project folder and click on app.component.html file in <project-folder>/src/app/app.component.html

Write the below code inside the app.component.html file

<H2>Hello Angular</H2>

Now when you navigate to localhost:4200 you will see something like this.

Now lets see how the contents of app.component.html file is rendered.
Initially angular.json file which is a configuration file which is read by angular.
This json file has two properties named index and main.
index propery points to index.html file which will be loaded initially by localhost:4200 url is hit.
And main.ts is called to resolve the angular modules used in index.html file.

In the above index.html <app-root> tag is not a default html element but one of the angular component.
So what happens here is when angular is loaded, it loads main.ts file, which looks like below

Now once app.module.ts file is loaded
It has 4 sections in it.
- declarations – This property holds the array of components names which are used in the module
- imports – This property holds the array of all the modules names required along with this module
- providers – This property is again a string array which indicates the name of the services required for executing this module.
- bootstrap – This property holds an array of name of the components which are required while starting(booting/bootstraping) this module.
Now since AppComponent class is bootstraped by the app.module.ts file It will load from file app.component.ts.
app.component.ts file will look something like below.

app.compnent.ts file has a class named AppComponent which is decorated with @Component decorator.
@Component decorator has 3 properties
- selector – which is the name of the tag which this component is going to present.
  (remember <app-root> tag used in index.html file resolved from this file)
- templateUrl – which points to the html file which has the content which is displayed instead of the tag <app-root>
  (This is how the content of app.component.html is displayed in index.html file)
- styleUrls – this property takes an array of name of the css file which contains the css which will be applied to the html content displayed.
Thus the html content of app.component.html file is loaded instead of tag <app-root>