Components in angular

Components are very important in angular. They are building blocks of an angular application. Components mostly contain a logical piece of code. You can define components using @component decorator.

A component consists of following points:

1. Metadata:

With @component decorator, you can specify metadata for a component. metadata provides information for a component that tells angular how to create, present and view a particular component.
With metadata you can provide the following information:
i) selector: This is like a custom-html tag which is used to load a particular component on any other HTML page.
ii) template: Using this you can specify inline HTML for a component.
iii) templateUrl: In templateUrl you can provide the relative path or absolute URL of a template file for a component. If templateUrl is used, do not use inline HTML using a template.
iv) styles: Using styles you can specify CSS for your HTML of that component.
v) styleUrls: You can load external CSS files by using styleUrls property.

2. Class:

Class contains properties and methods. Class is defined using TypeScript language.

3. Template:

Template is used to define a component view. A template contains HTML that tells angular how to present or render a particular component.

Example of a component in angular:

When any new angular application is created, by default angular creates component called AppComponent.
You can create a new application in angular using following command

ng new first-app

where first-app is application name which you can change.

Below you can see related files of AppComponent.

Metadata:

In AppComponent following metadata is given:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

In metadata, the following configuration has set:
selector: app-root is set as a selector.
templateUrl: external URL is provided where HTML code is written.
styleUrls: external URL is provided where CSS code is written.

Class:
In AppComponent class can be set as follows:

export class AppComponent {
  title = 'Devconquer';
}

Here in AppComponent class, title property is set and its value is assigned.

Template:
From component metadata, an external HTML file template is provided.

Put following code into app.component.html file:

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>

In this code, title property’s value is accessed.

Now run your project using ng serve and you will see following output:

How to create a component?

You can create a new component using following command:

ng generate component user

where “user” is component name which you can give as you want.

When you create a new component with using command all related files for components get created by angular-cli and also that component name gets declared in AppModule.
Here, in our case when we created a user component that component was declared automatically by angular-cli.
You can see below how our UserComponent is declared in AppModule.

You can now check UserComponent files and what code is present in each of them.

To use UserComponent, all you have to do is call the selector <app-user> into app.component.html file.

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>

<app-user></app-user>

Then run your project using ng serve command to see output:

Conclusion:

From this tutorial, you learned information about the component, how to create a new component, etc. If you have any questions regarding components in angular, you can ask me by commenting below.

See also:

Services in angular
*ngFor in angular
template vs templateUrl
CRUD operations in angular

Leave a Reply

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