Анимация в угловой

Question

Я создал угловую боковую панель с помощью SidebarService Пример :

export class SidebarService {
  public hidden: boolean = true;
  toggle(): void {
    this.hidden = !this.hidden;
  }
}

Тогда у меня есть компонент боковой панели:

@Component({
  selector: 'sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: [ './sidebar.component.css' ]
})

export class SidebarComponent {

  constructor(public sidebarService: SidebarService) { }

}

Какой шаблон:

<div id="sidebar" [ngClass]="{'hidden': sidebarService.hidden}">

  <button type="button" (click)="sidebarService.toggle()">
    Close Sidebar
  </button>

  <nav>
    <ul>
      <li>
        <a href="#">Page 1</a>
      </li>
      <li>
        <a href="#">Page 2</a>
      </li>
    </ul>
  </nav>

</div>

Наконец, я использую его следующим образом:

<sidebar></sidebar>

<button type="button" (click)="sidebarService.toggle()">
  Open Sidebar
</button>

<h1>Main Content</h1>

Вопросы

1. Вместо скрытия / показа боковой панели можно сдвинуть ее слева?

2. Является ли использование службы хорошим подходом для совместного использования скрытия / отображения боковой панели в разных местах?
   Или есть лучший вариант?

Answer 1

Вместо скрытия / показа боковой панели можно сдвинуть ее слева?

Вы можете использовать угловую анимацию для переключения ngIf вместо hidden класса.

<div *ngIf="!sidebarService.hidden" id="sidebar" [@anim]="sidebarService.hidden">

и файл ts:

animations: [
    trigger('anim', [
      transition(':enter', [
        style({transform: 'translateX(-100%)'}),
        animate('200ms ease-in', style({transform: 'translateX(0%)'}))
      ]),
      transition(':leave', [
        animate('200ms ease-in', style({transform: 'translateX(-100%)'}))
      ])
    ])
  ]

Демо здесь