title: Why my component in Angular doesn't display?
body: <p>I try to learn Angular Animation from : <a href="https://angular.io/guide/animations" rel="nofollow noreferrer">https://angular.io/guide/animations</a>. I think I have follow corretly the steps and my component  doesn't display.</p>
  <p><strong>index.html</strong></p>
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;title&gt;AngularAnimation&lt;/title&gt;
    &lt;base href=&quot;/&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
    &lt;link rel=&quot;icon&quot; type=&quot;image/x-icon&quot; href=&quot;favicon.ico&quot;&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;app-root&gt;&lt;/app-root&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <hr />
  <p><strong>app.component.html</strong></p>
  <pre><code>&lt;p&gt;YES&lt;/p&gt;
  &lt;app-open-close&gt;&lt;/app-open-close&gt;
  </code></pre>
  <p><strong>app.module.ts</strong></p>
  <pre><code>import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  import { OpenCloseComponent } from './open-close/open-close.component';
  
  @NgModule({
    declarations: [
      AppComponent,
      OpenCloseComponent
    ],
    imports: [
      BrowserModule,
      AppRoutingModule,
      BrowserAnimationsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  <p><strong>app.component.ts</strong></p>
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
  })
  
  export class AppComponent {
    title = 'AngularAnimation';
  }
  </code></pre>
  <hr />
  <p><strong>open-close.component.html</strong></p>
  <pre><code>&lt;p&gt;open-close work!&lt;/p&gt;
  &lt;div [@openClose] = &quot;isOpen ? 'open' : 'closed'&quot; class=&quot;open-close-containter&quot; &gt;
      &lt;p&gt;The box is now {{ isOpen ? 'Open' : 'Closed' }}! &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>open-close.component.ts</strong></p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { trigger, state, style, animate, transition } from '@angular/animations';
  
  @Component({
    selector: 'app-open-close',
    templateUrl: './open-close.component.html',
    styleUrls: ['./open-close.component.scss'],
    animations:[
      trigger('openClose' , [
        state('open' , style ({
          height: '200px',
          opacity: 1,
          backgroundColor: 'yellow',
        })),
        state('closed',style({
          height: '100px',
          opacity: 0.5,
          backgroundColor:'green',
        })),
        transition('open =&gt; closed' , [animate('1s')]),
        transition( 'closed =&gt; open' , [ animate('0.5s')]),
      ]),
    ]
  })
  
  export class OpenCloseComponent implements OnInit {
  
    isOpen = true;
  
    constructor() { }
  
    ngOnInit(): void {
    }
  
    toggle(){
      this.isOpen = !this.isOpen;
    }
  }
  </code></pre>
  <p>My project :
  <a href="https://i.stack.imgur.com/mZky9.png" rel="nofollow noreferrer">project tree structure</a></p>
  <p>It displays me correctly YES from <strong>app.component.html</strong> but not the rest.</p>
  <p>Thank's,</p>
  <p>BOSS_ladis</p>