Components in Angular 8

Introduction

Angular is a popular framework for building web applications. It allows developers to create highly interactive and dynamic user interfaces. At the heart of Angular applications are components, which act as building blocks for the UI. Components help organize the application into smaller, reusable pieces, making development efficient and manageable.

In this article, we will discuss components in Angular 8, how to create them, use them, and work with child components.

Creating a Component in Angular 8

Components in Angular 8 are created using the Angular CLI (Command Line Interface). Each component consists of three key parts:

1. HTML Template: Defines the structure and layout of the view.
    
2. TypeScript File: Contains the logic and data binding of the component.
    
3. CSS File: Handles the styling of the component.

Here is how you can create a new component:

1. Open your Angular project directory in the terminal.
 

2. Run the following command to create a new component:

ng generate component component-name

Replace component-name with the desired name of your component. For example:

ng generate component user-profile

This command will create a new folder named user-profile containing the following files:

• user-profile.component.ts
   
• user-profile.component.html
   
• user-profile.component.css
   
• user-profile.component.spec.ts (for testing purposes)
   

3. The user-profile.component.ts file will look like this:

import { Component } from '@angular/core';
@Component({
  selector: 'app-user-profile',
  templateUrl: './user-profile.component.html',
  styleUrls: ['./user-profile.component.css']
})
export class UserProfileComponent {
  userName: string = 'John Doe';
  userAge: number = 25;
}

4. Edit the HTML template (user-profile.component.html) to define the component’s structure:

<div class="profile">
  <h2>User Profile</h2>
  <p>Name: {{ userName }}</p>
  <p>Age: {{ userAge }}</p>
</div>

5. Add some styles in user-profile.component.css:

.profile {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  width: 200px;
}
h2 {
  color: #007bff;
      }