angularanimationangular2-hostbinding

Use @HostBindings instead host in angular 4

I just try to make animation with angular 4 and I saw tutorial that use host in the component

import { Component, OnInit, HostBinding } from '@angular/core';
import { AngularFire, AuthProviders, AuthMethods } from 'angularfire2';
import { Router } from '@angular/router';
 import { moveIn } from '../router.animations';

@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css'],
animations: [moveIn()],
host: {'[@moveIn]': ''}
})

but it shows me error under the host property "[tslint] use @hostBindings and @HostListeners instead of the host property"

Solution

  • tslint are not errors. They are TypeScript linting messages created by the tslint webpack service.

    You can read more on TSLint here:

    https://palantir.github.io/tslint/

    For some reason, someone decided that using the host property in a component was a bad practice. You're perfectly fine to use that feature, and the other component configuration features.

    To disable this lint check edit your tslint.json file and add/modify the following:

        "use-host-property-decorator": false

    Setting it to false disables the check.