Angular Custom Pipe : Displays Mr. against all First Names regardless of their gender-CodePudding

I'm trying to implement a custom Pipe in Angular 13. In which I want Mr. or Ms. to appear before the first Name depending on the selected "Gender Radio Button: Male/Female". I'm using Reactive Forms JSON server and Angular Material.

Following is how its working in my table. In my pipe file my condition is not properly working and its displaying Mr. for all the first Names regardless of their gender. It should display Mr. when user selects Male Radio Button and similarly for Ms. when user selects Female Radio Button.

TABLE

**EMPLOYEE TITLE PIPE TS **

import { Pipe, PipeTransform } from "@angular/core";
import { MatButton } from "@angular/material/button";
import { MatRadioButton } from "@angular/material/radio";

@Pipe({
name:'employeeTitle'
})
export class EmployeeTitlePipe implements PipeTransform{
transform(value: any, gender:string)  {

  if( gender = "Female")
  {
  return "Ms."   value;}

  else if( gender = "Male")
  {
  return "Mr."   value;}

  else
  return value
    }   
  }

**EMPLOYEE HTML **

  <!-- First Name Column -->
  <ng-container matColumnDef="firstname">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> FIRST NAME </th>
  <!-- added PIPE -->
  <td mat-cell *matCellDef="let row"> {{row.firstname | employeeTitle : row.gender }} 
  </td>

**DIALOG COMPONENT HTML **

<!-- GENDER -->    
<mat-label>Employee Gender</mat-label>
<mat-radio-group  formControlName ="gender" >
<mat-radio-button value= "Male"   > Male   </mat-radio-button>
<mat-radio-button value= "Female" > Female </mat-radio-button>          
</mat-radio-group>

CodePudding user response：

You're assigning:

if( gender = "Female")

Instead of comparing:

if( gender == "Female")

CodePudding user response：

As robert pointed out you were using a single equalsTo i.e. '=' instead of '==' or '==='(for better clarity). Let me clarify the difference between the two to make your understang better.

'=' => Assignment operator assigns the value of its right-hand operand to a variable, a property, or an indexer element given by its left-hand operand. So let's say you use the following example:

let a = 10;

which will assign the variable 'a' a value of 10 of type int.

== -> Equality operator

Majorly used for comparing two values from left and right(regardless of their type) and return true if the the condition matches and false otherwise.

Example:

let a = 10;
let b = 10;
let c = 20;

console.log(a == b); // return true
console.log(a == c); // returns false

One flaw in this equality operator is that it doesn't tests for types i.e. let's consider a example for this:

let a = 10;
let b = '10';

console.log(a == b); // will still return true

As you see above even variable 'a' is of type integer and variable 'b' is of type string, comparing this will result to true even when both variables have different data types.

To overcome this problem Strict equality(===) was introduced, which ensures that datatypes of both variables(left & right side) are equal.

let a = 10;
let b = '10';

console.log(a === b); // will result in false.

For further clarification on comparisons in javascript refer to this article

Hope this helps in your future endeavors.