Property 'visibility' does not exist on type 'UsersComponent'

Question

This is my app.animation.ts file:

import { trigger, state, style, animate, transition } from '@angular/animations';

export function visibility() {
    return trigger('visibility', [
        state('shown', style({
            transform: 'scale(1.0)',
            opacity: 1
        })),
        state('hidden', style({
            transform: 'scale(0.5)',
            opacity: 0
        })),
        transition('* => *', animate('0.5s ease-in-out'))
    ]);
}
export function flyInOut() {
    return trigger('flyInOut', [
        state('*', style({ opacity: 1, transform: 'translateX(0)'})),
        transition(':enter', [
            style({ transform: 'translateX(-100%)', opacity: 0 }),
            animate('500ms ease-in')
        ]),
        transition(':leave', [
            animate('500ms ease-out', style({ transform: 'translateX(100%)', opacity: 0}))
        ])
    ]);
}

export function expand() {
    return trigger('expand', [
        state('*', style({ opacity: 1, transform: 'translateX(0)' })),
        transition(':enter', [
            style({ transform: 'translateY(-50%)', opacity: 0 }),
            animate('200ms ease-in', style({ opacity: 1, transform: 'translateX(0)' }))
        ])
    ]);
}

And the followings are my users.component.ts and users.compontnt.html files respectively:

users.component.ts:

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../services/auth.service';
import { ImagesService} from '../services/images.service';
import { Image } from '../shared/image';
import { User } from '../shared/user';
import { visibility, flyInOut, expand } from '../animations/app.animation';


@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.scss'],
  host: {
    '[@flyInOut]': 'true',
    'style': 'display: block;'
  },
  animations: [
    visibility(),
    flyInOut(),
    expand()
  ]
})
export class UsersComponent implements OnInit {

  user: User;
  default_user: Image;
  errMess: string;

  constructor(private imageService: ImagesService,
    private authService: AuthService) { }

  ngOnInit(): void {

    this.authService.getUser()
    .subscribe(user => this.user = user
    ,errmess => this.errMess = <any>errmess);

    this.imageService.getImages()
    .subscribe(images => this.default_user = images.find(image => image.filename == 'default_user.png')
    ,errmess => this.errMess = <any>errmess);
  }

}

And users.component.html :

<div class="container"
    fxLayout="row wrap"
    fxLayout.sm="column"
    fxLayout.xs="column"
    fxLayoutAlign.gt-md="space-around center"
    fxLayoutGap="10px" 
    fxLayoutGap.xs="0">

  <div fxFlex="100" dir="rtl">
    <div>
      <h3 *ngIf="">اطلاعات کاربر</h3>
      <hr>
    </div>
  </div>

  <div fxFlex="40" *ngIf="user" [@visibility]="visibility" [@expand]>
    <mat-card>
      <mat-card-header>
        <mat-card-title>
          <h3>{{user.firstname | uppercase}}</h3>
        </mat-card-title>
      </mat-card-header>
      <img mat-card-image src="{{ baseURL + default_user.filename}}" >
      <mat-card-content>
        <p>
            {{user.lastname}} 
        </p>
      </mat-card-content>
    </mat-card>
  </div>

  <div fxFlex="40" *ngIf="user" [@visibility]="visibility" [@expand]>
    <mat-list>
      <h3>مشخصات</h3>
      <mat-list-item >
        <h4 matLine> {{user.firstname}} </h4>
        <p matLine> {{user.lastname</p>
            <!--
        <p matLine>
          <span> -- {{comment.author}} {{comment.date | date }} </span>
        </p>
            -->

      </mat-list-item>
    </mat-list>
  </div>
  <div [hidden]="user || errMess">
      <mat-spinner></mat-spinner><h4>Loading . . . Please Wait</h4>
  </div>
  <div *ngIf="errMess">
    <h2>Error</h2>
    <h4>{{errMess}}</h4>
  </div>
</div>

<!--
        <form novalidate [formGroup]="commentForm" #cform="ngForm" (ngSubmit)="onSubmit()">
      <p>
        <mat-slider min="1" max="5" step="1" thumbLabel tickInterval="1" name="rating" formControlName="rating"></mat-slider>
        <mat-form-field class="full-width">
          <textarea matInput formControlName="comment" placeholder="Your Comment" rows=12></textarea>
          <mat-error *ngIf="formErrors.comment">{{formErrors.comment}}</mat-error>
        </mat-form-field>
      </p>
      <button type="submit" mat-button class="background-primary text-floral-white" [disabled]="commentForm.invalid">Submit</button>
    </form>
-->

But I don't know why do I get these error messages:

ERROR in src/app/users/users.component.html:16:48 - error TS2339: Property 'visibility' does not exist on type 'UsersComponent'.

16   <div fxFlex="40" *ngIf="user" [@visibility]="visibility" [@expand]>
                                                  ~~~~~~~~~~

  src/app/users/users.component.ts:11:16
    11   templateUrl: './users.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component UsersComponent.
src/app/users/users.component.html:23:35 - error TS2339: Property 'baseURL' does not exist on type 'UsersComponent'.

23       <img mat-card-image src="{{ baseURL + default_user.filename}}" >
                                     ~~~~~~~~

  src/app/users/users.component.ts:11:16
    11   templateUrl: './users.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component UsersComponent.
src/app/users/users.component.html:32:48 - error TS2339: Property 'visibility' does not exist on type 'UsersComponent'.

32   <div fxFlex="40" *ngIf="user" [@visibility]="visibility" [@expand]>
                                                  ~~~~~~~~~~

  src/app/users/users.component.ts:11:16
    11   templateUrl: './users.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component UsersComponent.

Answer 1

The syntax [@visibility]="visibility" uses an animation named visibility, and binds the animation state to a property also named visibility which is expected to exist in the component.

Your UsersComponent class doesn't appear to have that visibility property, which would need the value 'shown' or 'hidden'.