Animation in Angular

Question

I created an Angular Sidebar by using a SidebarService Example:

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

Then I have a Sidebar component:

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

export class SidebarComponent {

  constructor(public sidebarService: SidebarService) { }

}

Which template is:

<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>

Finally I use it as follows:

<sidebar></sidebar>

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

<h1>Main Content</h1>

Questions

1. Instead of Hide/Show the sidebar is it possible to slide it from left?

2. Is using a service a good approach to share the hide/show the side bar in different places?
   Or is there a better option?

Answer 1

Instead of Hide/Show the sidebar is it possible to slide it from left?

You can use angular animation for ngIf toggle instead of hidden class.

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

and ts file:

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%)'}))
      ])
    ])
  ]

Demo here