What do so many colons do in Angular *ngIf expression?

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!

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