I have a URL parameter gatewayId and I want to display only those objects whose id matches the parameter.

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-message-receiver',
  templateUrl: './message-receiver.component.html',
  styleUrls: ['./message-receiver.component.scss']
})
export class MessageReceiverComponent implements OnInit {
  data: {
    message: string,
    gatewayId: number
  }[] =
  [
    {message: "Message 1", gatewayId: 1},
    {message: "Message 2", gatewayId: 2},
    {message: "Message 3", gatewayId: 3},
    {message: "Message 4", gatewayId: 1},
    {message: "Message 5", gatewayId: 2},
    {message: "Message 6", gatewayId: 3}
  ]

<div>
    <div>
        <button mat-raised-button (click)="goToGateway()">
            <span>&#8592;</span>
        </button>
        <button mat-raised-button (click)="sendMessage()" style="float: right;">Send message</button>
    </div>
    <ng-container *ngFor="let member of data">    
        <div>
            <ul>
                <li *ngIf="member.gatewayId === 1">{{member.message}}</li>
            </ul>
        </div>
    </ng-container>
</div>

(Here the filter is hardcoded so don't pay attention to that).

So if the URL is */1, I want to display only messages 1 and 4. I tried to do it with ActivatedRoute and ngFor/ngIf but can't get it done unfortunately.