title: Property 'visibility' does not exist on type 'UsersComponent'
body: <p>This is my <code>app.animation.ts</code> file:</p>
  
  <pre><code>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('* =&gt; *', 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)' }))
          ])
      ]);
  }
  </code></pre>
  
  <p>And the followings are my <code>users.component.ts</code> and <code>users.compontnt.html</code> files respectively:</p>
  
  <p>users.component.ts:</p>
  
  <pre><code>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 =&gt; this.user = user
      ,errmess =&gt; this.errMess = &lt;any&gt;errmess);
  
      this.imageService.getImages()
      .subscribe(images =&gt; this.default_user = images.find(image =&gt; image.filename == 'default_user.png')
      ,errmess =&gt; this.errMess = &lt;any&gt;errmess);
    }
  
  }
  </code></pre>
  
  <p>And <code>users.component.html</code> :</p>
  
  <pre><code>&lt;div class="container"
      fxLayout="row wrap"
      fxLayout.sm="column"
      fxLayout.xs="column"
      fxLayoutAlign.gt-md="space-around center"
      fxLayoutGap="10px" 
      fxLayoutGap.xs="0"&gt;
  
    &lt;div fxFlex="100" dir="rtl"&gt;
      &lt;div&gt;
        &lt;h3 *ngIf=""&gt;اطلاعات کاربر&lt;/h3&gt;
        &lt;hr&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div fxFlex="40" *ngIf="user" [@visibility]="visibility" [@expand]&gt;
      &lt;mat-card&gt;
        &lt;mat-card-header&gt;
          &lt;mat-card-title&gt;
            &lt;h3&gt;{{user.firstname | uppercase}}&lt;/h3&gt;
          &lt;/mat-card-title&gt;
        &lt;/mat-card-header&gt;
        &lt;img mat-card-image src="{{ baseURL + default_user.filename}}" &gt;
        &lt;mat-card-content&gt;
          &lt;p&gt;
              {{user.lastname}} 
          &lt;/p&gt;
        &lt;/mat-card-content&gt;
      &lt;/mat-card&gt;
    &lt;/div&gt;
  
    &lt;div fxFlex="40" *ngIf="user" [@visibility]="visibility" [@expand]&gt;
      &lt;mat-list&gt;
        &lt;h3&gt;مشخصات&lt;/h3&gt;
        &lt;mat-list-item &gt;
          &lt;h4 matLine&gt; {{user.firstname}} &lt;/h4&gt;
          &lt;p matLine&gt; {{user.lastname&lt;/p&gt;
              &lt;!--
          &lt;p matLine&gt;
            &lt;span&gt; -- {{comment.author}} {{comment.date | date }} &lt;/span&gt;
          &lt;/p&gt;
              --&gt;
  
        &lt;/mat-list-item&gt;
      &lt;/mat-list&gt;
    &lt;/div&gt;
    &lt;div [hidden]="user || errMess"&gt;
        &lt;mat-spinner&gt;&lt;/mat-spinner&gt;&lt;h4&gt;Loading . . . Please Wait&lt;/h4&gt;
    &lt;/div&gt;
    &lt;div *ngIf="errMess"&gt;
      &lt;h2&gt;Error&lt;/h2&gt;
      &lt;h4&gt;{{errMess}}&lt;/h4&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!--
          &lt;form novalidate [formGroup]="commentForm" #cform="ngForm" (ngSubmit)="onSubmit()"&gt;
        &lt;p&gt;
          &lt;mat-slider min="1" max="5" step="1" thumbLabel tickInterval="1" name="rating" formControlName="rating"&gt;&lt;/mat-slider&gt;
          &lt;mat-form-field class="full-width"&gt;
            &lt;textarea matInput formControlName="comment" placeholder="Your Comment" rows=12&gt;&lt;/textarea&gt;
            &lt;mat-error *ngIf="formErrors.comment"&gt;{{formErrors.comment}}&lt;/mat-error&gt;
          &lt;/mat-form-field&gt;
        &lt;/p&gt;
        &lt;button type="submit" mat-button class="background-primary text-floral-white" [disabled]="commentForm.invalid"&gt;Submit&lt;/button&gt;
      &lt;/form&gt;
  --&gt;
  </code></pre>
  
  <p>But I don't know why do I get these error messages:</p>
  
  <pre><code>ERROR in src/app/users/users.component.html:16:48 - error TS2339: Property 'visibility' does not exist on type 'UsersComponent'.
  
  16   &lt;div fxFlex="40" *ngIf="user" [@visibility]="visibility" [@expand]&gt;
                                                    ~~~~~~~~~~
  
    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       &lt;img mat-card-image src="{{ baseURL + default_user.filename}}" &gt;
                                       ~~~~~~~~
  
    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   &lt;div fxFlex="40" *ngIf="user" [@visibility]="visibility" [@expand]&gt;
                                                    ~~~~~~~~~~
  
    src/app/users/users.component.ts:11:16
      11   templateUrl: './users.component.html',
                        ~~~~~~~~~~~~~~~~~~~~~~~~
      Error occurs in the template of component UsersComponent.
  </code></pre>