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 the 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 that 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:

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

3. Template:

The 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 a component called AppComponent.
You can create a new application in angular using the following command

ng new first-app

where first-app is the 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 the following code into the app.component.html file:

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

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

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

How to create a component?

You can create a new component using the following command:

ng generate component user

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

When you create a new component 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 the app.component.html file.

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

<app-user></app-user>

Then run your project using the ng serve command to see the 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
Routing in Angular
CRUD operations in angular

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments