How do I use a CanActivateFn to hide a link?

Question

I am using CanActivateFn rather than CanActivate to handle my routing authentication.

Here is my app-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { ExampleTableComponent } from './example-table/example-table.component';
import { authGuard } from '../_guards/auth.guard';
import { HomeComponent } from './home/home.component';
import { SearchComponent} from './search/search.component';
import { SettingsComponent } from './settings/settings.component';

export const routes: Routes = [
    { path: '', redirectTo: 'login', pathMatch: 'full' },
    { path: 'login', component: LoginComponent },
    { path: 'home', component: HomeComponent },
    { path: 'example-table', component: ExampleTableComponent, canActivate: [authGuard] },
    { path: 'search', component: SearchComponent, canActivate: [authGuard] },
    { path: 'settings', component: SettingsComponent },
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

Here's my auth.guard.ts:

import { CanActivateFn, Router } from '@angular/router';
import { inject } from '@angular/core';
import { AuthService } from '../_services/auth.service';
import { map } from 'rxjs';
import { EndpointService } from 'projects/lib/xp-endpoints/endpoint.service';
import { MatSnackBar } from '@angular/material/snack-bar';

export const authGuard: CanActivateFn = (route, state) => {
    const endpointService: EndpointService = inject(EndpointService)
    const authService: AuthService = inject(AuthService)
    const _snackBar: MatSnackBar = inject(MatSnackBar)
    const router: Router = inject(Router)

    return authService.PAS.pipe(
        map(pasArray => {
           /* Auth stuff */
           return false
        })
    )
};

Here's an example of the link I have displaying:

<div class="dropdown" *ngIf="Something here that removes the link if the user doesn't have access">
    <a routerLink="/search"><button>Search</button></a>
</div>

What's happening right now is if the user doesn't have access they can still view the link. I'd like the link to be removed from the page completely.