3

For example:

*ngIf="step?.salaryChangedBy?.updated | issalaryUpdated : lastViewedByUser : step?.salaryChangedBy?.userId : userId"

Or the formatted one is more readable:

*ngIf="
    step?.salaryChangedBy?.updated
        | issalaryUpdated
        : lastViewedByUser
        : step?.salaryChangedBy?.userId
        : userId
"

Very strange syntax for me. Can anybody tell me what these consecutive colons do here? BTW, issalaryUpdated is a pipe.

I tried to google the Angular documentation and posts on internet and found no useful information. Can anybody shed some light on me? Thanks!

Robert Watzen
  • 33
  • 4
  • Can you provide a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example)? Ideally in an online code editor auch as [Stackblitz](https://www.stackblitz.com). – Cuzy Jul 27 '23 at 12:55
  • 2
    The name/string after the pipe operator `|` usually refers to the name of a pipe and every variable passed after each colon is passed to the `transform` method of said pipe as a parameter. – Cuzy Jul 27 '23 at 12:57
  • "the pipe operator | usually refers to the name of a pipe and every variable passed after each colon is passed to the transform", yes, you're right, Cuzy, thanks! – Robert Watzen Jul 27 '23 at 13:03

1 Answers1

1

In your code example, issalaryUpdated is a pipe that take four parameters and return a boolean (which will be evaluated in *ngIf)

The issalaryUpdated pipe should look like this

@Pipe({ name: 'issalaryUpdated' })
export class IsSalaryUpdatedPipe implements PipeTransform {
  transform(
    updated: any,
    lastViewedByUser: any,
    salaryChangedByUserId: string,
    currentUserId: string
  ): boolean {
    // return a boolean here based on logic involving updated, lastViewByUser, salaryChangedByUserId and currentId
  }
}

The syntax | means that you are using a pipe

The values separated by : are the parameters of the pipe

For more informations of how do pipes with multiple arguments work, look to this answer

maheryhaja
  • 1,617
  • 11
  • 18