Angular Component

Angular Component is the main building block to create the Angular Project. It is a TypeScript class that controls a portion of the user interface (UI) and interacts with the application logic. Components are the core of Angular’s component-based architecture, enabling developers to create modular, reusable, and maintainable code. You can create components through the Angular CLI command.

Concepts of an Angular Component

1. Component Class:

The component class contains the data and logic that defines how the component behaves. This class is written in TypeScript and typically includes properties and methods that are used in the template (HTML) to bind data and handle events.

2. Component Decorator:

The @Component decorator is used to define metadata for the component, such as its selector, template, styles, and more. This decorator tells Angular that the class is a component and provides information about how it should be processed.

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

@Component({
  selector: 'app-hello',
  templateUrl: './hello.component.html',
  styleUrls: ['./hello.component.css']
})
export class HelloComponent {
  title = 'Hello, World!';
}

Selector:

The selector is a string that identifies the component in the HTML template. It allows Angular to locate and render the component. The selector is used as a custom HTML tag within other templates.

call the component in another component HTML file

<app-hello></app-hello>

Template:

The template defines the HTML structure of the component. It can either be inline (within the @Component decorator) or in a separate file. The template can bind to the component’s properties and methods using Angular’s data binding syntax.

<h1>{{ title }}</h1>

Styles:

The styles define the appearance of the component. Like templates, styles can be included inline, in a separate file, or even globally across the entire application.

h1 {
  color: green;
}

ng generate component component-name

OR

ng g c component-name

After run this command 4 files are generated and 1 file is updated.

Suppose, You create users component.

ng g c users

then 4 files are generated

CREATE src/app/users/users.component.html (20 bytes)
CREATE src/app/users/users.component.spec.ts (619 bytes)
CREATE src/app/users/users.component.ts (272 bytes)
CREATE src/app/users/users.component.scss (0 bytes)

and One module file is updated
the updated file is a module file like app.module.ts

When module file is updated then component file is included in two section.
1) imported the component file like

import { UsersComponent } from './users/users.component';

2) Added component into declaration array.

@NgModule({
  declarations: [
    AppComponent,
    UsersComponent
  ], 

Now, You changed the content into users.component.html file.

<h1>Hello users!</h1>

Suppose, You want to create route for users component. There are two step to create the route.

Step1) Firstly open the route file and import the users component.
Example:- Now you are including users component into app-routing.module.ts file

import { UsersComponent } from './users/users.component';

Step2) Now, create the route into the Routes Array.

const routes: Routes = [
  {path:'users', component:UsersComponent},
];

Now, run the URL on the browser

http://localhost:4200/users

and output will be