Angular Change Detection and Pipes

Second Component Typescript:

import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
import { Member } from '../app.component';

@Component({
  selector: 'app-second',
  templateUrl: './second.component.html',
  styleUrls: ['./second.component.scss'],
  // changeDetection: ChangeDetectionStrategy.OnPush
})
export class SecondComponent implements OnInit, OnChanges {

  @Input()
  members!: Member[];

  name = 'Raul';

  age = '40';

  ngOnInit(): void {
    // this.name = this.formatName(this.name);
  }

  ngOnChanges(changes: SimpleChanges): void {
    // this.name = this.formatName(this.name);
  }

  // formatName(name: string): string {
  //   console.log('formatName() called');
  //   return name.toUpperCase();
  // }

  getMemberStatus(point: number): string {
    console.log('getMemberStatus() called');
    if (point > 1000) {
      return 'Platinum';
    } else if (point > 500) {
      return 'Gold';
    } else if (point > 200) {
      return 'Silver';
    }
    return 'Basic';
  }
}



Second Component Template:

<div class="test1">
  <div>
    <label>Name:</label>
    <input type="text"
           [(ngModel)]="name">
  </div>

  <div>
    <label>Age:</label>
    <input type="number"
           [(ngModel)]="age">
  </div>

  <!--  <span>{{ formatName(name) }}</span>-->
  <!--  <span>{{ name }}</span>-->
  <span>{{ name | formatName }}</span>
</div>

<!------------------------------------------------------->
<!------------------------------------------------------->
<!------------------------------------------------------->

<!--<div class="test2">-->
<!--  <ng-container *ngFor="let member of members; index as i">-->
<!--    <span>{{ member.firstname }} {{ member.lastname }}:-->
<!--      <b>{{ getMemberStatus(member.points) }}</b>-->
<!--    </span>-->
<!--  </ng-container>-->
<!--</div>-->

<div class="test2">
  <ng-container *ngFor="let member of members; index as i"
                class="test2">
    <span>{{ member.firstname }} {{ member.lastname }}:
      <b>{{ member.points | memberStatus }}</b>
    </span>
  </ng-container>
</div>


formatName Pipe:

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

@Pipe({
  name: 'formatName',
  // pure: true
})
export class FormatNamePipe implements PipeTransform {

  transform(value: string): string {
    // console.log('FormatNamePipe called');
    return this.formatName(value);
  }

  formatName(name: string): string {
    return name.toUpperCase();
  }
}



memberStatus Pipe:

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

@Pipe({
  name: 'memberStatus',
  // pure: true
})
export class MemberStatusPipe implements PipeTransform {

  transform(value: number): string {
    console.log('MemberStatusPipe called');
    return this.getMemberStatus(value);
  }

  getMemberStatus(point: number): string {
    if (point > 1000) {
      return 'Platinum';
    } else if (point > 500) {
      return 'Gold';
    } else if (point > 200) {
      return 'Silver';
    }
    return 'Basic';
  }
}