title: Angular animations and services - error: Arguments array must have arguments
body: <p>I am following the <a href="https://angular.io/guide/animations#setup" rel="nofollow noreferrer">Angular.io</a> guide for angular animations but have run into an error. </p>
  
  <p>This is the sample code they provided.</p>
  
  <pre><code>export class Hero {
    constructor(public name: string, public state = 'inactive') { }
  
    toggleState() {
      this.state = this.state === 'active' ? 'inactive' : 'active';
    }
  }
  </code></pre>
  
  <p>While testing my service, I was able to properly inject the service into my navbar component and my basic toggleState() function works. However, when I add the <strong><em>public state = 'inactive'</em></strong> text into my service constructor I get an error.</p>
  
  <blockquote>
    <p>Arguments array must have arguments.</p>
  </blockquote>
  
  <p>I have been reading up on services and DI and cannot find the correct articles which can explain to me how to use public constructors in a service so I can fix my error.</p>
  
  <p>My current code:</p>
  
  <p><strong>navbar.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit, Input } from '@angular/core';
  import { trigger, state, style, animate, transition } from '@angular/animations';
  
  import { SidebarService } from '../../services/sidebar.service';
  
  @Component({
    selector: 'app-nav-bar',
    templateUrl: './nav-bar.component.html',
    styleUrls: ['./nav-bar.component.css'],      
  })
  export class NavBarComponent implements OnInit {
    @Input() navbarState;
  
    constructor(private sidebar: SidebarService) { }
  
    ngOnInit() {
    }
  
    toggleNavbar() {
      this.sidebar.toggleNavbar();
    }
  </code></pre>
  
  <p><strong>sidebar.service.ts</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  
  @Injectable({
    providedIn: 'root'
  })
  export class SidebarService {
  
    constructor(public state = 'inactive') { }
  
    toggleNavbar() {
      if (this.state === 'inactive') {
      console.log('it works');
      }
    }
  }
  </code></pre>
  
  <p><strong>navbar.component.html</strong></p>
  
  <pre><code>&lt;button class="navbar-toggler" type="button" (click)="toggleNavbar()"&gt;
  </code></pre>