Отображение и скрытие содержимого при навигации по меню в Angular 6

Я новичок в Angular. Я реализую веб-проект с использованием среднего стека и Angular 6. Там мне нужно открыть панель, и там есть меню. Я хочу открывать разные html-представления в разных компонентах при щелчке по пунктам меню.

Например, у меня есть панель, которая содержит меню в левой части, это компонент «тире». В этом меню есть пункт под названием «Карты». Когда я нажимаю на пункт меню «Карты», он должен отображать вид html в файле «maps.component.html». Здесь «тире» и «карты» - это два разных компонента.

Что я пробовал.

1. Определил логическую переменную isMap в файле dash.component.ts. Установите его значение как false в начале.

2. Изменено значение переменной на "true", когда заголовок элемента равен "Maps"

например:

//Select the relavant view according to the selected menu item
  onContecxtItemSelection(title) {
    if (title == "Maps") {
      this.isMaps=true;
    }
  }

3. Wrapped the html in maps.component.html using a div and set the 'isMap' variable using an '*ngIf'.

   например:

 <div style = "float: right; " *ngIf = "isMaps">
        <p>Map page</p>
 </div>

Мой первый вопрос:

1. Когда я нажимаю на пункт меню, он не показывает содержимое maps.component.html Второй вопрос:

2. Переменная isMaps в maps.component.html показывает следующую ошибку.

Идентификатор [Angular] isMaps не определен. Объявление компонента, объявления переменных шаблона и ссылки на элементы не содержат такого члена '. Я также попытался импортировать «компонент карт» в файл «dash.component.ts». Но не вышло. Я удалил эту часть.