Angular Component

Angular Component

Angular Component

As we know already, the component is a view in single page application, which user sees on browser. Let’s take a look below to understand it :


Angular Component


 



As you can see in above image, we combine different components to create a reactive single page application. Each component has it’s own purpose like Navigation Component, Item List Component, Product Description Component etc.

It’s totally up to you on how you divide your application into components.

Let’s understand the app component

The “app.component.ts” is the default component. We will look inside this component and understand it’s different parts.

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
});
export class AppComponent {
}


@Component – The decorator or annotation which tells the angular CLI on how to process the type script class. This tells that current class should be used as a component.

The @Component has different properties as below :

  • selector – It defines the name of the HTML tag where the component will live.
  • templateUrl – The name and location of the template file.
  • styleUrls – The array of style sheet files.

export
– Adding this keyword before class keyword allows you to use it anywhere else in your project.
class – A keyword which is used to create a class.

Now run the “hello-world” app by invoking the below command.

ng serve

Make sure your app is running on default port “4200”.

Let’s create a new component

So far we covered a lot about the component. It’s time to create your own component.

Step 1 : Create a new folder

Create a new folder under “hello-world/src/app” with the name “item-list”. We will create our new component inside this directory.

Step 2 : Create the component

We will create three files to create our complete component.

item-list.component.ts

import { Component } from '@angular/core'
@Component({
 selector: 'app-item-list',
 templateUrl: './item-list.component.html'
})
export class ItemListComponent {
}


item-list.component.html

<ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
</ul>


Step 3 : Add your component to AppModule

Your component is not ready to be used yet. You need to add your component to the app module. So open the app.module.ts file and add your component as below :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ItemListComponent } from './item-list/item-list.component';
@NgModule({
 declarations: [
   AppComponent,
   ItemListComponent
 ],
 imports: [
   BrowserModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

Now your component is ready to be used anywhere in your application. So let’s invoke your component.

Step 4 : Invoke the component

You can now invoke your component with the help of the HTML tab or component selector which we created in our custom component.

Now open the file ‘app.component.html’ and add the below tag.

<h3> Welcome to the Angular Application. We modified the App Component. </h3>
<br />
Custom Component : <br />
<app-item-list></app-item-list>

Verify the package or file structure.


App Component




After that you should be able to see our list as below :


Angular Component

Related Post

Leave a Reply

Your email address will not be published. Required fields are marked *