How to make routing for different groups to their page?

Question

Angular

There is a page where I can create groups /groups, I need to make it so that when clicking on the groups, routing to /groups/ (group name) occurs, how can I do this?
html

<app-header></app-header>
<section class="section-groups">
    <div class="container">
        <div class="main-page-wrap">
            <div class="groups_list fl-r">
                <div *ngFor="let group of us.data.groups" class="groups_wrap">
                    <div class="groups_item">
                        <a (click)="toGroup($event)" class="groups_card">
                            <div class="groups_img">
                                <img src="/assets/img/groups/shopping.png" class="{{group}}" alt="">
                            </div>
                            <div class="groups_text">
                                <p>{{group}}</p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

ts

import { Component, OnInit } from '@angular/core';
import { UserService } from '../../services/user.service'
import { Router } from '@angular/router'

@Component({
  selector: 'app-groups',
  templateUrl: './groups.component.html',
  styleUrls: ['./groups.component.scss']
})
export class GroupsComponent implements OnInit {

  constructor(public us: UserService, private router: Router) { }

  toGroup(event) {
    // this.router.navigate(['/groups/friends/', event.target.className])
  }

  ngOnInit(): void {
  }

}

Answer 1

<a [routerLink]="['/', 'groups', group]" class="groups_card">

question was it a joke, right? :)))