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

Question

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" class="example-radio-group">
<mat-radio-button value= "Male"   > Male   </mat-radio-button>
<mat-radio-button value= "Female" > Female </mat-radio-button>          
</mat-radio-group>  
    

Answer 1

You're assigning:

if( gender = "Female")

Instead of comparing:

if( gender == "Female")