DEV Community: Kavindu Karunasena

What is SoftwareTesting?

Kavindu Karunasena — Sat, 28 Dec 2024 06:24:06 +0000

Software testing is a set of activities aimed at discovering defects and evaluating the quality of software products, known as test objects. While many assume testing is just about running tests and checking results, it’s much more than that. It involves planning, managing, and aligning with the software development lifecycle to ensure both verification (meeting requirements) and validation (meeting user and stakeholder needs).

Types of Testing

Dynamic Testing: Involves executing the software to identify issues.
Static Testing: Focuses on reviewing and analyzing the software without execution.

Beyond the Technical Aspects
Testing isn’t purely technical. It requires intellectual effort, critical thinking, and specialized knowledge. Testers also rely on tools to assist in their work, but their expertise and analytical skills remain key to success.

Effective testing reduces risks and ensures software delivers value in its operational environment, making it an indispensable part of the development process.

Exploring String Interpolation in Angular

Kavindu Karunasena — Thu, 25 Apr 2024 05:03:39 +0000

String interpolation, denoted by {{ }}in Angular templates, offers a succinct means to display dynamic data. It seamlessly integrates JavaScript expressions within HTML, enabling developers to render dynamic content effortlessly.

Syntax
Using string interpolation is as simple as enclosing an expression within double curly braces. For instance:

<p>Hello, {{ name }}!</p>

export class MyComponent {
  name: string = 'John';
}

Here, name is a component property whose value will replace {{ name }} when rendered.

Features

Dynamic Binding: Interpolation facilitates one-way data binding, updating the view whenever component properties change.
Expression Support: It allows for a variety of expressions, including property access, method calls, arithmetic operations, and conditional statements.
Readability: Interpolated expressions keep templates concise and readable, enhancing code maintainability.

Best Practices

Simplicity: Keep templates simple and delegate complex logic to component classes.
Performance: Be cautious with heavy computations in interpolation, as they can impact performance.
Use Pipes: Employ Angular pipes for data formatting and manipulation within interpolations.

Conclusion

String interpolation is a cornerstone of Angular's templating system, facilitating dynamic content rendering with minimal effort. By mastering its usage and adhering to best practices, developers can create responsive and maintainable Angular applications efficiently.

Dynamically Adding Classes with ngClass in Angular

Kavindu Karunasena — Tue, 23 Apr 2024 14:01:49 +0000

Angular's ngClass directive allows you to conditionally apply CSS classes to HTML elements based on data or expressions within your component. This provides a powerful way to control the element's appearance dynamically.

Template:

<div [ngClass]="myClasses">This element's classes change dynamically!</div>

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html',
  styleUrls: ['./my-component.css']
})
export class MyComponent {
  myClasses: any;
  isActive: boolean = false;

  constructor() {
    this.myClasses = {
      'highlight': this.isActive, // Class applied based on condition
      'large': true // Always applied class
    };
  }

  toggleActive() {
    this.isActive = !this.isActive;
    this.myClasses = {
      'highlight': this.isActive,
      'large': true
    };
  }
}

Explanation:

The [ngClass] directive binds an object (myClasses) to the element's class attribute.
The myClasses object contains key-value pairs where the key is the CSS class name and the value is a boolean expression.
A class is added to the element only if the corresponding value in myClasses evaluates to true.
You can update the myClasses object in your component's methods (e.g., toggleActive) to dynamically change the applied classes.

Additional Options:

String: You can use a space-separated string to define multiple classes that are always applied.
Array: An array of strings or objects allows for combining different approaches within ngClass.
Remember:
ngClass offers flexibility for conditional class application.
Ensure your CSS classes are defined for proper styling effects.

This approach provides a versatile way to manage class names based on your application's logic, making your Angular components more dynamic and responsive.

ngFor in Angular

Kavindu Karunasena — Mon, 22 Apr 2024 17:05:51 +0000

ngFor is a built-in Angular directive that streamlines iterating over collections (arrays) in your templates. It's similar to JavaScript's for loop, but specifically designed for the world of Angular.

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html',
  styleUrls: ['./my-component.css']
})
export class MyComponent {
  products = [
    { name: 'Apple', price: 1.99 },
    { name: 'Banana', price: 0.79 },
    { name: 'Orange', price: 2.49 }
  ];
}

Inside the component class, we define an array named products containing objects with product details (name and price).

  <li *ngFor="let product of products">
    {{ product.name }} - ${{ product.price }}
  </li>
</ul>

Inside the list, we use *ngFor on each
element.
let product: This creates a variable named product that holds the current product object during each iteration.
of products: This specifies the array to iterate over, which is the products array in this case.
Within the
, we display product information using interpolation.

Explanation:

Angular encounters *ngFor.
It iterates over the products array.
For each product object, it:

Creates a new
element.
Assigns the current product to the product variable.
Renders the product name and price inside the list item.

Additional Notes:

ngFor works with arrays of any data type, not just objects.
You can access object properties within the loop using dot notation (e.g., product.name).
For more complex scenarios, you can use index to get the current item's position (*ngFor="let product of products; let i = index").

By using ngFor, you efficiently display dynamic content based on collections in your Angular applications.

Conditional Rendering with ngIf in Angular

Kavindu Karunasena — Sat, 20 Apr 2024 20:17:35 +0000

In Angular applications, dynamic content based on data or user interactions is essential. The ngIf structural directive provides a powerful way to conditionally include or exclude elements from the template, ensuring a seamless user experience.

Understanding ngIf

Structural Directive: ngIf modifies the DOM structure by adding or removing elements based on a condition.
Expression Binding: It takes an expression as input, typically a boolean value or one that evaluates to truthy or falsy.
Conditional Rendering: When the expression is true, the element and its content are displayed. If it's false, they're removed from the DOM, optimizing performance.

<div *ngIf="isLoggedIn">
  Welcome back!
</div>

The *ngIf directive is placed on a div.
The expression isLoggedIn controls the visibility.
If isLoggedIn is true, the welcome message with the username is displayed.
Otherwise, the div and its content are hidden from the user.

example:

<div>
  <p *ngIf="value">The value is true.</p>
  <p *ngIf="!value">The value is false.</p>
</div>

In above code if the value is true, only display "The value is true". Otherwise display "The value is false."

Two-Way Binding in Angular: Magic Mirror for Your Data

Kavindu Karunasena — Sat, 20 Apr 2024 14:26:57 +0000

Ever-Synced Data

Imagine your UI reflecting changes like a magic mirror. That’s two-way data binding in Angular! It keeps your view (UI) and component data (model) constantly in sync.

Steps to Two-Way Magic

1. Import FormsModule: Include it in your module (@NgModule({ imports: [FormsModule] })) for form-related directives.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; // Import FormsModule for ngModel

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule // Add FormsModule to imports
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Use ngModel: Bind the component property to the input value with [(ngModel)]="propertyName" (like a banana in a box!).

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular User';
}

<div>
  <label for="name">Name:</label>
  <input type="text" id="name" [(ngModel)]="name">
</div>
<p>Hello, {{ name }}!</p>

3. Enjoy the Magic! Changes in the input update the property, and vice versa.