Found that easiest/fastest approach for me uses [ngClass]
with multiple expressions (with ternary operator) listed in an array like this:
<a [ngClass]="[
router.isActive('/about-me', true) ? 'active-class' : '',
router.isActive('/hobbies', true) ? 'active-class' : '',
router.isActive('/photo-gallery', true) ? 'active-class' : '']"
(click)="showsSubmenu = !showsSubmenu">
Parent Menu
</a>
<div *ngIf="showsSubmenu" class="submenu>
<a routerLink="about-me" routerLinkActive="active-class">About Me</a>
<a routerLink="hobbies" routerLinkActive="active-class">Hobbies</a>
<a routerLink="photo-gallery" routerLinkActive="active-class">Photo Gallery</a>
</div>
and in TS
import { Router } from '@angular/router';
export class NavbarComponent implements OnInit {
constructor(
public router: Router
) {}
}
Note: I use a class called 'active-class' to style both the parent menu anchor and the children anchors in this example; but you could use separate classes/styles.