Angular - Understanding Component

In this article, we are going to talk about components in Angular.

As we know, a component is the basic building block of Angular, which means that an Angular application is a collection of components, and one component is responsible for handling one view or part of the view.

A component is nothing but a simple typescript class which contains the following things­,

• Typescript Class
• HTML template/Template URL
• @Component decorator with metadata.

So in this article, we will learn about the component. We will create one component step by step and display a message in the browser. Please note that I have downloaded the required files to run the Angular application from the Angular official website --  you can download them from my GitHub repository using below link.

https://github.com/mahesh353/AngularProjectFiles

Now, follow the below steps. 

Step 1 

Create one typescript file and name it as app.component.ts and paste the below code

import { Component } from "@angular/core";
//@Component is a decorator which is present in @angular/core package
// so to use that I have import that package at the top.
// in @Component decorator I have used two  metadata tags
// selector - this is use to give the name to component so that we can use that name as directive
// template - this is used to specify the html template
// templateUrl - we can use this if we are referencing the html written in other file
@Component({
    selector: 'my-app',
    template: '<h1>Welcome to C# Corner</h1>'
})
export class AppComponent {

}

In the above code, I have created one class AppComponent using the class keyword like other object-oriented languages, And I have used the export keyword in front of the class declaration which means that other modules can easily use this component by importing it. See the below code snippet.

export class AppComponent {
}

To make this class an Angular component we need to decorate the above class using the @Component decorator which is present in the @angular/core package. That’s why we need to import @angular/core as well using the below code snippet.

import { Component } from "@angular/core";

 In @Component({}) I have used selector and template metadata tags. Selector metadata tag is used to specify the directive name for that component, and template metadata tag is used to specify the .html template where I have added only one h1 tag.

Check the comments present in the code:

@Component({
    selector: 'my-app',
    template: '<h1>Welcome to C# Corner</h1>'
})

Now, once the component is created we need to declare that component as a part of the module.

Step 2

Open app.module.ts and paste the below code,

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule],
  //we have declared the AppComponent, by declaring component here we are making the app.component as a part of AppModule
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {
}

In the above code, I have declared the component in module, in the declaration section.

Now, to run the application follow the below steps:

1. First, install the required node modules in your application using
   
   > npm install

2. And run the code using
   
   >npm start

You’ll get the below output screen.


But here you can see in the component code I have written HTML code inside the .ts file. It will work but it has some limitations.

1. We are mixing up typescript code with the HTML code
2. We won’t get any intelligence support

So, to overcome the above limitations we will put HTML code in a separate HTML file and link that HTML file to AppComponent using the templateUrl metadata. See the below code snippet.

@Component({
    selector: 'my-app',
    templateUrl: './app/app.component.html'
})
export class AppComponent {
}

Run the code again and you will get the same output.

In the next article, we will learn about different metadata attributes/tags in a component, including styles, styleUrls, interpolation, and two-way data binding.

I hope this will help you.

Thanks.