Overview

Angular, a powerful front-end framework developed by Google, is renowned for its component-based architecture. Components lie at the heart of Angular development, providing a modular and organized way to build user interfaces. In this article, we will explore Angular components, how to create them, and their pivotal role in crafting dynamic web applications.

Understanding Angular Components

Components in Angular are reusable, self-contained building block of a web application's user interface. They encapsulate specific parts of the user interface, such as navigation bar, a product card, or a login form, and can be combined to create complex web applications. Each component comprises three core parts:

HTML Template:

This defines the structure and layout of the component's view. It contains the HTML markup and may include Angular-specific syntax for data binding and directives.

CSS Styles:

The component's styles are often defined within a separate CSS or SCSS file. This allows for component-specific styling, ensuring encapsulation and preventing style conflicts with other components.

TypeScript Class:

The TypeScript class defines the component's logic, behavior, and data. It handles user interactions, data manipulation, and communicates with services or APIs.

Creating an Angular Component without CLI (Command Line Interface)

We can create Angular component, with both CLI and without CLI. CLI eases our work of creating files, registering component. but if you want full control like creating own directory structure then you should do it without CLI.

Step 1: Create a Component Directory Structure

Angular components are typically organized within a dedicated folder. Let's create a folder for your component, e.g., my-component. Inside this folder, create the following files:

• my-component.component.ts: This file will contain the TypeScript code for your component.
• my-component-component.html: This file will store the HTML template for your component.
• my-component.component.css: This file is where you can define the styles for your component.

Step 2: Write Component Code

Now, let's write the Typescript code for your component in my-component.component.ts. The code should look something like this:

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent {
  // Your component logic goes here
}

Here's an explanation of each line:

• import { component } from ‘@angular/core’; = This line imports the Component decorator from the @angular/core package, which is used to define Angular components.
• @Component({ … }) = This is a decorator that defines the metadata for your component. It specifies the component's selector, HTML template, and style file.
• selector: ‘app-my-component’ = This line sets the component's selector, which will use to embed the component in your application's HTML.
• templateUrl: ‘./my-component.component.html’ = This specifies the path to the HTML template file for your component.
• styleUrls: ['./my-component.component.css'] = This defines the styles for your component.
• export class MyComponentComponent { … } = This is the class that represents your component. You can define the component's logic within this class.

Step 3: Create the Component's HTML template

In my-component.component.html, you should create the HTML template for your component. For example:

<div>
  <h1>Welcome to My Component!</h1>
  <!-- Your component's content goes here -->
</div>

This HTML code will be rendered as the user interface of your component.

Step 4: Add Component Styles

In my-component.component.css, you can define the styles for your component, ensuring that it looks and behaves as desired.

Step 5: Register the Component

In Angular, components belong to modules. By default there is an AppModule for the angular application which serves as the root module. It is an TypeScript file found in src directory as app.module.ts name. We need to register our component in this app module by importing it and giving its entry in declarations array. Here's an example of the app-module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MyComponentComponent } from './my-component/my-component.component'; // Import your component

@NgModule({
  declarations: [
    MyComponentComponent // Declare your component here
  ],
  imports: [BrowserModule],
  bootstrap: [MyComponentComponent] // Set your component as the root component
})
export class AppModule { }

Here's the explanation of each line:

• import { NgModule } from ‘@angular/core’; = Import the NgModule decorator from Angular's core module.
• import { BrowserModule } from ‘@angular/platform-browser’; = Import the BrowserModule, which is required for running Angular applications in a browser.
• import { MyComponentComponent } from ‘./my-component/my-compnent.component’; = Import our component to include it in the module.
• @NgModule( { … }) = This is the decorator for defining Angular modules. It includes various properties:
  • declarations = An array where you declare your components. In this case, declare MyComponentComponent.
  • imports = Imported required modules. BrowserModule is necessary for running your application in a browser.
  • bootstrap = Specify the root component. Here, we set MyComponentComponent as the root component.

Step 6: Include the Component in HTML

To display your component in your application, add its selector to your main HTML file. For instance:

<app-my-component></app-my-component>

This line includes your component within the application's HTML, and it will be rendered when you run your application.

Creating an Angular Component with CLI (Command Line Interface)

To create an Angular component, you can leverage the Angular CLI (Command Line Interface), which simplifies the process. Follow these steps:

Step 1: Open Your Terminal

Open your terminal or command prompt on your computer.

Step 2: Use Angular CLI to generate a Component

Run the following command to generate a new component:

ng generate component component-name

Replace component-name with the desired name for your component. Angular CLI will create the necessary files and folder structure for the component.

Step 3: Explore the Generated Files

After running the command, Angular CLI generates the following files for your component:

• component-name.component.ts: This TypeScript file contains the component's logic and behavior.
• component-name.component.html: The HTML template defines the component's structure.
• component-name.component.scss (or .css): The stylesheet file for component-specific styles.

Step 4: Edit Your Component

You can now open the generated component files and customize them to suit your needs:

• Modify the HTML template to define the component's view.
• Add styles to the component's stylesheet.
• Update the TypeScript class to include the component's logic.

Step 5: Use Your Component in Other Parts of the Application

To use your component in other parts of your Angular application, you need to add its selector to another component's template. For example:

<app-component-name></app-component-name>

This includes your component in the template of another component, making it visible and functional within the application.

Types of Selectors?

Selectors define and place components within an application's user interface. Selectors are crucial for connecting components to the DOM (Document Object Model) and rendering them in the desired location. There are three main types of selector - we can use selector as an HTML tag, HTML attribute, CSS class.

Element Selector

Element selectors are perhaps the most intuitive and commonly used type of selector in Angular. They associate a component with an HTML element using a custom tag. This means that you can include the component within your templates by simply adding the component's tag within the HTML.

Suppose you have a component called app-header. To include it in your template, you would use the following code:

<app-header></app-header>

Element selectors are highly suitable for building self-contained and reusable components. They are particularly effective when you want to create custom, encapsulated user interface elements.

Attribute Selector

Attribute Selectors, as the name suggests, target elements based on the presence of a specific attribute. Angular's attribute selectors are denoted by square brackets in the selector field of component class file and these selectors can be applied to existing HTML elements in your templates. 

consider a component named `login'.

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

@Component({
  selector: '[app-login]',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {

}

selector: ‘[app-login]’ - component selector is wrapped inside square brackets to use component selector as attribute selector.

Now we can use this as below:

<div app-login>

Attribute selectors are particularly helpful when you need to add custom functionality or behavior to specific HTML elements without introducing new tags.

Class Selector

Class selector, the final type of Angular selector, match elements based on their CSS class names. In Angular, class selectors are prefixed by a dot (period) in selector field of component class like selector: ‘.app-login’. 

Let's do the changes to login component to work as class selector. Below is the template code:

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

@Component({
  selector: '.app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {

}

selector: ‘.app-login’ - Here we preceded a dot (period) in the name of component selector to turn this into class selector.

Now you can use this class selector in your HTML template as follows:

<div class='app-login'>