Post
Ask Question

Angular For Beginners - Part Two - Overview Of Component

In this following article, I will explain about components in Angular and their usage and we will have a demo on how to create a component. Before we get started with Angular components, you can have an overview of the basics of Angular from the following link.
 

Components

 
Components are the most important basic UI building blocks for an Angular project. They are used to design and build an application. Every Angular app contains at least one component and it is known as the parent component that is created along with creating a new Angular project. Or, we can say, it is a root component. The parent component will have the file structure that consists of the following files by default on creating an app.
  • app.component.css
  • app.component.html
  • app.component.spec.ts
  • app.component.ts
  • app. module.ts
  • app-routing.module.ts

    The app-routing.module.ts file is an exception. If the user selects Angular routing on the project setup, the files will be created and added to the files folder.
The default component will have these files as mentioned above. Let’s take a look at the usages of the files in the folder.
  • app.component.css => CSS file for the styling purposes.
  • app-cmp.component.html =>the HTML file is created.
  • app -cmp.component.spec.ts =>this file is used for unit testing.
  • app -cmp.component.ts =>in this file we can define module, properties.

Creating a new component

 
First, we need to create a new Angular application. The Angular CLI has a command to create a user-defined component. The component which is created by default is known as parent and the next components which are created by us are the child components. Now, we will create a new Angular application and a new child component. For creating a new Angular application, we can use the following command.
 
ng new component
 
Overview Of Component
 
For creating a child component, we can use the following command.
 
ng g c child
 
Overview Of Component
 
The mentioned above command is used to create a child component. We can open up the app.module.ts file. In this app.module.ts file, we can see some library files which are imported automatically when we create components. In some cases, we need to manually import the libraries. One of such scenarios is while using forms. We will see about Forms later in an upcoming article. 
  1. import { BrowserModule } from '@angular/platform-browser';  
  2. import { NgModule } from '@angular/core';  
  3. import { AppRoutingModule } from './app-routing.module';  
  4. import { AppComponent } from './app.component';  
  5. import { ChildComponent } from './child/child.component';  
  6. @NgModule({  
  7.    declarations: [  
  8.       AppComponent,  
  9.       ChildComponent  
  10.    ],  
  11.    imports: [  
  12.       BrowserModule,  
  13.       AppRoutingModule  
  14.    ],  
  15.    providers: [],  
  16.       bootstrap: [AppComponent]  
  17.    })  
  18. export class AppModule { }  
Overview Of Component
 
In this app.component.html, we can see that it has the HTML code and the variable title inside of curly braces. It gets replaced with the value which is present in the app.component.ts file. If you open the app.component.ts file, you can see in the class file that the application name is assigned to the title. This is known as binding. We can have a discussion about binding in an upcoming article.
  1. <!--The content below is only a placeholder and can be replaced.-->  
  2. <div style="text-align:center">  
  3.     <h1>  
  4. Welcome to {{ title }}!  
  5. </h1>  
  6.     <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">  
  7.     </div>  
  8.     <h2>Here are some links to help you start: </h2>  
  9.     <ul>  
  10.         <li>  
  11.             <h2>  
  12.                 <a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a>  
  13.             </h2>  
  14.         </li>  
  15.         <li>  
  16.             <h2>  
  17.                 <a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a>  
  18.             </h2>  
  19.         </li>  
  20.         <li>  
  21.             <h2>  
  22.                 <a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a>  
  23.             </h2>  
  24.         </li>  
  25.     </ul>  
  26.     <router-outlet></router-outlet>  
Overview Of Component
  1. import { Component } from '@angular/core';  
  2. @Component({  
  3.    selector: 'app-root',  
  4.    templateUrl: './app.component.html',  
  5.    styleUrls: ['./app.component.css']  
  6. })  
  7. export class AppComponent {  
  8.    title = 'component';  
  9. }  
Overview Of Component
 
Now, we will compile the project and let’s see the output in the browser. Use the following command in terminal and view the output in the browser.
 
ng s -o
 
Overview Of Component
 
Now, we can see the output and information provided in the parent component is displayed. Now, let us open the child.component.html file. We can see a line of a code which is saying in a tag, child works.
 
Overview Of Component
 
Here, we need to include the selector child component inside of root component so that the content of child component is displayed after the parent component, for that the selector child component is included inside the parent component like mentioned below and we can see the output again showing that the child component is now working.
  1. <!--The content below is only a placeholder and can be replaced.-->  
  2. <div style="text-align:center">  
  3.     <h1>  
  4. Welcome to {{ title }}!  
  5. </h1>  
  6.     <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">  
  7.     </div>  
  8.     <h2>Here are some links to help you start: </h2>  
  9.     <ul>  
  10.         <li>  
  11.             <h2>  
  12.                 <a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a>  
  13.             </h2>  
  14.         </li>  
  15.         <li>  
  16.             <h2>  
  17.                 <a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a>  
  18.             </h2>  
  19.         </li>  
  20.         <li>  
  21.             <h2>  
  22.                 <a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a>  
  23.             </h2>  
  24.         </li>  
  25.     </ul>  
  26.     <app-child></app-child>  
  27.     <router-outlet></router-outlet>  
Overview Of Component
 
Overview Of Component
 
I hope the beginners will have an understanding of what an Angular component is and how it can be used. In my next article, we will be covering data binding. Please comment below if you have to say something. This will help me to improve in the next article.
 


Similar Articles