How to create and manipulate a component in Angular

In Angular, the creation and use of components are fundamental for building user interfaces. Below are the basic steps to create and use a component in Angular:

1. Create a Component

Use the Angular CLI to generate a new component or manually create the necessary files.

Using Angular CLI

ng generate component component-name

Manually

Manually create the "component-name.component.ts", "component-name.component.html", "component-name.component.css", and "component-name.component.spec.ts" files (for testing).

// component-name.component.ts
import { Component } from '@angular/core';

@Component({

   selector: 'app-component-name', // HTML tag name to use the component
   templateUrl: './component-name.component.html',
   styleUrls: ['./component-name.component.css']
})
export class ComponentNameComponent {
   // component logic goes here
}

2. Define the HTML Template

<!-- component-name.component.html -->
<div>
   <h1>My New Component</h1>
   <p>Welcome to Angular!</p>
</div>

3. Use the Component in Another Component or Template

Using the Component in Another Component:

// app.component.ts (or any other component)
import { Component } from '@angular/core';

@Component({
   selector: 'app-root',
   template: `
     <h1>My Angular Application</h1>
     <app-component-name></app-component-name> <!-- using the component -->
   `,
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   // main component logic goes here
}

Using the Component in an HTML Template:

<!-- app.component.html (or any other HTML template) -->
<h1>My Angular Application</h1>
<app-component-name></app-component-name> <!-- using the component -->

4. Register the Component in the Module

If you generated the component using the Angular CLI, the CLI will have already automatically registered the component in the corresponding module. Otherwise, you will need to do this manually.

// component-name.module.ts
import { NgModule } from '@angular/core';
import { ComponentNameComponent } from './component-name.component';

@NgModule({
   declarations: [ComponentNameComponent],
   // ... other modules and configurations
})
export class ComponentNameModule {}

5. Add to Main HTML

Add the component tag to the main HTML, usually next to the "<router-outlet>" tag.

<!-- app.component.html (or other main HTML) -->
<router-outlet></router-outlet>
<app-component-name></app-component-name>

Important note

The component name in the "selector" should start with "app-" by default, but you can configure it according to your preference.

By following these steps, you will have created, registered and used an Angular component. This modular approach makes building user interfaces more organized and scalable. Make sure you understand the concepts of modules, services, and dependency injection, as they are fundamental parts of Angular development.