In this tutorial, we will take a look at components in Angular 5. Components play a vital role in the development of Angular 5 Application. So, first-of-all, we will learn what are components? How to add a component in Angular 5 project? How to add a nested component?
Previous Tutorials of Angular 5 Series
Let’s start to learning about Angular 5 components.
What is a component in Angular 5?
Components are the basic building block of the Angular application. Everything we do in the Angular application is a component. Because Angular is a component-based framework. Moreover, components are classes and these classes interact with HTML file of the component.
How Does Component work in Angular 5?
Let’s see how does component work.
Note: – I will not create a new project in this tutorial. I will use that project which we have created in the previous tutorial.
When we create a new project using Angular CLI command, it creates a component with the name of “App”. This is the by default component which contains the following files.
- component.css
- component.html
- component.spec.ts
- component.ts
- module.ts
If you open up the app.module.ts file, this file has some code as you see below.
Line # 1 to 5: these are some libraries which import.
Line # 8: this is the declarative part. It contains the AppComponent variable, which we have already imported above. This becomes the parent component.
Note: – As you “@NgModule” in line # 7. We will discuss it later in this series.
How to does Component flow work when you run your project.
When you run your project using ng serve command, first-of-all, it will execute the Index.html file which you see below.
As you see there is only one tag <app-root></ app-root > inside the body tag. This is the root tag which is created by the Angular by default. This root tag has the reference in the main.ts file.
line # 4, AppModule is imported from the app.module. Let’s see App.Module.ts file below.
line # 6, you will see the AppComponent is the name given. And this AppComponent has the reference of the app.component .ts file. Let’s see, App.Component.ts file.
So, as you see the above code. This file contains three parts. Template, Class, Decorator.
- Template: This part defines User-Interface which contains HTML, Directives, and etc.
- Class: This part contains the logic of the application. It’s just a class like a class in any other OOP language such as C# and etc. This part contains the code required for the template.
- Decorator: This part is used to add the metadata for the class.
Line # 1: Angular Core is imported.
Line # 3 to 7: This is the decorator part.
- line # 4: a tag which one is placed in Index.html file.
- line # 5: this is the HTML file reference.
Let’s see the HTML file. Just go to folder structure and open app folder and then you will see the file with the name “app.component.html”. You will see the below code in this file And this file has only HTML code.
- line # 6: this is the style sheet reference.
Line # 8: This is the class part of app.component.ts file.
How to Create a New Component in Angular 5?
Angular CLI (Command Line Interface) provides us a command to create a new component. Let’s see how to create a new component.
Open your terminal in VS Code and run the below command.
- ng generate component Home
or you can use this below short one
- ng g c Home
then you will see the output in your command terminal as below in the screenshot.
Now, if you go to the folder structure, then you will see a new folder “Home” under the App folder. And if you open the home folder, then you will see the below 4 files.
- home.component.css: This file contains styles for the home component.
- home.component.html: This file contains the HTML for the home component.
- home.component.spec.ts: This file is used for unit testing.
- home.component.ts: This file is used for Modules, Properties, and etc.
When you create a new component using Angular CLI, there are some following changes are added in app.module.ts file.
- import { HomeComponent } from ‘./Home/home.component’;
- NewCmpComponent
Let’s see home.component.ts file.
As you see the declarative part contains the selector called “app-home” and TemplateUrl and StyleUrls.
- templateUrl: see the component.html file and this file contains the below code.
- styleUrl: this file contains nothing because we don’t need to add styles at this time.
- selector: app-home
Let’s run your project and see the result. You will see the content getting displayed from the app.component.html file but will not see anything related to home component getting displayed.
How to add Nested Component
Now, just copy your “app-home” selector from home.component.ts and paste into the app.component.html file as below.
Now, if you will run your project, then you will see the expected result from both of the components.
Leave a Reply