title: EventEmitter not emiting object in Angular 9
body: <p>I have my app's architecture based on Outputs and Inputs mostly. Everything works fine, until I stumble upon this issue: I have a dynamic component where the user can write a review of a movie, but the object I send to the component responsible for communicating with the API is not receiving anything and I can't figure out why. Is it because of Dynamic creation? Here's the code</p>
  <p>HTML of the component that will send the review to the API</p>
  <pre><code>&lt;div *ngIf=&quot;movie&quot;&gt;
    &lt;div *ngFor=&quot;let m of movie&quot;&gt;
      Details of {{m.Title}}
  
    &lt;/div&gt;
    &lt;button (click)=&quot;createReview()&quot; mat-raised-button color=&quot;primary&quot;&gt;Write your own review!&lt;/button&gt;
    &lt;template #usersreview&gt;
      &lt;app-reviews [movie]=&quot;movie&quot; (sendCreds)=&quot;credentialsReceived($event)&quot;&gt;&lt;/app-reviews&gt;
  &lt;/template&gt;
  
    &lt;/div&gt;
  </code></pre>
  <p>TS:</p>
  <pre><code>export class RightMovieComponent implements OnInit {
  @Input() movie:any[]
  @ViewChild('usersreview',{ read: ViewContainerRef, static: false }) container;
  componentRef: ComponentRef&lt;any&gt;
    constructor(private location:Location, private resolver: ComponentFactoryResolver) { }
  
    ngOnInit(): void {
    }
  
  
    
  
      createReview(){
         this.container.clear();
        const factory: ComponentFactory&lt;any&gt; = this.resolver.resolveComponentFactory(ReviewsComponent);
        this.componentRef = this.container.createComponent(factory);
         this.componentRef.instance.movie = this.movie;
      
      }
  
  credentialsReceived(review:any) {
      console.log(review); -----&gt; nothing on the console, no errors, nothing
      //this.componentRef.destroy(); ---&gt;commented
      alert('review submited!');
    }
  }
  </code></pre>
  <p>The TS of the reviews component</p>
  <pre><code>@Input() movie: any[];
    @Output() sendCreds: EventEmitter&lt;any&gt; = new EventEmitter&lt;any&gt;();
    user: User;
    reviewForm: FormGroup;
    movieTitle:any;
  
    constructor(private auth: AuthService, private fb: FormBuilder) {
      this.auth.currentUser.subscribe((user) =&gt; (this.user = user));
    }
  
    ngOnInit(): void {
      this.reviewForm = this.fb.group({
        title: ['', Validators.required],
        body: ['', Validators.required],
      });
    }
    get title() {
      return this.reviewForm.get('title');
    }
    get body() {
      return this.reviewForm.get('body');
    }
  
    onSubmit() {
      if (this.reviewForm.invalid) return;
       this.movieTitle = this.movie.map((t) =&gt; t['Title']);
      let credentials = {
        author: this.user.username,
        title: this.title.value,
        body: this.body.value,
        movieTitle: this.movieTitle[0],
      };
      this.sendCreds.emit({creds:credentials}); ------&gt;here the the object is displayed on the console
      this.reviewForm.reset();
    }
  </code></pre>
  <p>Any help would be appreciated!</p>