Как вывести название пункта sidebar в head панель?

Вопрос, который вы задали, связан с фреймворком Angular и отображением названия пункта боковой панели в заголовке страницы. Для этого следует выполнить несколько шагов.

1. Сначала необходимо определить компонент, в котором у вас есть боковая панель и заголовок страницы. Здесь я предполагаю, что вы имеете два отдельных компонента: SidebarComponent и HeaderComponent.

2. В SidebarComponent вы можете использовать сервис для общения между компонентами. Создайте сервис, например, SidebarService, и определите в нем переменную selectedItem, которая будет содержать выбранный пункт боковой панели.

import { Injectable } from '@angular/core';

@Injectable()
export class SidebarService {
  public selectedItem: string = '';
}

3. В SidebarComponent импортируйте SidebarService, и в соответствующем методе, отслеживающем выбор пункта боковой панели, присваивайте значение выбранного пункта переменной selectedItem в сервисе SidebarService.

import { Component } from '@angular/core';
import { SidebarService } from 'путь_к_сервису';

@Component({
  selector: 'app-sidebar',
  template: `
    <ul>
      <li (click)="selectItem('Пункт 1')">Пункт 1</li>
      <li (click)="selectItem('Пункт 2')">Пункт 2</li>
      <li (click)="selectItem('Пункт 3')">Пункт 3</li>
    </ul>
  `,
})
export class SidebarComponent {
  constructor(private sidebarService: SidebarService) {}

  selectItem(item: string): void {
    this.sidebarService.selectedItem = item;
  }
}

4. Теперь в компоненте HeaderComponent вы можете получить доступ к значению выбранного пункта боковой панели через SidebarService и отобразить его в заголовке страницы.

import { Component } from '@angular/core';
import { SidebarService } from 'путь_к_сервису';

@Component({
  selector: 'app-header',
  template: `
    <h1>{{ selectedSidebarItem }}</h1>
  `,
})
export class HeaderComponent {
  constructor(private sidebarService: SidebarService) {}

  get selectedSidebarItem(): string {
    return this.sidebarService.selectedItem;
  }
}

5. Не забудьте добавить SidebarComponent и HeaderComponent в необходимые места вашего приложения. Например, в корневой компонент AppComponent.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <app-sidebar></app-sidebar>
    <app-header></app-header>
  `,
})
export class AppComponent {}

Теперь, при выборе пункта из боковой панели, его название будет отображаться в заголовке страницы. Это обеспечивает связь между компонентами через сервис в Angular.