Angular Components

The Code Points May 23, 2022 0

In this article, We will learn about the Angular Components. It is subset of directives, Angular components are always coupled with a template. Only one component can be instantiated for each element in a template, unlike other directives. To be available to another component or application, a component must be part of a NgModule.

A component is an HTML template combined with a component class that controls a piece of the screen. Every component starts with a metadata object and a @Component decorator method. The metadata object details the interaction between the HTML template and component class. A component is basically anything that is visible to the user and may be reused multiple times within an application.

Angular Component = HTML Template + Component Class + Component Metadata

We use the TypeScript decorator @Component to change the definition of a class or function and add metadata to properties and function arguments.

• Selector: It is the element attribute that instructs Angular to construct and insert a component instance.
• Template: It's a type of HTML that informs Angular how to render content in the DOM.
• MetaData: This is more information for the Angular class. A decorator is used to define it.

HTML Template:

HTML template is just plain HTML with some Angular-specific syntax for communicating with the component class.

Class:

A component class is essentially a TypeScript class with properties and functions. Data is stored in properties, while the component's logic is contained in methods. This class will eventually be compiled into JavaScript.

Metadata:

Metadata is additional information about a component that is utilized by the Angular API to execute it, such as the location of the component's HTML and CSS files, selectors, providers, and so on.

Create New Angular Component using Angular CLI

You can manually create component files or use the Angular CLI tool. The Angular CLI reduces the development time. So, let's we create a new component with Angular CLI.

To create a component, use the CLI command below.

ng generate component <component name> 

OR

ng g c <component name> 

g stands for generate

c stands for component

All Angular CLI commands begin with ng, generate or g, component as an argument, and then the component name.

The following executes the ng g command to generate the todo component in VS Code.

The above command will create a new "todo" folder and app folder and create four files, as shown below.

Above, todo.component.css is the component's CSS file, todo.component.html is the component's HTML file, todo.component.spec.ts is the component's unit test file, and todo.component.ts is the component's class file.

Component Naming Convention

In Angular, all component files should have the following format:

<component-name>.component.<file-type>

A component file's name should begin with.component, followed by the component name and file type. For example, welcome.component.ts is the TypeScript file for our todo component. As you can see, the name conventions for all files in the todo component are the same. For further information, see the Angular Style Guide.

Now open the todo.component.ts file in VS Code and look at the code below.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-todo',
  templateUrl: './todo.component.html',
  styleUrls: ['./todo.component.css']
})
export class TodoComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

The todo.component.ts includes the following parts:

Component Class: The component class is TodoComponent. It has Angular API attributes and methods for interacting with the view. It is a lifecycle hook that implements the OnInit interface.

Component Metadata: @Component is a decorator that specifies the metadata for the component class specified below it. It is a function that can contain many component configurations. It tells Angular where to get the component's required files, as well as how to generate and render the component. Above the component class, all Angular components must have the @Component decorator.

The import statement obtains the necessary feature from Angular or other libraries. We can use exported members from external modules with import. The @Component decorator and the OnInit interface, for example, are both found in the @angular/core library. So, after importing them, we can use them.

Now, let's add a property and method in the component class, as shown below:

export class TodoComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  name: string = "Steve";

  todo(): void {
      alert("Hello " + this.name);
  };

}

In the component class, we've added the name property and the todo method. These will be used in the HTML template.

Remove the existing code from the todo.component.html file and replace it with the following code.

<div>
    Enter Your Name: <input type="text" value={{name}} /> <br />
    <button (click)="todo()">Todo!</button>
</div>

We used the name attribute in the {{}} interpolation to display its value in the above HTML template, and the todo() method as a click event. Learn more about it in the section on event binding.

Conclusion

In this article, We learned about the Angular Components. in next article we will learn about the Differences Between Angular And AngularJS.

You can also read about the Angular Architecture Overview, I think it is helpful to you. 

I hope this article helps you and you will like it.👍

If you have any doubt or confusion then free to ask in comment section.