Angular 5 animations issue

Question

I'm new in angular animations and currently following the Angular guide "Entering and leaving" part.

Currently I have something like that

<section
  class="row justify-content-center mb-2 mb-md-4"
  *ngFor="let site of sites"
  [@flyInOut]="site.state"
>

...repeatable content

</section>

and in component

import { Component, OnInit } from '@angular/core';
import { SiteService } from '../../Services/site.service';
import { Site } from './site';
import {
  trigger,
  state,
  style,
  animate,
  transition
} from '@angular/animations';

declare const $;

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
  providers: [SiteService ],
  animations: [
    trigger('flyInOut', [
      state('in', style({transform: 'translateX(0)'})),
      transition('void => *', [
        style({transform: 'translateX(-100%)'}),
        animate(100)
      ]),
      transition('* => void', [
        animate(100, style({transform: 'translateX(100%)'}))
      ])
    ])
  ]
})
export class HomeComponent implements OnInit {
  sites: Site[] = [];

  constructor(
    siteService: SiteService,
    public name: string,
    public state: string = 'in'
  ) {
    this.sites = siteService.getSites();
  }

  ngOnInit(): void {
    $(function () {
      $('[data-toggle="tooltip"]').tooltip();
    });
  }

}

Animations module is imported in main module.

When site is loading it throws an error

Do you have a parameter of type `String` in your `HomeComponent`'s constructor? — Amit Beckenstein, Apr 01 '18 at 12:15
The code is shown. It is a homecomponent's code. There are two parameters which are strings - state and name. — Sergey, Apr 01 '18 at 12:16
Oh sorry, I didn't see the scroll bar. I'll write an answer right away. — Amit Beckenstein, Apr 01 '18 at 12:19

score 0 · Answer 1 · answered Apr 01 '18 at 12:27

The problem is that you have a string in your constructor, and as you know, parameters in the constructor of Angular components are injected or provided, which is called Dependency Injection. Currently, it seems you have no provider for the string in your constructor. You have 2 ways of doing so:

You need to provide a value for the string by using @Inject() decorator for the constructor parameter, like so:
```
constructor(siteService: SiteService, @Inject(HOME_COMPONENT_NAME) name, ...)
```
Where HOME_COMPONENT_NAME is an InjectionToken.
Provide a value for the string by using provide(string, {useValue: ...}) in your @Component() decorator, like so:
```
@Component({
    providers: [SiteService, provide(string, {useValue: 'your_string_here'})]
})
export class HomeComponent {
```
Where 'your_string_here' is the value of your string.

I suggest you read more about Dependency Injection in Angular, and refer to this issue.

I wish I knew what you mean. I follow guide exactly how it’s written. — Sergey, Apr 01 '18 at 14:45

Angular 5 animations issue

1 Answers1