DEV Community: Ayush Agarwal

A Practical Introduction to Reactive Forms in Angular

Ayush Agarwal — Sat, 05 Aug 2023 15:40:30 +0000

Forms are an essential component of any web application or mobile application. Whether it is a login page, search bar, or filters, all involve using forms. They facilitate user interaction and data collection, making them a crucial part of the user experience.

In web applications, forms are of two types, Template Forms, and Reactive Forms. This blog will focus on exploring and understanding Reactive Forms in the context of Angular.

Introduction

This will be the first blog in our Reactive Forms in Angular Series. In this series, we will explore the power of reactive forms and how they can significantly enhance the form-handling capabilities of your Angular applications. You've come to the right place if you are new to or want to deepen your understanding.

Setting up the Project

Before jumping straight into forms, let’s ensure we have the basic project setup. Ensure you have Angular CLI installed. not, you can install it using npm. Once Angular CLI is ready, create a new Angular project using the following command:

Project Creation using Angular CLI

ng new my-reactive-forms-project
cd my-reactive-forms-project

We must import and set up the necessary modules to use Reactive Forms in your project. Open the app.module.ts file and import the ReactiveFormsModule from @angular/forms:

import { ReactiveFormsModule } from '@angular/forms';

Next, add ReactiveFormsModule to the imports array in the @NgModule decorator:

@NgModule({
  imports: [
    // other imports...
    ReactiveFormsModule
  ],
  // other declarations and providers...
})
export class AppModule { }

Generating the Login Form Component

To generate a new component for the login form, use the Angular CLI:

ng generate component login

Importing the Login Form Component in `app.component.html`

Open the app.component.html file, and let's add the newly generated login component to the main app component's template:

<div> 
    <app-login>
    </app-login> 
</div>

Creating the Login Form

We will keep things simple for this blog to help you understand better. Let us create a simple login form using reactive forms.

Login Component File

Now, let's work on the login form using Reactive Forms. Open the login.component.ts file and add the following code:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

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

  ngOnInit() {
    this.loginForm = new FormGroup({
      email: new FormControl('', [Validators.required, Validators.email]),
      password: new FormControl('', Validators.required)
    });
  }

  onSubmit() {
    // Handle form submission here
    if (this.loginForm.valid) {
      console.log(this.loginForm.value);
      // Additional logic to authenticate user or 
      // perform other actions
    }
  }
}

Note: Reactive forms in Angular revolve around two key classes: FormGroup and FormControl. A FormGroup represents a collection of form controls and a FormControl represents an individual form control, such as an input field.

In the code above, we use Angular's built-in Validators to apply form validation rules to the email and password fields.

Validators.required: This validator ensures that the field is mandatory and that the user must provide a value before submitting the form. If the user leaves the email or password field empty, this validator will trigger an error message.
Validators.email: This validator checks if the entered value in the email field is in a valid email format. If the user enters an invalid email address, this validator will display an error message.

Template Integration and Adding Validation Messages

Let's integrate the Reactive Form into the login.component.html template and display validation messages:

<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" formControlName="email">
    <div *ngIf="loginForm.get('email')?.invalid && loginForm.get('email')?.touched">
      <div *ngIf="loginForm.get('email')?.errors?.['required']">Email is required.</div>
      <div *ngIf="loginForm.get('email')?.errors?.['email']">Invalid email format.</div>
    </div>
  </div>
  <div>
    <label for="password">Password:</label>
    <input type="password" id="password" formControlName="password">
    <div *ngIf="loginForm.get('password')?.invalid && loginForm.get('password')?.touched">
      <div *ngIf="loginForm.get('password')?.errors?.['required']">Password is required.</div>
    </div>
  </div>
  <button type="submit" [disabled]="loginForm.invalid">Login</button>
</form>

Reactive Forms in Action

It's time to run our Angular application. Open a terminal or command prompt in the project root directory and execute the following command:

ng serve

Once the build process is complete, you can access the application by navigating to http://localhost:4200/ in your web browser. You should now see the login form displayed on the page.

As you use the login form, it enforces the validation rules we set earlier. If you try to submit the form without entering valid email and password values, validation messages will guide you. Once you provide valid values, the submit button will enable login.

Conclusion

In this blog, our primary focus was introducing Reactive Forms in Angular and building a functional login form. We intentionally kept the CSS styling minimal to prioritize the core concepts.

In future blogs, we will dive deeper into custom validations, form submission handling, and dynamic forms and explore additional powerful features of Reactive Forms.

Lastly, Your support keeps me going, and I give my 100 percent to these blogs! If you’ve found value, consider fueling the blog with a coffee ☕️ donation at the below link.

Buy me a COFFEE!

Thank you! 🙏

Simplifying ENUMS in Angular TypeScript Projects: Enhance Code Clarity

Ayush Agarwal — Sun, 30 Jul 2023 13:00:26 +0000

Introduction

ENUMS, short for enumerations, is a powerful feature in TypeScript that allows developers to define a set of named constants. These constants are given a meaningful identifier, making the code readable and maintainable. ENUMS are particularly valuable in Angular projects where clean code and maintainability are essential for building scalable applications. This blog will explore how to use ENUMS effectively in Angular TypeScript projects to enhance code clarity and avoid common pitfalls.

Declaring ENUMS in Angular

In TypeScript, ENUMS are declared using the enum keyword. Let's take a look at a simple example:

enum Color {
  Red,
  Green,
  Blue
}

In this example, we have defined an ENUM named Color with three members: Red, Green, and Blue. By default, the values of ENUM members are assigned incremental numeric values starting from 0 (Red is 0, Green is 1, and Blue is 2). However, we can explicitly set the values as well:

enum Color {
  Red = '#ff0000',
  Green = '#00ff00',
  Blue = '#0000ff'
}

This approach is practical when using ENUMS to represent string-based values.

Best Practices for Naming ENUMS

When naming ENUMS, it's essential to use clear and meaningful names that represent the set of constants it contains. Plural names are usually preferred to indicate that an ENUM represents multiple options. Additionally, use PascalCase for ENUM names and singular names for ENUM members:

enum Status {
  Active,
  Inactive,
  Pending
}

Benefits of Using ENUMS

ENUMS provides several benefits that contribute to clean and maintainable code in Angular projects:

Enhancing Code Readability and Self-Documentation: ENUMS makes the code more expressive by replacing obscure numeric or string literals with meaningful constants. For example, using ENUMS for representing status values:

enum Status {
  Active,
  Inactive
}

// Instead of using '0' or '1', we use the ENUM members directly
const userStatus = Status.Active;

Avoiding Magic Numbers and String Literals: Magic numbers and string literals scattered throughout the code can be hard to understand and maintain. ENUMS help eliminates this issue by providing a descriptive and centralized way to manage constants:

const MAX_RETRY_ATTEMPTS = 3; // Magic number
enum RetryAttempts {
  Max = 3 // ENUM constant
}

Ensuring Type Safety: ENUMS in TypeScript offer type safety, preventing invalid values from being assigned to variables:

enum LogLevel {
  Info,
  Error
}

function logMessage(level: LogLevel) {
  // Only 'LogLevel' members are allowed as arguments
  console.log(level);
}

logMessage(LogLevel.Info); // Valid
logMessage('InvalidLevel'); // Error: Argument of type '"InvalidLevel"' is not assignable to parameter of type 'LogLevel'

Working with ENUMS in Angular Components

Using ENUMS in Angular components is straightforward and promotes consistency across the application. Here's how to import and use ENUMS in components:

Importing ENUMS into Angular Components: To use ENUMS in a component, you need to import them first:

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

enum LogLevel {
  Info,
  Error
}

@Component({
  selector: 'app-logger',
  template: `
    <div *ngIf="showInfo">
      Info Message
    </div>
    <div *ngIf="showError">
      Error Message
    </div>
  `
})
export class LoggerComponent {
  showInfo = false;
  showError = true;
}

Using ENUMS in Templates and Data Binding: You can directly use ENUMS in template expressions and data binding:

<!-- app.component.html -->
<app-logger></app-logger>

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

enum LogLevel {
  Info,
  Error
}

@Component({
  selector: 'app-logger',
  template: `
    <div *ngIf="logLevel === LogLevel.Info">
      Info Message
    </div>
    <div *ngIf="logLevel === LogLevel.Error">
      Error Message
    </div>
  `
})
export class LoggerComponent {
  logLevel = LogLevel.Error;
}

Real-World Examples of ENUMS Usage in Angular Components: Let's consider a practical example where ENUMS are used to manage the status of a task in a task management application:

enum TaskStatus {
  ToDo,
  InProgress,
  Done
}

interface Task {
  title: string;
  status: TaskStatus;
}

@Component({
  selector: 'app-task',
  template: `
    <div>
      {{ task.title }} - {{ taskStatusToString(task.status) }}
    </div>
  `
})
export class TaskComponent {
  @Input() task: Task;

  taskStatusToString(status: TaskStatus): string {
    switch (status) {
      case TaskStatus.ToDo:
        return 'To Do';
      case TaskStatus.InProgress:
        return 'In Progress';
      case TaskStatus.Done:
        return 'Done';
      default:
        return 'Unknown';
    }
  }
}

Best Practices and Conclusion:

Knowing When to Use ENUMS: ENUMS are suitable for situations where a fixed set of constants is required, such as status codes, error codes, or options for select dropdowns.
ENUMS vs. Constant Objects: Consider using ENUMS when you need a limited set of distinct values. For more complex scenarios or when working with data from external sources, constant objects might be more appropriate.
Performance Considerations: ENUMS are compiled into JavaScript objects, so using them doesn't introduce any significant performance overhead.

In conclusion, ENUMS is a valuable tool for improving code clarity and maintainability in Angular TypeScript projects. They help eliminate magic numbers and string literals while ensuring type safety.

Embrace ENUMS as part of your development toolkit and experience the benefits of code clarity firsthand. Happy coding!

Lastly, Your support keeps me going, and I give my 100 percent to these blogs! If you've found value, consider fueling the blog with a coffee ☕️ donation at below link.

Buy me a COFFEE!

Thank you! 🙏

Building a Simple CRUD Task Manager App with Angular: A Step-by-Step Guide for Beginners

Ayush Agarwal — Thu, 20 Jul 2023 14:11:50 +0000

Introduction

Welcome to a simple guide on building a CRUD (Create, Read, Update, Delete) Task Manager app using Angular! In this blog, we’ll walk you through creating a functional task management application that allows users to add, view, complete, and delete tasks. Whether you’re new to Angular or just looking to reinforce your skills, this tutorial will help you understand the basics of Angular, Tailwind CSS, and how they work together to create a sleek and efficient task manager.

Live View

Before we dive into the development process, feel free to check out the live view of the task manager app we’ll be building. Here’s the link to the live view, where you can interact with the app and get a feel for its functionalities.

Github Repo of the project.

Project Demo:

Prerequisites

Before we get started, make sure you have the following installed on your machine:

Node.js: Ensure you have Node.js installed, including npm (Node Package Manager).
Angular CLI: Install Angular CLI globally using npm by running the following command in your terminal:

npm install -g @angular/cli

Setting Up the Angular Project with Tailwind CSS

Setting up an Angular project with Tailwind CSS is an essential step in the development process. If you need a detailed guide on how to set up Tailwind CSS in your Angular project, refer to my blog post Integrating Tailwind CSS in Angular Project.

Following the instructions in the blog post will grate Tailwind CSS into your Angular project, enabling you to create stunning UI components.

Now that you’ve set up your Angular project with Tailwind CSS let’s build our task manager components and functionalities!

Creating the Navbar Component

In this section, we will create the Navbar. It will display the app title and any additional navigation links in the future.

Step 1: Generating the Navbar Component

To start, create a components folder, then use the Angular CLI to generate the Navbar component. Open your terminal or command prompt and run the following command:

ng generate component components/navbar

This command will generate a new “navbar component” inside your Angular project’s “components” folder. The Angular CLI will also create the necessary files and configurations for the component.

Step 2: Implementing the Navbar Template

Now that we have the Navbar component generated let’s add the HTML code to create the Navbar layout. Open the navbar.component.html file in the components/navbar folder and add the code below.

<!-- components/navbar/navbar.component.html -->
<nav class="flex items-center justify-between flex-wrap bg-indigo-400 p-4">
  <div class="flex items-center flex-shrink-0 text-white mr-6">
    <span class="font-semibold text-xl tracking-tight">Tasks</span>
  </div>
</nav>

In the above code, we’ve created a simple Navbar with a blue background color (bg-indigo-400) and white text (text-white). The Navbar contains the title "Tasks" which is the name of our task manager app. You can customize the styles and content of the Navbar as per your project requirements.

Step 3: Registering the Navbar Component

Next, we need to register the Navbar component in the Angular app to use it in other parts of the application. The angular CLI would have done this automatically when you generated the component. If not, open the app.module.tsfile in the src/app folder.

In the app.module.ts file, import the NavbarComponent and add it to the declarations array.

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { NavbarComponent } from './components/navbar/navbar.component'; // Import the NavbarComponent
@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent // Add the NavbarComponent to the declarations array
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: Using the Navbar Component

With the Navbar component registered, we can now use it in the main app component (app.component.html). Open the app.component.html file located in the src/app folder.

Replace the existing content in the app.component.html file with the following code:

<app-navbar></app-navbar>

The above code uses the <app-navbar></app-navbar> selector to include the Navbar component within the main app component. When you run the app, you should see the Navbar displayed at the top of the page titled "Tasks."

Congratulations! You’ve successfully created and integrated the Navbar component into your Angular app. In the following sections, we’ll build the app's task creation form and tasks. Keep following along to develop your task manager app from scratch!

Building the Task Creation Form

In this section, we will build the Task Creation Form component, which allows users to add new tasks to the task manager app. The form will include an input field for entering the task name and a button to submit the task.

Step 1: Generating the Task Creation Form Component

Let’s use the Angular CLI to generate the Task Creation Form component. Open your terminal or command prompt and run the following command:

ng generate component components/task-form

This command will generate a new component named “task-form”.

Step 2: Implementing the Task Creation Form Template

Open the task-form.component.html file located in the components/task-form folder.

Type in the code mentioned below.

<!-- components/task-form/task-form.component.html -->

<div class="container mx-auto py-10">
  <form class="w-full max-w-sm">
    <div class="flex items-center border-b-2 border-teal-500 py-2">
      <input
        [(ngModel)]="newTask"
        name="newTask"
        class="appearance-none bg-transparent border-none w-full text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none"
        type="text"
        placeholder="Add task"
      />
      <button
        type="button"
        (click)="addTask()"
        class="flex-shrink-0 bg-teal-500 hover:bg-teal-700 border-teal-500 hover:border-teal-700 text-sm border-4 text-white py-1 px-2 rounded"
      >
        Add
      </button>
    </div>
  </form>
</div>

We’ve created a simple form layout using Tailwind CSS classes. The form includes an input field bound to the newTaskproperty using Angular's two-way data binding [(ngModel)]. Users entering an input field will automatically update the newTask property in the component.

The form also has a “Add” button with a click event (click)="addTask()". When the user clicks the "Add" button, the addTask() method in the component will be called to add the new task to the tasks array.

Step 3: Implementing the Task Creation Form Component

Now let’s update the task-form.component.ts file located in the components/task-form folder to implement the functionality of adding tasks.

// components/task-form/task-form.component.ts

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

@Component({
  selector: 'app-task-form',
  templateUrl: './task-form.component.html'
})
export class TaskFormComponent implements OnInit {

  tasks: string[] = [];
  newTask: string = '';

  constructor() { }

  ngOnInit(): void {
  }

  addTask() {
    if (this.newTask.trim() !== '') {
      this.tasks.push(this.newTask);
      this.newTask = '';
    }
  }
}

In the component class, we have the tasks array to store all the tasks and the newTask property to hold the new task entered in the input field.

The addTask() method is called when clicking the "Add" button. It first checks if the newTask is not empty (by using .trim() !== ''). If the task name is not empty, it adds the new task to the tasks array using this.tasks.push(this.newTask). Finally, it resets the newTask property to an empty string to clear the input field.

Step 4: Using the Task Creation Form Component

Now that we’ve implemented the Task Creation Form component let’s use it in the main app component (app.component.html). Open the app.component.html file located in the src/app folder.

<!-- src/app/app.component.html -->

<app-navbar></app-navbar>
<app-task-form></app-task-form>

You will see the form to add the task upon saving.

In the next section, we’ll build the Task Display component to show the list of tasks.

Task List: Displaying the List of Tasks

In this section, we will create the Task List component to display the list of tasks added by users. The Task List component will receive the tasks array as input from the Task Form component and show each task in a simple card-like format.

Generating the Task List Component

Let’s use the Angular CLI to generate the Task List component.

ng generate component components/tasks-list

This command will generate a new “tasks-list” component inside your Angular project's “components” folder.

Passing Tasks from Task Form to Task List

In the task-form.component.html file, we must pass the tasks array to the Task List component using the [tasks]property binding.

<!-- components/task-form/task-form.component.html -->

<div class="container mx-auto py-10">
  <form class="w-full max-w-sm">
    <div class="flex items-center border-b-2 border-teal-500 py-2">
      <input
        [(ngModel)]="newTask"
        name="newTask"
        class="appearance-none bg-transparent border-none w-full text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none"
        type="text"
        placeholder="Add task"
      />
      <button
        type="button"
        (click)="addTask()"
        class="flex-shrink-0 bg-teal-500 hover:bg-teal-700 border-teal-500 hover:border-teal-700 text-sm border-4 text-white py-1 px-2 rounded"
      >
        Add
      </button>
    </div>
  </form>
</div>

<div>
  <app-tasks-list [tasks]="tasks"></app-tasks-list>
</div>

In the above code, we pass the tasks array from the Task Form component to the Task List component using property binding [tasks]="tasks". This ensures that the Task List component receives and can access the tasks array.

To receive the tasks array in the Task List component, we must define an @Input() property named tasks in the component's TypeScript file. Open the tasks-list.component.ts file,

// components/tasks-list/tasks-list.component.ts

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

@Component({
  selector: 'app-tasks-list',
  templateUrl: './tasks-list.component.html'
})
export class TasksListComponent {
  @Input() tasks: string[] = [];
}

In the above code, we’ve defined an @Input() property named tasks of type string[] in the Task List component. This property will receive the tasks array from the parent component (Task Form component).

Implementing the Task List Template

Open the tasks-list.component.html file located in the components/tasks-list folder.

<!-- components/tasks-list/tasks-list.component.html -->

<div *ngIf="tasks.length > 0" class="container mx-auto py-4">
  <div *ngFor="let task of tasks" class="w-1/4 bg-gray-100 p-4 mb-4 rounded-lg">
    <ul>
      <li class="text-gray-800">{{ task }}</li>
    </ul>
  </div>
</div>

In the above code, we’re using Angular’s *ngIf directive to check for any tasks in the tasks array. If there are tasks, the *ngIf condition evaluates to true, and the list of tasks will be displayed.

We use the *ngFor directive to loop through each task in the tasks array and display it within a rounded card-like container (bg-gray-100 p-4 mb-4 rounded-lg). The task name is displayed using the {{ task }} interpolation syntax.

BONUS CONTENT :

When using one component inside another component’s template, it’s crucial to ensure that the component being used is imported and declared before using it. This way, Angular knows the component's existence and can render it correctly.

Another way to do this would be to use modules at the component level and import these modules in app.module.ts.

Here’s the updated code for the app.module.ts file, ensuring that the TasksListComponent is imported before the TaskFormComponent:

// app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { TasksListComponent } from './components/tasks-list/tasks-list.component'; // Import Task List component
import { TaskFormComponent } from './components/task-form/task-form.component'; // Import Task Form component

@NgModule({
  declarations: [
    AppComponent,
    TasksListComponent, // Add Task List component to the declarations array before Task Form component
    TaskFormComponent // Add Task Form component to the declarations array
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

With this change, the Task List component will be imported and available before the Task Form component. This will prevent any errors related to components not found during the app’s compilation process.

Completing Tasks: Marking Tasks as Completed

This section will implement the functionality to mark tasks as completed in the Task List component. We’ll introduce a new Task interface to represent each task with a name and completed property. The completed property will track whether a task is marked as completed or not.

This will be some redundant work, and we could have done the interface logic from the beginning, but this blog's purpose is to help you understand how the project is enhanced and built while introducing new functionality.

Step 1: Creating the Task Interface

To represent each task, we’ll create a new interface named Task. This interface will be defined inside the tasks.interface.ts file in the src/app/constants folder.

It is a good practice to have interfaces or enums in the constants folder for a better code structure.

export interface Task {
  name: string;
  completed: boolean;
}

The Task interface has two properties:

name: represents the name of the task (a string).
completed: represents whether the task is completed or not (a boolean).

Step 2: Modifying Task Form Component

In the task-form.component.ts file, we need to modify the component to use the Task interface for tasks and update the addTask() method accordingly.

// components/task-form/task-form.component.ts

import { Component, OnInit } from '@angular/core';
import { Task } from '../../constants/tasks.interface';

@Component({
  selector: 'app-tasks-form',
  templateUrl: './tasks-form.component.html'
})
export class TasksFormComponent implements OnInit {
  tasks: Task[] = [];
  newTask: string = '';

  constructor() { }

  ngOnInit(): void {
  }

  addTask() {
    if (this.newTask.trim() !== '') {
      const newTask: Task = {
        name: this.newTask,
        completed: false
      };
      this.tasks.push(newTask);
      this.newTask = '';
      console.log(this.tasks);
    }
  }
}

In the updated code, we’ve imported the Task interface and changed the tasks array to be of type Task[]. When adding a new task using the addTask() method, we create a new Task object with the provided task name and set the completedproperty to false.

Step 3: Modifying Task List Component

Next, we need to modify the task-list.component.ts file to use the Task interface and implement the toggleCompleted() method to mark tasks as completed.

// components/tasks-list/tasks-list.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { Task } from '../../constants/tasks.interface';

@Component({
  selector: 'app-tasks-list',
  templateUrl: './tasks-list.component.html',
})
export class TasksListComponent implements OnInit {
  @Input() tasks: Task[];

  constructor() { }

  ngOnInit(): void {
  }

  removeTask(task: Task) {
    const taskIndex = this.tasks.indexOf(task);
    if (taskIndex !== -1) {
      this.tasks.splice(taskIndex, 1);
    }
  }

  toggleCompleted(task: Task) {
    task.completed = !task.completed;
  }
}

In the updated code, we’ve imported the Task interface and changed the tasks array to be of type Task[]. The toggleCompleted() method toggles the completed property of the task to mark it as completed or not completed based on its current state.

Step 4: Updating Task List Template

Finally, we need to update the task-list.component.html file to display the task name and add an icon to toggle the task's completion status.

<!-- components/tasks-list/tasks-list.component.html -->

<div *ngIf="tasks.length > 0" class="container mx-auto py-4">
  <div *ngFor="let task of tasks" class="bg-gray-100 p-4 mb-4 rounded-lg">
    <ul>
      <li
        [class.line-through]="task.completed"
        class="flex items-center justify-between text-gray-800"
      >
        {{ task.name }}
        <div class="flex items-center justify-end">
          <span (click)="toggleCompleted(task)" style="cursor: pointer">
            <svg
              class="h-8 w-8 text-green-500"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
              />
            </svg>
          </span>
        </div>
      </li>
    </ul>
  </div>
</div>

In the updated template, we use the [class.line-through] property binding to apply a strikethrough style to the task name if marked as completed (task.completed is true). The <svg> icon represents a checkmark icon, and when clicked, it calls the toggleCompleted() method to change the completion status of the corresponding task.

With this done, users can now toggle the completion status of tasks, making your app more interactive and useful. In the next section, we’ll implement the functionality to remove tasks from the list.

Removing Tasks: Deleting Tasks from the List

This section will implement the functionality to remove tasks from the task list. When users click the “remove” icon next to a task, that specific task will be deleted from the list.

Step 1: Implementing the Remove Task Function

In the tasks-list.component.ts file, we define a function removeTask(task: Task) function to handle task removal.

// components/tasks-list/tasks-list.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { Task } from '../../constants/tasks.interface';

@Component({
  selector: 'app-tasks-list',
  templateUrl: './tasks-list.component.html',
})
export class TasksListComponent implements OnInit {
  @Input() tasks: Task[];

  constructor() { }

  ngOnInit(): void {
  }

  removeTask(task: Task) {
    const taskIndex = this.tasks.indexOf(task);
    if (taskIndex !== -1) {
      this.tasks.splice(taskIndex, 1);
    }
  }

  toggleCompleted(task: Task) {
    task.completed = !task.completed;
  }
}

In the removeTask(task: Task) function, we receive the task object that needs to be removed from the tasks array. We find the index of this task using this.tasks.indexOf(task) and check if it exists (taskIndex !== -1). If the task exists in the array, we use splice() to remove it from the array.

Step 2: Updating Task List Template

Now, let’s update the task-list.component.html template to include the "remove" icon for each task and call the removeTask() function when the icon is clicked.

<!-- components/tasks-list/tasks-list.component.html -->

<div *ngIf="tasks.length > 0" class="container mx-auto py-4">
  <div *ngFor="let task of tasks" class="bg-gray-100 p-4 mb-4 rounded-lg">
    <ul>
      <li
        [class.line-through]="task.completed"
        class="flex items-center justify-between text-gray-800"
      >
        {{ task.name }}
        <div class="flex items-center justify-end">
          <span (click)="removeTask(task)" style="cursor: pointer">
            <svg
              class="h-8 w-8 text-red-500"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
              />
            </svg>
          </span>
          <span (click)="toggleCompleted(task)" style="cursor: pointer">
            <svg
              class="h-8 w-8 text-green-500"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
              />
            </svg>
          </span>
        </div>
      </li>
    </ul>
  </div>
</div>

In the updated template, we’ve added a “remove” icon represented by the <svg> element. When users click on this icon, it calls the removeTask(task) function with the corresponding task as an argument, effectively removing the task from the list.

Users can delete tasks as needed, making your app more dynamic and user-friendly.

That’s it. this, your super simple task manager application is complete now. Let’s see some possible ideas for enhancements to this application.

Future Enhancements: Taking Your Task Manager App to the Next Level

While you’ve successfully created a basic task manager app, there’s always room for improvement and additional features. Here are some ideas for future enhancements to make your app even more useful and user-friendly:

Task Categories and Filtering: Allow users to categorize tasks and provide filtering options to view tasks based on their categories. This can help users organize and manage their tasks more effectively.
Task Prioritization: Add the ability to set task priorities, such as high, medium, and low. Users can then sort tasks based on their priority levels.
Task Due Dates and Reminders: Enable users to set due dates for tasks and receive reminders or notifications to complete tasks on time.
Task Notes and Attachments: Allow users to add notes or attach files to tasks, providing additional context or resources related to each task.
User Accounts and Data Persistence: Implement user authentication and data persistence, so users can save their tasks across sessions and access them securely.
Drag and Drop Reordering: Implement a drag-and-drop feature to reorder tasks in the list, giving users greater control over the arrangement of tasks.
Task Sharing and Collaboration: Introduce task-sharing capabilities, allowing users to collaborate on tasks with others and assign tasks to team members.
Dark Mode: Offer a dark mode option to enhance user experience and reduce eye strain, especially during late-night usage.
Task Analytics and Insights: Provide users with visual analytics and insights on task completion rates, trends, and productivity statistics.
Mobile App Version: Develop a mobile app version of your task manager to extend its usability and reach to mobile device users.

Continuous improvement and innovation will keep your task manager app relevant and valuable to users.

Conclusion: Building a Feature-Packed Task Manager

This tutorial taught you how to create a task manager app from scratch using Angular. Starting with setting up the project with Tailwind CSS, you built the Navbar component, the task creation form, and the task display using the Task List component. You then added functionality to mark tasks as completed and remove tasks from the list.

With the flexibility of Angular and the power of Tailwind CSS, you have the foundation to expand further and customize your task manager app.

Congratulations on completing your task manager app!

Lastly, Your support keeps me going, and I give my 100 percent to these blogs! If you've found value, consider fueling the blog with a coffee ☕️ donation at below link.

Buy me a COFFEE!

Thank you! 🙏

Happy coding, and keep exploring the exciting possibilities of Angular development!

Demystifying the module.ts File: A Comprehensive Guide to Angular's Module System

Ayush Agarwal — Fri, 14 Jul 2023 13:50:13 +0000

Angular's module system is a fundamental building block for structuring robust and maintainable applications. At the heart of this system lies the module.ts file. This beginner-friendly guide will demystify the module.ts file and explore its role in organizing, configuring, and sharing components, services, and routes within an Angular project.

Let's dive in!

Introduction to Angular Modules

Angular modules are essential for organizing and managing applications. They group related components, services, and other artifacts. The module.ts file serves as the configuration hub for a module. It defines the module's components, imports, providers, and exports. The @NgModule decorator provides metadata for Angular to understand and process the module correctly. declarations list components, imports import functionality, providers define services, and exports make artifacts accessible to other modules. In the next section, we'll explore the module.ts file structure and create a new module.

Creating and Configuring a New Module

Creating a new module in Angular is a straightforward process. Let's walk through the steps in creating and configuring a module using the module.ts file.

Create a New Module To create a new module, use the Angular CLI command ng generate module module-name. This command generates a new folder containing a module.ts file.
Open the Module File in your preferred code editor. You'll notice that the file already contains some boilerplate code.
Configure the Module Within the module.ts file, locate the @NgModule decorator. This decorator is where you'll configure your module's properties.

Declarations: The declarations property is an array that should include the components, directives, and pipes specific to your module. Add any components of this module to the declarations array. For example:
```
declarations: [Component1, Component2, CustomDirective, CustomPipe]
```
Imports: The imports property allows you to import other modules depending on your module. These could be Angular modules or third-party libraries. Import the necessary modules and add them to the imports array. For example:
```
imports: [CommonModule, FormsModule, SharedModule]
```
Providers: If your module requires services or providers, you can define them in the providers property. This ensures that the services are available for injection within the module. For example:
```
providers: [DataService, AuthService]
```
Exports: The exports property enables you to make specific components, directives, or pipes available for other modules. Any exported artifacts can be accessed by importing the module that declares them. For example:
```
exports: [Component1, CustomDirective]
```
Use the Module To use the newly created module in your application, import it into the appropriate module or component that requires its functionality. In the importing module's imports array, add the imported module. This makes the module and its declared components, directives, and providers accessible within the importing module.

That's it! You have successfully created and configured a new module using the module.ts file. This allows you to encapsulate functionality, manage dependencies, and promote code reusability within your Angular application.

Troubleshooting and Common Issues

When working with Angular modules, you may encounter common issues. Here are some troubleshooting tips:

Circular Dependency Issues: Review module dependencies and refactor code to remove circular references.
Module Not Found or Import Errors: Double-check module paths and ensure correct imports.
Missing or Incorrect Declarations: Verify components, directives, and pipes are correctly declared and imported.
Module Configuration Order: Check the order of module imports and configurations, especially with dependencies.
Angular CLI Build Issues: Clean the project build artifacts using ng clean and ensure correct versions.
Debugging Techniques: Use console.log, browser console, or Angular's debugging tools to identify and debug issues.

Remember to systematically review errors, verify configurations, and leverage debugging tools for effective troubleshooting.

In the final section, we'll conclude our discussion and provide next steps for further exploration and learning.

Conclusion

Congratulations on gaining a solid understanding of the module.ts file in Angular projects! Here's a quick summary of what we covered and some next steps for you:

This article explored the module.ts file, which is vital in organizing and configuring Angular modules. We discussed its properties, including declarations, imports, providers, and exports, and how they help define a module's functionality.

Next Steps:

Experiment with module configurations and dependencies to gain hands-on experience.
Explore lazy loading to improve your application's performance.
Consider sharing modules as reusable libraries to contribute to the Angular community.
Stay updated with the latest Angular releases and module-related best practices.
Delve deeper into advanced module techniques like module preloading and dynamic imports.

Remember to consult official Angular documentation, engage with the Angular community, and explore additional resources to continue your learning journey.

Now, create well-structured, modular Angular applications using the power of the module.ts file.

Lastly, Your support keeps me going, and I give my 100 percent to these blogs! If you've found value, consider fueling the blog with a coffee ☕️ donation at below link.

Buy me a COFFEE!

Thank you! 🙏

Building Robust Angular Applications with TypeScript Interfaces: Best Practices and Examples

Ayush Agarwal — Thu, 06 Jul 2023 19:33:46 +0000

Understanding interfaces is crucial if you're an Angular developer looking to enhance your TypeScript skills. Interfaces are a crucial feature that allows you to define contracts and maintain code consistency. This blog explores the basics of interfaces, how to use them in Angular, and some best practices. Let's jump in!

Declaring Interfaces

When working with TypeScript, be it in Angular or any other framework, declaring interfaces is essential for defining the structure and behavior of objects. An interface is a blueprint that enforces specific properties and methods inside your code.

To declare an interface, use the interface keyword followed by the interface's name. Here's a simple example:

interface Car {
  speed: number;
  brand: string;
  honk(): void;
}

In this interface, we have defined a Car interface that requires objects to have a speed property of type number, a brand property of type string, and a honk method that takes no arguments and returns nothing (void).

To create an object that adheres to the Car interface, we can do the following:

const myCar: Car = {
  speed: 100,
  brand: "BMW",
  honk() {
    console.log("Beep beep!");
  }
};

Here, we create an object myCar that satisfies the Car interface. It has a speed property with a value of 100, a brand property with the value "Trin", and a honk method that outputs "Beep beep!".

By utilizing interfaces, TypeScript ensures that objects claiming to implement the Car interface possess the required properties and methods. This helps catch any inconsistencies or errors in object structures during compile time.

Interfaces can also be extended to create new interfaces that inherit properties and methods from existing interfaces. This allows for code reuse and a more modular approach to defining contracts.

The following section will explore optional and readonly properties within TypeScript interfaces, offering more flexibility and immutability options when defining object contracts.

Optional and Readonly Properties

In TypeScript interfaces, we can define optional and readonly properties, allowing for more versatile object contracts. Optional properties may or may not be present in an object, while readonly properties cannot be modified once assigned.

Let's examine how optional and readonly properties can be incorporated into TypeScript interfaces.

Optional Properties

We use the ? symbol after the property name to specify optional properties in an interface. For example:

interface Car {
  speed: number;
  brand: string;
  mileage?: number;
  honk(): void;
}

In the modified Car interface above, we introduced an optional property, mileage, denoted by the ? symbol. Objects implementing the Car interface can include or exclude the mileage property.

const myCar: Car = {
  speed: 100,
  brand: "Trin",
  honk() {
    console.log("Beep beep!");
  }
};

In the above example, the myCar object adheres to the Car interface, even though it doesn't have the mileage property. Optional properties allow for more flexibility, as not all objects may have every property defined in the interface.

Readonly Properties

To enforce readonly properties, we use the readonly modifier before the property name. Consider the following example:

interface Car {
  speed: number;
  brand: string;
  readonly mileage: number;
  honk(): void;
}

In the updated Car interface, we introduced a readonly property mileage, which signifies that the mileage value cannot be modified after the assignment.

const myCar: Car = {
  speed: 100,
  brand: "Trin",
  mileage: 5000,
  honk() {
    console.log("Beep beep!");
  }
};

myCar.mileage = 6000; 
// Error: Cannot assign to 'mileage' because it is a read-only property.

Attempting to modify the mileage property of myCar will result in a compilation error since it is marked as readonly.

Optional and readonly properties enhance the flexibility and immutability aspects of TypeScript interfaces, allowing for more adaptable and robust object contracts.

Next, we will delve into function signatures within interfaces, enabling us to define methods and their required parameters and return types.

Function Signatures in Interfaces

In TypeScript interfaces, we can define function signatures that specify the structure and behaviour of methods within an object. This allows us to ensure consistency and enforce method implementation across different interface objects.

Let's explore how function signatures are defined within TypeScript interfaces. Consider the following example:

interface Car {
  speed: number;
  brand: string;
  honk(): void;
  accelerate(speedIncrease: number): void;
}

In the Car interface above, we have defined two methods: honk and accelerate. The honk method takes no arguments and returns nothing (void). It represents the action of honking the car's horn. The accelerate method takes a speedIncrease parameter of type number and returns nothing (void). It simulates the car's acceleration by increasing its speed.

Objects must adhere to the specified method signatures to implement the' Car' interface. Let's see an example:

const myCar: Car = {
  speed: 100,
  brand: "Trin",
  honk() {
    console.log("Beep beep!");
  },
  accelerate(speedIncrease) {
    this.speed += speedIncrease;
  }
};

In the above example, the myCar object satisfies the Car interface by providing the required properties (speed and brand) and implementing the defined methods (honk and accelerate).

To demonstrate the static type-checking capability of TypeScript, consider the following scenario:

myCar.accelerate("invalid"); 
// Error: Argument of type '"invalid"' is not assignable to parameter of type 'number'

In this case, an attempt to call the accelerate method with an invalid argument "invalid" leads to a type error. TypeScript detects the mismatch between the expected number type of speedIncrease and the provided argument, highlighting the issue at compile-time. This powerful feature helps catch errors and promotes type safety.

The following section will explore how interfaces are implemented in Angular, providing practical examples of their usage within Angular components and services.

Implementing Interfaces in Angular

Let's explore some practical examples of implementing interfaces in Angular components and services.

#### Implementing an Interface in a Component:

Consider a scenario where we have an interface called User representing the structure of user data:

interface User {
  name: string;
  age: number;
  email: string;
}

To implement this interface in an Angular component, we define a property with the interface type:

export class UserProfileComponent implements OnInit {
  user: User;

  ngOnInit() {
    // Fetch user data from API or any other source
    // Assign the retrieved data to the user property
    this.user = {
      name: "John Doe",
      age: 25,
      email: "johndoe@example.com"
    };
  }
}

By declaring the user property as a type User, we ensure that it adheres to the structure defined by the User interface. This promotes consistency and enables easier data handling within the component.

#### Implementing an Interface in a Service:

Let's consider another example where we have an interface called Product representing the structure of product data:

interface Product {
  id: number;
  name: string;
  price: number;
}

In an Angular service, we can implement this interface to handle product-related operations:

@Injectable()
export class ProductService {
  getProducts(): Product[] {
    // Retrieve products from API or any other source
    // Return an array of products
    return [
      { id: 1, name: "Product A", price: 10.99 },
      { id: 2, name: "Product B", price: 19.99 },
      { id: 3, name: "Product C", price: 7.99 }
    ];
  }
}

Here, the getProducts method in the ProductService returns an array of products adhering to the Product interface structure.

Now, let's explore the concept of interface inheritance, which allows interfaces to inherit properties and methods from other interfaces, providing a more modular approach to defining contracts.

Interface Inheritance

In TypeScript, interface inheritance empowers us to build new interfaces by extending existing ones. This feature fosters code reuse and modular contract definition by inheriting properties and methods from parent interfaces.

Let's delve into the concept of interface inheritance with illustrative examples.

#### Extending an Interface

Consider the interface Shape, defining a basic shape with a name property:

interface Shape {
  name: string;
}

Now, imagine creating the Circle interface, which extends Shape and adds a radius property:

interface Circle extends Shape {
  radius: number;
}

By utilizing the extends keyword, the Circle interface inherits the name property from Shape and expands upon it with the radius property specific to circles.

#### Extending Multiple Interfaces

Interfaces in TypeScript can inherit from multiple interfaces, allowing for versatile composition. For instance:

interface Printable {
  print(): void;
}

interface Readable {
  read(): void;
}

Let's create the Book interface, extending both Printable and Readable:

interface Book extends Printable, Readable {
  title: string;
  author: string;
}

Here, Book inherits the print() method from Printable, the read() method from Readable, and incorporates its properties, title and author. This enables us to define an interface for objects that can be printed, read, and possess book-specific attributes.

Conclusion

That will be it for interfaces. I hope this blog helps you clear your doubts and understand more about the usage of Interface in Typescript and Angular Projects.

As you continue your journey with Angular and TypeScript, incorporating interfaces into your development practices will undoubtedly contribute to writing cleaner, more reliable, and scalable code.

Lastly, Your support keeps me going, and I give my 100 percent to these blogs! If you've found value, consider fueling the blog with a coffee ☕️ donation at the below link.

Buy me a COFFEE!

Thank you! 🙏

Keep exploring the power of TypeScript interfaces and unlock new possibilities for building robust and maintainable Angular applications. Happy coding!

Hoisting in JavaScript: Understanding the Mechanism and Best Practices

Ayush Agarwal — Fri, 16 Jun 2023 14:44:15 +0000

Welcome to my new blog on beginner's guide to hoisting in JavaScript! As a fundamental concept in the language, understanding hoisting is crucial for every JavaScript developer. In this blog, we'll demystify hoisting, explore its mechanism, delve into a variable and function hoisting, discuss scope implications, and share best practices for harnessing its power effectively. Let's get started!

Introduction to Hoisting

Hoisting is a crucial concept in JavaScript that affects the way variables and functions are processed during the execution of code. It refers to the behaviour of moving variable and function declarations to the top of their respective scopes or in the memory block of the execution context, giving the impression that they are "hoisted" to the top.

However, it's important to note that only the declarations themselves are hoisted, not the initializations or assignments.

How does hoisting work in JavaScript?

During the compilation phase, JavaScript allocates memory for variable declarations and stores function definitions before the code is executed. This happens in the memory block of the execution context. This allows JavaScript to access and use variables and invoke functions even before they are explicitly declared in the code. When the code is executed, variables and functions are already accessible due to the hoisting mechanism.

Importance of understanding hoisting for JavaScript developers

Understanding hoisting is crucial for JavaScript developers as it helps clarify the behaviour of variable and function declarations. Without a proper understanding, unexpected results and bugs may occur. By comprehending how hoisting works, developers can write code that is more predictable, maintainable and avoids common pitfalls.

Variable Hoisting

In JavaScript, hoisting affects both variables and functions, but let's first focus on variable hoisting. Variable hoisting refers to the behaviour where variable declarations are moved to the top of their scope during the compilation phase. This means that you can access and use variables before they are formally declared in the code.

However, it's important to note that only the declarations themselves are hoisted, not the initializations or assignments. Let's take a look at an example:

console.log(myVariable); // Output: undefined
var myVariable = 10;
console.log(myVariable); // Output: 10

In the above code snippet, even though we try to access myVariable before it is declared, it doesn't throw an error. Instead, it prints undefined. This is because during hoisting, the variable declaration var myVariable; is moved to the top, but the value is not assigned yet. Only during the execution phase, the value 10 is assigned, resulting in the second console.log statement printing 10.

To avoid confusion and ensure code clarity, it's considered a best practice to declare variables at the beginning of their scope, even though hoisting allows declarations to be moved. For example:

var myVariable; // Declare the variable first
console.log(myVariable); // Output: undefined
myVariable = 10; // Assign a value later
console.log(myVariable); // Output: 10

It's worth noting that the behaviour is slightly different for let and const declarations introduced in ES6. They have block scope, meaning they are only accessible within the block they are declared in. Unlike var, let and const declarations are not hoisted to the entire scope. Instead, they are hoisted to the top of their block.

Consider the following example:

console.log(myVariable); // Error: ReferenceError: myVariable is not defined
let myVariable = 10;
console.log(myVariable); // Output: 10

In this case, trying to access myVariable before its declaration results in a ReferenceError. The variable is not hoisted to the top of the scope, and it is only accessible after the declaration.

Understanding the behaviour of let and const about hoisting is crucial for writing robust JavaScript code. By utilizing these declarations appropriately, you can ensure better variable scoping, avoid unintended errors, and maintain code clarity.

Function Hoisting

In addition to variable hoisting, hoisting also affects functions in JavaScript. This behaviour, known as function hoisting, allows you to invoke functions before they are declared in the code. Let's explore how to function hoisting works and its implications.

When a function declaration is hoisted, both the name and the body of the function are moved to the top of their scope. This means you can call the function anywhere in the code, even before its actual declaration. Take a look at the following example:

myFunction(); // Output: "Hello, world!"

function myFunction() {
  console.log("Hello, world!");
}

In the above code snippet, even though myFunction() is invoked before its declaration, it executes without any errors and prints "Hello, world!". This is because, during the hoisting process, the function declaration function myFunction() {...} is moved to the top, allowing the function to be called from any point in the code.

It's important to note that function expressions, such as those assigned to variables, do not exhibit the same hoisting behaviour. Only function declarations are hoisted. For example:

myFunction(); // Error: TypeError: myFunction is not a function

var myFunction = function() {
  console.log("Hello, world!");
};

In this case, trying to invoke myFunction() before its declaration throws a TypeError since the function expression assigned to myFunction is not hoisted.

By leveraging function hoisting effectively, you can improve the readability and maintainability of your code. Just remember to pay attention to the differences between function declarations and function expressions to avoid any unexpected behavior.

Best Practices for Working with Hoisting

While hoisting can be a powerful feature in JavaScript, it's important to follow best practices to ensure code clarity and prevent potential issues. Here are some recommended practices for working with hoisting:

Declare Variables and Functions before Use: Although hoisting allows you to access variables and invoke functions before their declarations, it's considered a best practice to declare them at the beginning of their respective scopes. This improves code readability and avoids confusion.
Use let and const for Block Scope: To minimize hoisting-related issues and ensure better scoping, prefer using let and const declarations over var. let and const have block scope and are hoisted only within their respective blocks, making the code more predictable.
Avoid Reliance on Hoisting: While hoisting can be helpful, it's best not to rely on it heavily for code logic. Write your code in a way that is clear and explicit, with variables and functions declared and initialized in the order they are intended to be used.
Leverage Function Expressions: Instead of relying solely on function declarations, consider using function expressions assigned to variables. Function expressions offer more control over the variable assignment and can help prevent unintended hoisting behaviour.
Strict Mode: Enable strict mode ("use strict") to enforce stricter JavaScript rules. It helps catch potential hoisting-related errors and encourages better coding practices.
Code Reviews and Testing: Perform code reviews and thorough testing to identify any hoisting-related issues and ensure the behaviour of your code aligns with your intentions.

By following these best practices, you can harness the power of hoisting effectively while minimizing potential pitfalls.

Common Mistakes and Pitfalls with Hoisting

While hoisting can be a useful feature, it's important to be aware of common mistakes and pitfalls that can arise. Here are a few to watch out for:

Assuming Variables are Defined: When accessing variables before their declaration, they are hoisted but will have the value undefined until assigned. Relying on undeclared variables can lead to unexpected behavior.
Overwriting Function Declarations: When a function is declared multiple times within the same scope, only the last declaration is effective. Avoid unintentionally overwriting functions by ensuring unique function names.
Not Understanding Block Scope: Variables declared with let and const have block scope and are not hoisted to the entire scope. Failing to grasp this distinction can result in scope-related errors.
Misinterpreting Function Hoisting: While functions can be invoked before their declarations, function expressions assigned to variables do not exhibit the same hoisting behaviour. Be cautious with function expressions to avoid unexpected results.

By being mindful of these common pitfalls, you can navigate hoisting effectively and write more robust JavaScript code. It's essential to understand the intricacies of hoisting to avoid potential bugs and ensure the desired behavior of your code.

Conclusion

In this blog post, we explored the basics of hoisting, including how variable hoisting moves variable declarations to the top of their scope, allowing them to be accessed before their formal declaration.

Additionally, we covered function hoisting, where function declarations are moved to the top of their scope, enabling functions to be invoked before their actual declaration. We noted the difference between function declarations and function expressions and the need to be cautious when using function expressions to avoid hoisting-related issues.

However, it's crucial to be aware of common mistakes and pitfalls associated with hoisting, such as assuming variables are defined, overwriting function declarations, misunderstanding block scope, and misinterpreting function hoisting.

In conclusion, hoisting is a powerful aspect of JavaScript that can contribute to writing efficient and effective code when understood and used correctly. By continually improving your understanding of hoisting and practicing the recommended techniques outlined in this blog, you'll be well-equipped to utilize hoisting as a JavaScript developer.

Lastly, Your support keeps me going, and I give my 100 percent to these blogs! If you've found value, consider fueling the blog with a coffee ☕️ donation at below link.

Buy me a COFFEE!

Thank you! 🙏

Enhancing Pokefetch: Error Handling with Angular and PokeAPI

Ayush Agarwal — Tue, 30 May 2023 18:30:00 +0000

Welcome to the follow-up article on enhancing Pokefetch!

In this blog, we will dive into error handling in Angular and implement it in our project. Handling errors is crucial for a smooth user experience, especially with external APIs like PokeAPI. We will create an ErrorMessage component to handle error messages and display them in an alert modal. By passing the error status from the PokemonSearchcomponent to the ErrorMessage component, we can effectively communicate any API errors to the user.

This tutorial will explore the steps to implement error handling, ensuring our Pokefetch project becomes even more robust and user-friendly.

Let’s get started!

Creating the ErrorMessage Component

To handle error messages in Pokefetch, we will create an ErrorMessage component. This component will display the error message in an alert modal.

Start by generating the ErrorMessage component using the Angular CLI:

ng generate component components/error-message

Next, open the error-message.component.ts file and update it with the following code:

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

@Component({
  selector: 'app-error-message',
  templateUrl: './error-message.component.html'
})
export class ErrorMessageComponent implements OnInit {
  @Input() isAPICallErrored: boolean;
  constructor() { }

  ngOnInit(): void {
  }

  hideDiv() {
    this.isAPICallErrored = false;
  }
}

This code defines an isAPICallErrored input property using the @Input decorator. This property will determine whether an API call has resulted in an error. We also provide a hideDiv method that sets isAPICallErrored to false when invoked.

The hideDiv() method in the ErrorMessage component allows the user to dismiss the error alert by setting the isAPICallErrored property to false. By clicking the close button in the error alert, the hideDiv() method is triggered, hiding the error message and allowing the user to proceed with their search.

Now let's create the HTML template for the ErrorMessage component. Open the error-message.component.html file and add the following code:

<div *ngIf="isAPICallErrored">
  <div
    class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
    role="alert"
  >
    <strong class="font-bold">Holy smokes! </strong>
    <span class="block sm:inline"
      >Seems you have entered invalid data or the API is down. Please
      retry!</span
    >
    <span class="absolute top-0 bottom-0 right-0 px-4 py-3" (click)="hideDiv()">
      <svg
        class="fill-current h-6 w-6 text-red-500"
        role="button"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
      >
        <title>Close</title>
        <path
          d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"
        />
      </svg>
    </span>
  </div>
</div>

In this HTML template, we use Angular’s structural directive *ngIf to display the error message conditionally. When isAPICallErrored is true, the error alert modal is shown. The user will see the error message and can click the close button to hide the error alert.

Please note that at this point, the isAPICallErrored property has not been passed from the PokemonSearch component to the ErrorMessage component. We will cover this in the next section.

Passing Error Status from PokemonSearch to ErrorMessage Component

To pass the error status from the PokemonSearch component to the ErrorMessage component, you can make the following modifications to the code:

Declare a boolean property named isAPICallErrored in the PokemonSearch component and initialize it to false:

isAPICallErrored: boolean = false;

Inside the subscribe() method of the getPokemonType() function, set this.isAPICallErrored to false when the API call is successful and the type is retrieved:

this.pokemonService.getPokemonType(this.searchTerm).subscribe(
  type => {
    this.pokemonType = type;
    this.isAPICallErrored = false;
  },
  error => console.log(error)
);

Add parameter error to the error callback function inside the subscribe() method:

error => {
  if (error) {
    this.isAPICallErrored = true;
  }
}

The isAPICallErrored property will correctly reflect the error status by implementing these changes. You can then pass this property to the ErrorMessage component to display the error message when an API error occurs.

In the PokemonSearch component, when the API call is successful and the type is retrieved, setting isAPICallErrored to false ensures that any previous error state is cleared, allowing for accurate error handling in subsequent API calls.

The final version of the PokemonSearch component code with the implementation of error handling will look as follows:

import { Component, OnInit } from '@angular/core';
import { PokemonService } from '../../service/pokemon.service';
@Component({
  selector: 'app-pokemon-search',
  templateUrl: './pokemon-search.component.html'
})
export class PokemonSearchComponent implements OnInit {

  pokemonType: string;
  isAPICallErrored: boolean;

  constructor(private pokemonService: PokemonService) { }

  ngOnInit(): void {
  }
  searchTerm: string;

  search() {
    this.pokemonService.getPokemonType(this.searchTerm).subscribe(
      type => {
        this.pokemonType = type;
        this.isAPICallErrored = false;
      },
      error => {
        if(error){
          this.isAPICallErrored = true;
          console.log(this.isAPICallErrored);
        }
      }
    );
  }
}

This component version includes the isAPICallErrored property, which is set to true when an error occurs during the API call. This property allows for proper error handling and can be used to display the error message using the ErrorMessage component.

To add the ErrorMessage component and pass the isAPICallErrored variable, you can modify the pokemon-search.component.html file as follows:

<app-error-message [isAPICallErrored]="isAPICallErrored"></app-error-message>

<div class="flex justify-center mt-20">
  <form class="flex items-center">
    <input
      type="text"
      placeholder="Search Pokemon"
      [(ngModel)]="searchTerm"
      name="searchTerm"
      class="py-2 px-10 rounded-l-md focus:outline-none"
    />
    <button
      type="submit"
      (click)="search()"
      class="bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded-r-md"
    >
      Search
    </button>
  </form>
</div>

<div class="flex justify-center mt-10">
  <div
    *ngIf="pokemonType && pokemonType.length > 0"
    class="max-w-sm rounded overflow-hidden shadow-lg"
  >
    <div class="flex items-center flex-col px-6 py-4 bg-green-300">
      <div class="font-bold text-xl mb-2">Type</div>
      <p class="text-gray-700 text-base">
        {{ pokemonType }}
      </p>
    </div>
  </div>
</div>

In this updated code, the <app-error-message> component is added at the beginning of the template. The isAPICallErrored property is bound to the isAPICallErrored input of the ErrorMessage component, allowing it to receive the value and handle the display of the error message accordingly.

Point to Note

It is important to mention that due to PokeAPI's limitations, we cannot provide specific error messages for spelling errors or invalid search terms. The API does not return detailed responses for such scenarios. Therefore, the error message displayed in the application is a generic message indicating that the entered data is invalid or the API is down. While we have implemented error handling to handle these situations gracefully, it is recommended to double-check the spelling and accuracy of the search term when using the Pokefetch application.

Demo of Error Message in Action

This is how the error messages will look on the application after implementing the above codes.

You can try it out live at Pokefetch.

Conclusion

In conclusion, we have successfully implemented error handling in the Pokefetch application, enhancing its functionality and user experience. Adding the error message component allows us to display informative messages when API calls fail or return errors. This ensures that users are informed about issues and can take appropriate actions.

However, there is always room for improvement. In the following steps, we can further enhance error handling by implementing additional techniques such as logging errors, providing more detailed error messages, and implementing error tracking and reporting. We can create a more robust and user-friendly application by continuously refining and enhancing.

Lastly, Your support keeps me going, and I give my 100 percent to these blogs! If you've found value, consider fueling the blog with a coffee ☕️ donation at the below link.

Buy me a COFFEE!

Thank you! 🙏

Building Pokefetch: A Pokémon Type Finder with Angular and PokeAPI

Ayush Agarwal — Tue, 23 May 2023 14:55:14 +0000

In this blog post, we will explore how to build a web application named Pokefetch using Angular and the PokeAPI open API. Our goal is to create a user-friendly interface that allows users to input the name of a Pokemon and instantly retrieve its corresponding type.

Throughout this blog post, we will dive into setting up an Angular project, integrating the PokeAPI, handling user input, making HTTP requests, and displaying the retrieved Pokémon type data on a webpage. We will explore Angular components and services to build a seamless user experience.

So, grab your Poké Balls and join us on this exciting journey as we build Pokefetch, a web application that combines the power of Angular and the PokeAPI to bring Pokmon-type information to your fingertips.

Let's get started!

Setting Up Angular

To build our Pokefetch project, we first need to set up Angular in our development environment. Follow these steps to get started:

Step 1: Install Angular CLI

Angular provides a command-line interface (CLI) tool that makes creating, managing, and building s easy. Open your terminal or command prompt and run the following command to install the Angular CLI globally:

npm install -g @angular/cli

This command will install the latest version of the Angular CLI on your machine.

Step 2: Create a New Angular Project

Once the Angular CLI is installed, we can create a new Angular project by running the following command:

ng new pokefetch
cd pokefetch

This command will generate a new Angular project named “pokefetch” in a directory with the same name and navigate into it. Angular CLI will set up the project structure, install dependencies, and generate initial files.

Creating Component and Service Folder:

In Angular, components represent different parts of our application's UI, while services handle business logic and data retrieval. Let's create the necessary folders to organize our components and services.

Create two folders named components and services at the path src/app.

Step 3: Tailwind CSS configuration

We will be using Tailwind CSS for the styling of our application. It is very simple to configure Tailwind CSS in your application. You can visit the official Tailwind CSS website or read one of my previous blogs on the same:

Setup Tailwind CSS in Angular Application

With this, the initial project setup is completed, and we can start with the project, but before that, let’s see an overview of the Pokefetch project, including its goals and features.

Step 4: Basic CSS setup for the application

Let us write some CSS to have a default configuration at the application level. For this

Below is the simple code to write in app.component.html for CSS setup.

<div class="h-screen w-screen bg-gray-400">
</div>

Here, we are using three Tailwind classes, two for the full height and width of the page and the final to set the background colour gray.

Introducing Pokefetch Project

Project Overview

We have a simple application to display Pokemon type in an intuitive card.

In the search bar, enter the name of the Pokemon and hit Search. The type of the Pokemon is displayed on a small card as depicted in the picture.

The project can be viewed at: Pokefetch

Introduction to PokeAPI

PokeAPI is a powerful and comprehensive open API that provides vast data about the Pokémon universe. It is a central hub for accessing information on Pokémon species, moves, abilities, types, and much more.

With PokeAPI, developers can easily integrate Pokémon-related data into their applications and projects. The API offers a RESTful architecture, allowing us to make HTTP requests to retrieve specific information or perform complex queries. Whether you need details about a Pokémon’s type, abilities, or evolution chain, PokeAPI has got you covered.

Our Pokefetch project will leverage the ***PokeAPI to fetch Pokémon type information based on user input***.

Creating Navbar Component

Let’s start building our application with the topmost component, the Navbar.

Generating Navbar Component

ng generate component components/navbar

Angular CLI will create the necessary files and update the project structure. The generated files will include:

navbar.component.ts: The TypeScript file containing the navbar component's logic and functionality.
navbar.component.html: The HTML template file that defines the structure and layout of the navbar component.
navbar.component.css: The CSS file that allows you to style the navbar component.
navbar.component.spec.ts: Jasmine test file for writing test cases on the navbar component.

Create a folder named images at the path src/app/assets/images. This folder will be used to put all our images that might be used in the application. For a start, we will be placing a Pokeball SVG image to be used in our Navbar.

Download the image here: Pokeball SVG.

For our application, we will only be using a template file because for styling, we are using Tailwind CSS, and Jasmine’s test case is not the focus of this blog.

Navbar Template Code

<nav class="flex items-center justify-between flex-wrap bg-teal-400 p-4">
  <div class="flex items-center flex-shrink-0 text-white mr-6">
    <img
      src="../../../assets/images/pokeball.svg"
      alt="Pokeball"
      class="w-10 h-10 mr-0.5"
    />
    <span class="font-semibold text-xl tracking-tight">Pokemon</span>
  </div>
</nav>

The <nav> element sets the background color and padding in the template mentioned above. Inside is a flex container with a logo image (pokeball.svg) and the text "Pokemon" using a specific font size and font weight. The classes flex, items-center, justify-between, and flex-wrap control the layout and alignment of the navbar.

Finally, to ensure that the navbar component is rendered in the application, open the app.component.html file located in the src/app folder and add the <app-navbar></app-navbar> tag where you want the navbar to appear.

<div class="h-screen w-screen bg-gray-400">
  <app-navbar></app-navbar>
</div>

Start your application, and you will see the navbar component on your webpage.

ng serve

Implementing the PokeAPI Service

To fetch the Pokémon type data from the PokeAPI, we need to create and implement a service in our Pokefetch project. Here are the steps to generate and use the PokeAPI service:

Generating the PokeAPI Service

Run the following command to generate the PokeAPI service using the Angular CLI:

ng generate service service/pokemon

Note: Check that PokemonService and HttpClientModule are imported in the app.module.ts file. If not, import it like this:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { PokemonService } from './service/pokemon.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [
    PokemonService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Understanding HTTP Requests with Angular HttpClient

The HttpClient module in Angular allows us to make HTTP requests to external APIs. By importing the HttpClientclass from '@angular/common/http' , we access methods for sending GET, POST, PUT, DELETE, etc., requests.

Calling the PokeAPI to Fetch Pokémon Type

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class PokemonService {

  constructor(private http: HttpClient) { }

  getPokemonType(name: string): Observable<string> {
    name=name.toLowerCase();
    return this.http.get<any>            (`https://pokeapi.co/api/v2/pokemon/${name}`).pipe(
      map(response => response.types[0].type.name)
    );
  }
}

We import the necessary dependencies in this service: Injectable and HttpClient from @angular/core and @angular/common/http, respectively. The getPokemonType method takes a Pokémon name as input and returns an observable that emits the Pokémon's type.

We convert the name to lowercase od because the API only supports lowercase names and uses the HttpClient to send a GET request to the PokeAPI. The response from the API is then mapped to extract the first type of the Pokémon.

Now, we can inject this service into our components and use the getPokemonType method to fetch Pokémon type information based on user input.

Rendering Pokémon Type in the Pokemon-Search Component

In the Pokemon-Search component, we will utilize the PokeAPI service to fetch the type of a Pokémon based on user input. By importing and injecting the PokemonService, we can seamlessly retrieve the Pokémon type and render it in the component's template. Let's dive into implementing this functionality.

Creating the Pokemon-Search Component

Run the below command in the Angular CLI :

ng generate component components/pokemon-search

This command will create the necessary files for the component and update the project structure like Navbar.

We will be using pokemon-search.component.ts file to use the service created earlier.

Importing and Injecting the PokemonService

To use the PokemonService in the Pokemon-Search component, we must import and inject it. Here are the steps to import and inject the PokemonService:

Open the pokemon-search.component.ts file located in the src/app/components folder.
Import the PokemonService by adding the following line at the top of the file:
```
import { PokemonService } from '../../services/pokemon.service';
```
In the PokemonSearchComponent class, declare a property called pokemonType of type string to store the fetched Pokemon type:
```
pokemonType: string;
```
In the constructor, inject the PokemonService by adding the following parameter:
```
constructor(private pokemonService: PokemonService) { }
```

Create a method called search in the PokemonSearchComponent class to handle the search functionality:

search() {
  this.pokemonService.getPokemonType(this.searchTerm).subscribe(
    (type: string) => {
      this.pokemonType = type;
    },
    (error: any) => {
      console.log(error);
    }
  );
}

This is how the pokemon-search.component.ts will look after all the changes:

import { Component, OnInit } from '@angular/core';
import { PokemonService } from '../../service/pokemon.service';
@Component({
  selector: 'app-pokemon-search',
  templateUrl: './pokemon-search.component.html',
  styleUrls: ['./pokemon-search.component.css']
})
export class PokemonSearchComponent implements OnInit {

  pokemonType: string;

  constructor(private pokemonService: PokemonService) { }

  ngOnInit(): void {
  }
  searchTerm: string;

  search() {
             this.pokemonService.getPokemonType(this.searchTerm).subscribe(
      type => {
        this.pokemonType = type;
      },
      error => console.log(error)
    );
  }
}

Save the changes to the pokemon-search.component.ts file.

By importing and injecting the PokemonService, we establish a connection between the Pokemon-Search component and the functionality provided by the service. The search method uses the injected PokemonService to fetch the Pokemon type based on the searchTerm. The fetched type is then stored in the pokemonType property.

Next, we will integrate this functionality into the template of the Pokemon-Search component.

Fetching Pokémon Type and Displaying it in the Template

To fetch the Pokémon type using the PokemonService and display it in the template, follow these steps:

Open the pokemon-search.component.html file located in the src/app/components folder.

Add the following code to create the search form:

<div class="flex justify-center mt-20">
  <form class="flex items-center">
    <input
      type="text"
      placeholder="Search Pokemon"
      [(ngModel)]="searchTerm"
      name="searchTerm"
      class="py-2 px-10 rounded-l-md focus:outline-none"
    />
    <button
      type="submit"
      (click)="search()"
      class="bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded-r-md"
    >
      Search
    </button>
  </form>
</div>

This code creates a search form with an input field and a button. The ngModel directive is used to bind the input field value to the searchTerm property of the component.

Add the following code to display the fetched Pokémon type:
```
<div class="flex justify-center mt-10">
  <div
    *ngIf="pokemonType && pokemonType.length > 0"
    class="max-w-sm rounded overflow-hidden shadow-lg"
  >
    <div class="flex items-center flex-col px-6 py-4 bg-green-300">
      <div class="font-bold text-xl mb-2">Type</div>
      <p class="text-gray-700 text-base">
        {{ pokemonType }}
      </p>
    </div>
  </div>
</div>
```
This code displays a container with a green background that appears when the pokemonType property has a value. Inside the container, the fetched Pokémon type is displayed using the {{ pokemonType }} interpolation syntax.

Important Note: To use two-way data binding with ngModel in the Pokemon-Search component, we need to import the FormsModule in the app.module.ts file.

Open the app.module.ts file located in the src/app folder and import the FormsModule by adding the following line at the top of the file:
```
import { FormsModule } from '@angular/forms';
```
In the imports array of the @NgModule decorator, add FormsModule as one of the imported modules:
```
imports: [
  // Other imported modules
  FormsModule
],
```
Save the changes to the pokemon-search.component.html file.

When a user enters a Pokémon name and clicks the search button, the search() method is triggered, which calls the getPokemonType() method from the PokemonService. The fetched Pokémon type is stored in the pokemonType property and displayed in the template.

Finally, add the selector to utilize the Pokemon-Search component in the app.component.html file.

<div class="h-screen w-screen bg-gray-400">
  <app-navbar></app-navbar>
  <app-pokemon-search></app-pokemon-search>
</div>

Save the file and check your webpage.

Voila! The pokefetch application is ready for use.

Conclusion

In conclusion, the Pokefetch project provides a basic understanding of building an Angular application that fetches and displays Pokémon types using the PokeAPI.

However, it’s important to note that this project is a starting point for beginners. There is ample room for enhancement in terms of functionality and styling. For instance, you can implement additional features like displaying detailed Pokémon information or improving the user interface with CSS styling.

By following this tutorial, beginners have learned how to integrate services, make API calls, and utilize forms for user input. This project lays the foundation for further exploration and empowers beginners to continue building more advanced Angular applications.

I would love to hear from you! Your valuable input will help me enhance the project and make future improvements. Also, would you like to read the next blog on writing test cases for the application we built here? Let me know in the comments.

You can find the complete source code of the Pokefetch project on my GitHub repository. Feel free to visit the repository, comment, or contribute to the project.

GitHub Repository: Pokefetch Repo

In addition to the GitHub repository, I have also hosted the Pokefetch project for you to explore. You can access the live version of the project at: Try Pokefetch

Lastly, Your support keeps me going, and I give my 100 percent to these blogs! If you've found value, consider fueling the blog with a coffee ☕️ donation at the below link.

Buy me a COFFEE!

Thank you! 🙏

Feel free to try it out and provide your valuable feedback!

Mastering Angular Services: Essential Concepts for Beginners

Ayush Agarwal — Sat, 13 May 2023 17:43:17 +0000

Angular services play a crucial role in developing robust and modular web applications. As a developer, understanding the basics of services in Angular is essential for building maintainable and scalable code. This blog will cover the fundamental concepts of services in Angular, including how to create and use services, share data between components, and make API requests using built-in services.

Whether you're just starting with Angular or looking to improve your existing skills, this guide will provide a solid foundation for working with services in your Angular applications.

Prerequisites

Before diving into this guide on Angular services, it is recommended that readers have a basic understanding of Angular concepts, including components, modules, and dependency injection. Familiarity with TypeScript and web development fundamentals such as HTML, CSS, and JavaScript is also helpful.

This guide is intended for beginners who are just getting started with Angular services, but a foundation in these topics will aid in understanding the material covered.

Let's get started and learn something exciting today!

What are services in Angular?

In Angular, a service is a class used to encapsulate shared data and functionality that can be used across multiple components. Services act as a central place to store data and business logic, making it easy to share data and functionality between components without repeating code or passing data through many levels of the component hierarchy.

Services are typically used to implement data access methods, handle API requests, or perform any other business logic that needs to be shared across components. Services are usually created using the @Injectable decorator, which marks the class as a service that can be injected into other components.

Here's an example of a simple service that has a single property and method:

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

@Injectable({
  providedIn: 'root'
})
export class TestService {
  private data: string[] = ['apple', 'banana', 'cherry'];

  getData(): string[] {
    return this.data;
  }
}

In this example, the TestService class is marked as a service using the @Injectable decorator. The providedIn property is set to 'root', which means that the service is available globally throughout the application.

The TestService class has a private property called data, which is an array of strings. The class also has a public method called getData, which returns the data property.

Using this service, we can easily share the data property and getData method between multiple components in our application.

Creating a basic service

Creating a basic service in Angular is a straightforward process. The first step is to create a new class that will act as the service. Once the class has been created, we can use the @Injectable decorator to indicate that the class is a service that can be injected into other components. Finally, we need to provide the service to our application using the providers array.

Here's an example of creating a simple service that generates random numbers:


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

@Injectable({
  providedIn: 'root'
})
export class NumberService {
  getRandomNumber(): number {
    return Math.floor(Math.random() * 100);
  }
}

In this example, we have created a new class called NumberService. We have also added the @Injectable decorator to indicate that this class is a service.

The NumberService class has a single method called getRandomNumber that returns a random number between 0 and 100.

Bonus: It is a good practice to have the word service in the name of the file. For example above service can be names as number-service.service.ts.

Now that we have created our service, we need to provide it to our application using the providers array. We can do this in the @NgModule decorator of our AppModule:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { NumberService } from './number.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [NumberService],
  bootstrap: [AppComponent]
})
export class AppModule { }

In this example, we have imported our NumberService class and added it to the providers array in our @NgModule decorator. Now, the NumberService can be injected into any component that needs it.

Injecting a service into a Component

Now that we have created a service, we need to be able to use it in our Angular components. This is done by injecting the service into the component's constructor.

Here's an example of how to inject a service into a component.

import { Component } from '@angular/core';
import { NumberService } from './number.service';

@Component({
  selector: 'app-random-number',
  template: `
    <p>Random Number: {{ randomNumber }}</p>
  `
})
export class RandomNumberComponent {
  randomNumber: number;

  constructor(private numberService: NumberService) {
    this.randomNumber = this.numberService.getRandomNumber();
  }
}

In this example, we have created a new component called RandomNumberComponent. We have also imported our NumberService and added it to our component's constructor.

The NumberService is now available in our component as numberService. We can call any method on the service from within our component, just like we would with any other object.

In our component's constructor, we are using the numberService to generate a random number. We then store that number in the randomNumber property of our component.

Now, whenever our RandomNumberComponent is created, it will generate a new random number using the NumberService. This number can then be displayed in the component's template.

Injecting services into components is a powerful feature of Angular, as it allows us to share data and functionality between components without repeating code.

The NumberService can also be used in any other component similarly, thus preventing any repeated code where the methods of numberService is required.

Using the HttpClient service for API requests

The HttpClient service is a powerful tool in Angular for making API requests and retrieving data from external sources. This section will explore how to use the HttpClient service to make HTTP requests and handle the response.

First, we need to import the HttpClientModule in our app.module.ts file to make it available throughout our application:

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    HttpClientModule
  ],
  ...
})

Next, create a service that will use the HttpClient to request an API. For example, let's say we want to retrieve a list of users from the JSONPlaceholder API:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  private apiUrl = 'https://jsonplaceholder.typicode.com/users';

  constructor(private http: HttpClient) {}

  getUsers() {
    return this.http.get(this.apiUrl);
  }
}

In this example, we create a new service called UserService and define a private property called apiUrl that holds the URL of the API endpoint we want to access. Inject the HttpClient service into the constructor of our service, and define a method called getUsers() that makes an HTTP GET request to the API using the http.get() method.

Now, use the UserService to retrieve the list of users in a component:

import { Component } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-user-list',
  template: `
    <ul>
      <li *ngFor="let user of users">{{ user.name }}</li>
    </ul>
  `
})
export class UserListComponent {
  users: any[];

  constructor(private userService: UserService) {}

  ngOnInit() {
    this.userService.getUsers().subscribe((data: any[]) => {
      this.users = data;
    });
  }
}

In this example, we inject the UserService into our UserListComponent and use the getUsers() method to retrieve the list of users from the API. We use the subscribe() method to handle the response from the API and store the list of users in a property called users. We can then use *ngFor to iterate over the users array and display each user's name in our template.

Using the HttpClient service, we can easily make API requests and retrieve data from external sources in our Angular applications. This can make building dynamic, data-driven applications that can access and display information from various sources easier.

Conclusion

In conclusion, services are crucial to building robust and efficient Angular applications. By understanding the basics of services in Angular and how to create and use them, we can build more scalable and maintainable applications.

Lastly, Your support keeps me going, and I give my 100 percent to these blogs! If you've found value, consider fueling the blog with a coffee ☕️ donation at the below link.

Buy me a COFFEE!

Thank you! 🙏

How to Integrate Tailwind CSS in Your Angular Project

Ayush Agarwal — Sat, 22 Apr 2023 15:39:32 +0000

Angular is a powerful framework for building web applications, but styling and designing the UI can be a challenging task. Tailwind CSS is a popular utility-first CSS framework that makes it easy to create beautiful, responsive UIs with minimal effort. In this blog post, we'll explore how to integrate and use Tailwind CSS in your Angular project.

Why Use Tailwind CSS?

Before we dive into the technical details, let's discuss why you might want to use Tailwind CSS in your Angular project. Here are some benefits of using Tailwind CSS:

Easy to learn: Tailwind CSS is a utility-first framework, which means it provides a set of pre-defined classes that you can use to style your HTML elements. This approach makes it easy to learn and use, even for developers who are new to CSS.
Faster development: With Tailwind CSS, you don't have to write custom CSS code for every UI element. Instead, you can use pre-defined classes that already have the styling you need. This approach can save you a lot of time and make your development process faster.
Responsive design: Tailwind CSS provides a set of classes that make it easy to create responsive UIs. You can use these classes to adjust the layout and styling of your UI based on the screen size of the user's device.

Now that we know why Tailwind CSS is a great choice for Angular projects, let's see how to integrate it.

Integrating Tailwind CSS in Your Angular Project

Step 1: Create your Angular Project

The first starting point is to set up an Angular Project if not done already. This can be done easily using Angular CLI.

Use the below command to setup a project named tailwind_test.

ng new tailwind_test
cd tailwind_test

Step 2: Install Tailwind CSS

The first step is to install Tailwind CSS in your Angular project. You can install it using npm, the package manager for Node.js.

Also, run the init command to generate a tailwind.config.js file.

Open a terminal window and run the following commands:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Step 3: Configure Tailwind CSS

Next, you need to configure Tailwind CSS in your Angular project. To do this, add the paths to all of your template files in your tailwind.config.js file.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

In this example, we're using the default configuration with no modifications. However, you can customize the configuration file based on your project's specific needs. You can learn more about Tailwind CSS configuration options in the official documentation.

Step 4: Import Tailwind CSS into Your Angular Project

After configuring Tailwind CSS, you need to import it into your Angular project. You can do this by adding the following line to your styles.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 5: Use Tailwind CSS Classes in Your HTML Templates

Finally, you can use Tailwind CSS classes in your HTML templates to style your UI elements.

As a simple test, you can write the following code in your app.component.html file.

<h1 class="text-3xl font-bold underline">
  Hello this is typescript in action!
</h1>

Congratulations! Your angular project is all set to use Tailwind CSS. No more writing those multiple CSS lines.

Bonus: Customizing Tailwind CSS in Your Angular Project

While the default configuration of Tailwind CSS should work well for most projects, you might want to customize it to match your project's specific needs. Here is one simple example of how to add a custom color in your Angular project:

Adding Custom Colors

You can add custom colors to your Tailwind CSS configuration file by using the theme.colors object. Here's an example:

// tailwind.config.js
module.exports = {
content: ["./src/**/*.{html,ts}"],
  theme: {
    extend: {
      colors: {
        'my-blue': '#007bff',
      },
    },
  },
  variants: {},
  plugins: [],
}

In this example, we add a custom color named my-blue with the hex code #007bff. You can then use this color in your HTML templates like this:

<div class="bg-my-blue">...</div>

Conclusion

In this blog post, we've explored how to integrate and use Tailwind CSS in your Angular project. We've discussed why Tailwind CSS is a great choice for enhancing your Angular app's UI, and we've provided a step-by-step guide to integrating Tailwind CSS into your project.

Using Tailwind CSS can save you a lot of time and effort when styling your Angular app's UI. With its pre-defined classes and responsive design capabilities, you can create beautiful and responsive UIs with minimal effort. So, give it a try and see how it can improve your Angular development process!

Lastly, Your support keeps me going, and I give my 100 percent to these blogs! If you've found value, consider fueling the blog with a coffee ☕️ donation at the below link.

Buy me a COFFEE!

Thank you! 🙏

Getting Started with Pipes in Angular: A Beginner's Guide

Ayush Agarwal — Wed, 19 Apr 2023 15:41:42 +0000

Angular is a powerful front-end framework for building dynamic and scalable web applications. One of the many features that make Angular so popular is its ability to manipulate and transform data in real-time using pipes. Pipes allow developers to transform data values in templates and component classes without modifying the original data source.

Pipes are an essential tool for creating reusable and modular code in Angular.

If you are new to Angular or looking to expand your knowledge of the framework, this blog is a great place to start. We will cover the fundamentals of pipes, explore their benefits, and delve into both built-in and custom pipes in Angular.

By the end of this blog, you will have a comprehensive understanding of pipes in Angular, and you'll be equipped with the knowledge you need to create efficient and maintainable code in your Angular projects.

Prerequisites

To get the most out of this blog, you should have a basic understanding of Angular fundamentals, such as components, modules, and templates. It is recommended that you have some experience with TypeScript and JavaScript, as well as a working installation of the Angular CLI.

Let's dive into the world of pipes and take your Angular skills to the next level!

Introduction to Pipes in Angular

Pipes are a powerful feature of the Angular framework that allows developers to transform data values easily in templates and component classes without modifying the original data source. Pipes are an essential tool for creating reusable and modular code in Angular.

What are pipes?

In Angular, pipes are used to transform data from one format to another. They can be used to modify strings, numbers, dates, and arrays, and can also be chained together to create complex transformations.

Pipes are defined and used in templates by enclosing the target value in a pipe character ( | ) followed by the pipe name and any parameters.

Angular comes with several built-in pipes that are commonly used, such as the DatePipe, UpperCasePipe, and LowerCasePipe. Custom pipes can also be created to suit the specific requirements of an application.

Why are pipes useful in Angular?

Pipes provide a powerful and flexible way to transform data in real-time, without modifying the original data source. They make it easy to format data for display, filter large data sets, and perform calculations on data values.

Overall, pipes are an essential feature of the Angular framework that enables developers to create flexible, maintainable, and scalable applications. In the next section, we will explore the different types of built-in pipes that are available in Angular.

Built-in Pipes in Angular

Angular provides several built-in pipes that can be used to transform data in a variety of ways. These pipes can be used in templates and component classes to format, filter, and manipulate data values.

Commonly used pipes in Angular:

Some of the most commonly used built-in pipes in Angular include:

DatePipe: This pipe is used to format date values into a specific format. The pipe accepts a date string or a Date object and returns a formatted date string.

CurrencyPipe: This pipe is used to format currency values with the appropriate currency symbol and formatting based on the current locale. The pipe accepts a number and an optional currency code and returns a formatted currency string.

PercentPipe: This pipe is used to format numeric values as a percentage with a specified number of decimal places. The pipe accepts a number and an optional number of decimal places and returns a formatted percentage string.

Syntax and examples of each pipe:

The syntax for using pipes in Angular templates is as follows:

{{ value | pipeName: parameter1: parameter2... }}

Here, value is the data value to be transformed, pipe name is the name of the pipe, and parameters are optional parameters that can be used to customize the transformation.

For example, to format a date value using the DatePipe, the following syntax can be used:

<!-- currentDate is a Date object with the value of today's date -->
<p> Today's date is {{ currentDate | date:'fullDate' }} </p>

<!-- Output --> 
<!-- Today's date is Monday, April 19, 2023 -->

In this example, the currentDate variable is transformed using the DatePipe and the full date format is specified as the parameter.

How to use pipes in templates:

To use a built-in pipe in an Angular template, the pipe name and any parameters are added after the data value is transformed. For example, to use the CurrencyPipe to format a number as a currency value, the following syntax can be used:

<!-- totalPrice is a number with the value of 1234.56 -->
<p> The total price is {{ totalPrice | currency:'USD':'symbol':'1.2-2' }} </p>

<!-- Output --> 
<!-- The total price is $1,234.56 -->

Here, the totalPrice variable is transformed using the CurrencyPipe and the USD currency code, currency symbol, and formatting options are specified as parameters. By default the symbol is true that is the reason '$' is present in the output. The format parameter 1.2-2 in the currency pipe specifies the precision and rounding of the formatted value.

The first digit (1 in this case) specifies the minimum integer digits that should be displayed. The second digit (2 in this case) specifies the minimum number of decimal digits that should be displayed.

The dash (-) before the second digit specifies the maximum number of decimal digits to be displayed after the decimal point. In this case, -2 means that up to 2 decimal places will be displayed after the decimal point, and any trailing zeros will be removed.

These were examples of pre-existing pipes in Angular and how to use them in your project. There are many other pipes provided by Angular that you can go ahead and explore on the web.

Custom Pipes in Angular

Angular also allows you to create your own custom pipes to format and transform data as per your needs. Custom pipes are essentially functions that can accept input values and transform them into output values using custom logic. Creating custom pipes can help you to write reusable code and reduce redundancy in your application.

Creating Custom Pipes

Creating a custom pipe in Angular is a straightforward process just kike you would create a service or a method in a component. You can create a new pipe using the ng generate pipe command, which will generate a new pipe with a default name and place it in the pipes folder of your application.

Once you have created your custom pipe, you can define your custom logic in the transform method of the pipe class. The transform method accepts the input value and any optional parameters and returns the output value after transforming it.

Here is an example of a custom pipe that reverses the order of a string:

import { Pipe, PipeTransform } from '@angular/core'; 

@Pipe({ 
    name: 'reverse' 
}) 
exportclass ReversePipe implements PipeTransform { 
    transform(value: string): string { 
       returnvalue.split('').reverse().join(''); 
    } 
}

Implementing Custom Pipes in Angular

To use your custom pipe in Angular, you need to add it to the declarations array of the module where you want to use it. Once the pipe is added to the module, you can use it in your templates like any other built-in pipe.

Here's an example of using the custom reverse pipe in a template:

<p>Original: {{ message }}</p> 
<p>Reversed: {{ message | reverse }}</p>

Output:

Original: Hello World 
Reversed: dlroW olleH

Best Practices for Creating Custom Pipes

When creating custom pipes, it's important to follow some best practices to ensure that your code is maintainable and performs well. Here are some best practices to keep in mind:

Keep your pipe simple and focused on a specific task.

Avoid performing heavy computations or long-running operations inside your pipe.

Use pure pipes whenever possible to avoid unnecessary re-evaluation of the pipe.

Make sure to test your custom pipe thoroughly to ensure that it works as expected.

By following these best practices, you can create high-quality custom pipes that will help you to write better code and improve the performance of your Angular application.

Chaining Pipes in Angular

Chaining pipes in Angular allows you to apply multiple transformations to the same data in a specific order. Chaining pipes can be useful when you need to apply multiple formatting or transformation logic to a single value.

How to Chain Multiple Pipes

To chain multiple pipes in Angular, you can separate them using the | operator in your template. The order of the pipes is essential, as the output of the first pipe will be passed as the input to the second pipe, and so on.

Here's an example of chaining the uppercase and date pipes to format a date value in uppercase:

<p>{{ birthday | date | uppercase }}</p>

In this example, the birthday value will first be formatted as a date using the date pipe, and then the output of the date pipe will be transformed to uppercase using the uppercase pipe.

Assuming that the birthday value is 1990-05-25, the output of the above code would be:

<p>MAY 25, 1990</p>

Examples of Using Multiple Pipes

Chaining pipes can be useful for a variety of use cases. For example, you can use the currency pipe and percent pipe to format a number as a currency value and a percentage value, respectively:

<p>{{ price | currency | percent }}</p>

In this example, the price value will first be formatted as a currency value using the currency pipe, and then the output of the currency pipe will be transformed into a percentage value using the percent pipe.

Assuming that the price value is 100, the output of the above code would be:

<p>10,000%</p>

Limitations of Chaining Pipes

While chaining pipes can be useful, it's important to keep in mind that using too many pipes can hurt the performance of your application. Each pipe adds an additional computation to the rendering process, and excessive use of pipes can cause the rendering process to slow down.

Additionally, chaining too many pipes can make your code harder to read and maintain. It's important to keep your code simple and focused on the task at hand and to avoid using too many pipes in a single template.

Thus, chaining pipes in Angular can be a powerful tool for formatting and transforming data, but it should be used judiciously to avoid performance issues and maintainability problems.

Conclusion

In conclusion, pipes are an essential feature of Angular that allows developers to transform and format data easily in templates.

Lastly, Your support keeps me going, and I give my 100 percent to these blogs! If you've found value, consider fueling the blog with a coffee ☕️ donation at the below link.

Buy me a COFFEE!

Thank you! 🙏

Getting Started with Jasmine Testing in Angular: A Beginner's Guide

Ayush Agarwal — Sat, 25 Feb 2023 19:03:27 +0000

As developers, we all know the importance of testing our code. It's a critical part of the software development process that ensures the functionality and quality of our applications. However, writing tests can often be a daunting task, especially for those new to the testing world.

Fortunately, Angular provides a powerful testing framework that makes writing tests easier and more efficient: Jasmine. Jasmine is a popular testing framework that allows developers to write behavior-driven tests in a readable and expressive format. It integrates seamlessly with Angular, providing a simple and effective way to test components, services, pipes, and directives.

In this blog post, we will cover the basics of Jasmine, including how to set it up in an Angular project and write small tests to get a basic understanding.

If you're new to Angular testing, this blog will provide you with the knowledge and tools you need to write tests and ensure the quality of your applications confidently. So let's dive in and get started with Jasmine testing in Angular!

Introduction to Jasmine

Jasmine is a popular testing framework that has gained widespread adoption in the Angular community. It provides a simple and intuitive way to write behavior-driven tests in a readable and expressive format. Jasmine's syntax is designed to be easy to read and understand, even for those new to testing. It uses descriptive language to define test cases and expectations, making it easy to understand what each test is checking.

Jasmine is particularly well-suited for testing Angular applications, as it integrates seamlessly with Angular's dependency injection system and provides several built-in matchers and assertion functions specific to it. These features make it easy to write tests that test specific aspects of an Angular application, such as components, services, pipes, and directives.

One of the key benefits of Jasmine is that it allows developers to write tests focused on behaviour rather than implementation details. This means that tests are less likely to break as the codebase evolves and changes over time. Jasmine's syntax is also designed to be easy to read and understand, even for those unfamiliar with the underlying code. This makes it easier for developers to collaborate on testing efforts and communicate the test's intent and results to non-technical stakeholders.

Setting up Jasmine in Angular Project

Setting up Jasmine in an Angular project is a straightforward process involving installing and configuring the Jasmine framework to work with your Angular application.

Here are the steps you'll need to follow to set up Jasmine in your Angular project:

Install Jasmine: The first step is to install the Jasmine framework in your project. You can do this by running the following command in your project directory.

npm install jasmine --save-dev

This will install Jasmine as a development dependency in your project.

Configure Jasmine: Once you've installed Jasmine, you'll need to configure it to work with your Angular application. The easiest way to do this is to create a new test.ts file in your project's src directory. This file should include the following code:

import 'zone.js/dist/zone-testing';
import { getTestBed } from '@angular/core/testing';
import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';

getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting()
);

This code initializes the Angular testing environment and configures it to use the dynamic browser testing module.

Write Your First Test: With Jasmine and your test environment set up, you're ready to write your first test. Create a new file in your project's src directory with a .spec.ts extension (e.g., app.component.spec.ts) and include your test code using Jasmine's syntax.

import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  });

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });

  it(`should have as title 'angular-jamsine'`, () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app.title).toEqual('angular-jamsine');
  });
});

This code imports the necessary modules and components and defines a test suite using the describe function. The beforeEach function configures the test environment by configuring the TestBed with the necessary components and services. The it functions define the individual test cases and use Jasmine's matchers to check whether the expected behavior is met.

With these steps completed, you should now have Jasmine set up and ready to use in your Angular project. From here, you can write tests for all of your Angular components, services, pipes, and directives to ensure the quality and reliability of your application.

In the next section, we will learn how to write Jasmine test cases for methods or functions in our Angular application.

Writing Jasmine Test Cases for Angular Methods: A Step-by-Step Guide

In this section, we'll walk through the process of writing Jasmine test cases for two simple methods. These methods include a function that truncates a string and a function that toggles a boolean value. By following along with these examples, you'll gain a solid understanding of how to write effective and efficient tests for the methods in your Angular applications.

Method 1 - Truncate a String

Create the Component: First, create a new Angular component by running the following command in your terminal:

ng generate component truncate-string

This will create a new component called my-component in your Angular project.

Define the Method: In your truncate-string.component.ts file, add the truncateString method to the component class using the code below:

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

@Component({
  selector: 'app-truncate-string',
  templateUrl: './truncate-string.component.html',
  styleUrls: ['./truncate-string.component.scss']
})
export class TruncateStringComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  longDescription = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.';
  truncatedString: string;

  public truncateString (){
    if(this.longDescription.length>50){
      this.truncatedString = this.longDescription.slice(0,50);
    }
    else{
      this.truncatedString = this.longDescription;
    }
  }

}

This method takes the longDescription string and checks if it's longer than 50 characters. If it is, it truncates the string to the first 50 characters using the slice method and assigns it to the truncatedString property. If not, it assigns the entire longDescription string to truncatedString.

Write the Test Cases: In your my-component.component.spec.ts file, write the following test cases for the truncateString method:

import { ComponentFixture, TestBed } from '@angular/core/testing';

import { TruncateStringComponent } from './truncate-string.component';

describe('TruncateStringComponent', () => {
  let component: TruncateStringComponent;
  let fixture: ComponentFixture<TruncateStringComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ TruncateStringComponent ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(TruncateStringComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should truncate long description to 50 characters', () => {
    component.longDescription = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s.';
    component.truncateString();
    expect(component.truncatedString).toEqual('Lorem Ipsum is simply dummy text of the printing and typesetting industry. L');
  });

  it('should not truncate short description', () => {
    component.longDescription = 'Short Description';
    component.truncateString();
    expect(component.truncatedString).toEqual('Short Description');
  });
});

The first it block tests whether the truncateString method correctly truncates the longDescription string to 50 characters. The second it block tests whether the method leaves short strings unchanged.

Run the Test Cases: Run the test cases using the following command in your terminal:

ng test

Method 2 - Toggle a boolean

Similar to as discussed above create a component boolean-test using terminal. Then:

Write the Method: In your boolean-test.component.ts file, add the toggleVisibility method to the component class, using the code provided:

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

@Component({
  selector: 'app-boolean-test',
  templateUrl: './boolean-test.component.html',
  styleUrls: ['./boolean-test.component.scss']
})
export class BooleanTestComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }
  isVisible = true;

  toggleVisibility() {
    this.isVisible = !this.isVisible;
  }

}

This method simply toggles the value of the isVisible property between true and false when it is called.

Write the Test Cases: In your boolean-test.component.spec.ts file, write the following test cases for the toggleVisibility method:

import { ComponentFixture, TestBed } from '@angular/core/testing';

import { BooleanTestComponent } from './boolean-test.component';

describe('BooleanTestComponent', () => {
  let component: BooleanTestComponent;
  let fixture: ComponentFixture<BooleanTestComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ BooleanTestComponent ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(BooleanTestComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should toggle the value of isVisible', () => {
    component.toggleVisibility();
    expect(component.isVisible).toEqual(false);
    component.toggleVisibility();
    expect(component.isVisible).toEqual(true);
    });
});

The it block tests whether the toggleVisibility method correctly toggles the isVisible property when called.

Run the Test Cases: Run the test cases using the following command in your terminal:

ng test

This should execute the tests and display the results in your terminal. If the tests pass, you can be confident that your toggleVisibility method is working as intended.

In this section, we covered two basic methods in Angular components and learned how to write test cases for them using Jasmine. By following these steps, you can ensure that your methods are functioning properly and maintain the quality of your Angular project.

Conclusion

Unit testing is a crucial aspect of software development that allows developers to catch errors and bugs early in the development cycle. By using Jasmine in Angular, developers can create and execute test cases that thoroughly examine the behaviour of their application components. By prioritizing unit testing with Jasmine, developers can create reliable and robust Angular applications that provide an exceptional user experience.

Lastly, Your support keeps me going, and I give my 100 percent to these blogs! If you've found value, consider fueling the blog with a coffee ☕️ donation at the below link.

Buy me a COFFEE!

Thank you! 🙏

DEV Community: Ayush Agarwal

A Practical Introduction to Reactive Forms in Angular

Introduction

Setting up the Project

Generating the Login Form Component

Importing the Login Form Component in app.component.html

Creating the Login Form

Login Component File

Template Integration and Adding Validation Messages

Reactive Forms in Action

Conclusion

Simplifying ENUMS in Angular TypeScript Projects: Enhance Code Clarity

Introduction

Declaring ENUMS in Angular

Best Practices for Naming ENUMS

Benefits of Using ENUMS

Working with ENUMS in Angular Components

Best Practices and Conclusion:

Building a Simple CRUD Task Manager App with Angular: A Step-by-Step Guide for Beginners

Introduction

Live View

Prerequisites

Setting Up the Angular Project with Tailwind CSS

Creating the Navbar Component

Step 1: Generating the Navbar Component

Step 2: Implementing the Navbar Template

Step 3: Registering the Navbar Component

Building the Task Creation Form

Step 1: Generating the Task Creation Form Component

Step 2: Implementing the Task Creation Form Template

Step 3: Implementing the Task Creation Form Component

Step 4: Using the Task Creation Form Component

Task List: Displaying the List of Tasks

Generating the Task List Component

Passing Tasks from Task Form to Task List

Implementing the Task List Template

BONUS CONTENT :

Completing Tasks: Marking Tasks as Completed

Step 1: Creating the Task Interface

Step 2: Modifying Task Form Component

Step 3: Modifying Task List Component

Step 4: Updating Task List Template

Removing Tasks: Deleting Tasks from the List

Future Enhancements: Taking Your Task Manager App to the Next Level

Conclusion: Building a Feature-Packed Task Manager

Demystifying the module.ts File: A Comprehensive Guide to Angular's Module System

Introduction to Angular Modules

Creating and Configuring a New Module

Troubleshooting and Common Issues

Conclusion

Building Robust Angular Applications with TypeScript Interfaces: Best Practices and Examples

Declaring Interfaces

Optional and Readonly Properties

Optional Properties

Readonly Properties

Function Signatures in Interfaces

Implementing Interfaces in Angular

Interface Inheritance

Conclusion

Hoisting in JavaScript: Understanding the Mechanism and Best Practices

Introduction to Hoisting

How does hoisting work in JavaScript?

Importance of understanding hoisting for JavaScript developers

Variable Hoisting

Function Hoisting

Best Practices for Working with Hoisting

Common Mistakes and Pitfalls with Hoisting

Conclusion

Enhancing Pokefetch: Error Handling with Angular and PokeAPI

Creating the ErrorMessage Component

Passing Error Status from PokemonSearch to ErrorMessage Component

Point to Note

Demo of Error Message in Action

Conclusion

Building Pokefetch: A Pokémon Type Finder with Angular and PokeAPI

Setting Up Angular

Step 1: Install Angular CLI

Step 2: Create a New Angular Project

Step 3: Tailwind CSS configuration

Step 4: Basic CSS setup for the application

Importing the Login Form Component in `app.component.html`