Angular 7 on off click закрыть загрузочный коллапс

Question

У меня есть боковое меню, которое я использую, в котором перечислены ссылки с дополнительными складными ссылками

link
link
  ----link
  ----link
link
  ----link

При нажатии на боковое меню я хочу, чтобы все «открытые» складные div закрывались.

<ul class="list-unstyled components">
        <li>
            <a href="#TypographySubmenu" data-toggle="collapse" aria-expanded="false">
                <fa-icon [icon]="['far', 'font']" class="mr-2"></fa-icon>
                Typography
            </a>
            <ul class="collapse list-unstyled" id="TypographySubmenu">
                <li>
                    <a routerLink="/fontFamilies" routerLinkActive="active">Font Families</a>
                </li>
                <li>
                    <a routerLink="/headers" routerLinkActive="active">Headers</a>
                </li>
                <li>
                    <a routerLink="/fontSizes" routerLinkActive="active">Font Sizes</a>
                </li>
                <li>
                    <a routerLink="/fontColors" routerLinkActive="active">Font Colors</a>
                </li>
            </ul>
        </li>
....



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

  constructor() { }

  ngOnInit() {
  }

}

Я пробовал несколько разных предложений в Интернете, но, похоже, ничего не работает.Мне не нужно ничего сумасшедшего, сложного, просто что-то простое, чтобы, когда пользователь щелкает свернутые меню, все рядом, чтобы предотвратить длинную прокрутку страницы.