What are the components in Angular 10?
In the last episode of this series, I wrote about Angular Modules. In the current post, I want to detail the Angular Components in the Framework.
Let’s talk about the components.
When we created a blank Angular application in the first post of this series than Angular generated a component by default. Angular will always have a ‘main’ component out of the box. However, the name of it is the ‘app’ component. So every file whose name starts with ‘app’ belongs to the single ‘root’ component which happens to have the ‘app’ prefix. But we can generate our components with a specific command and Angular CLI (command-line tool) provides us a command for this. This is the [ng g c].
ng g c test
# Output of the command:
# CREATE src/app/test/test.component.css (0 bytes)
# CREATE src/app/test/test.component.html (19 bytes)
# CREATE src/app/test/test.component.spec.ts (612 bytes)
# CREATE src/app/test/test.component.ts (267 bytes)The command above generates four files into the test folder. You can write your test code into the spec.ts file. However, you can skip it with an added extra flag to the command.
ng g c test --skip-tests
# CREATE src/app/test/test.component.css (0 bytes)
# CREATE src/app/test/test.component.html (19 bytes)
# CREATE src/app/test/test.component.ts (267 bytes)Application bootstrap process
To understand the behavior and the importance of a component it is good to know the bootstrap process of Angular.
Angular serves the index.html file as a Single Page Application through the ng serve command. In this file, there is an app-root HMTL element.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example</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>
<!-- This is the app-root element for Angular -->
<app-root></app-root>
</body>
</html>
When we create a blank Angular application a root component ( files with ‘app’ prefixes ) is generated by default.
-rw-r--r-- 1 biroa biroa 159 Dec 18 10:30 app.component.css
-rw-r--r-- 1 biroa biroa 1.7K Dec 18 13:54 app.component.html
-rw-r--r-- 1 biroa biroa 1005 Nov 3 2017 app.component.spec.ts
-rw-r--r-- 1 biroa biroa 288 Dec 17 17:09 app.component.ts
-rw-r--r-- 1 biroa biroa 1.1K Dec 21 11:21 app.module.ts
If you open the generated app.component.ts file you can find there an @Component decorator. If you check there is a selector property inside the decorator, with the ‘app-root’ name which defines the root element in the index.html file. This selector makes it possible for Angular to generate the output of all the app prefixed files between the index.html’s app-root tags.
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})Ng serve command generates a bunch of JavaScript bundles into the output of the Application. Those JavaScript files will also contain our code.
But the code inside the main.ts will run at first when we run our application. The main.ts will bootstrap our main component’s module file which is the AppModule in the app.module.ts file.
platformBrowserDynamic().bootstrapModule(AppModule);The $NgModule decorator in the app.module.ts file contains a bootstrap property that references the AppComponent keyword which bootstraps the root component aka the app.component.*.
Angular loads the templateUrl and styleUrl files from the @Component decorator and generates the output between the index.html’s root element.
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})Application bootstrap process in short with our custom components
The main.ts file starts running and realizes it has to run the AppModule code.
platformBrowserDynamic().bootstrapModule(AppModule);So it starts running the content of the app.module.ts.
@NgModule({
declarations: [
AppComponent
],
imports: [ // Add other modules
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }Because of the bootstrap array type property in the @NgModule it has to load and execute the AppComponent code in the app.component.ts file while it loads the template and the CSS too and generates the result into the root-app HTML element.
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
}If we have custom components, then Angular will continue loading those custom definitions with the same logic and manner. It goes through the dependency chain until all components are loaded and generated.
Conclusion
Based on the logic of bootstrapping the Framework’s root app, we can understand what process will happen when we create a custom component with dependencies.
Useful Links
Episodes
- First steps
- Modules
- Components
- Databinding
- Directives
- Views
- Debugging