CODEWITHSUNDEEP
angularoutputeventemitter
Mellville
Mellville

Reputation: 1097

EventEmitter not emiting object in Angular 9

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

HTML of the component that will send the review to the API

<div *ngIf="movie">
  <div *ngFor="let m of movie">
    Details of {{m.Title}}

  </div>
  <button (click)="createReview()" mat-raised-button color="primary">Write your own review!</button>
  <template #usersreview>
    <app-reviews [movie]="movie" (sendCreds)="credentialsReceived($event)"></app-reviews>
</template>

  </div>

TS:

export class RightMovieComponent implements OnInit {
@Input() movie:any[]
@ViewChild('usersreview',{ read: ViewContainerRef, static: false }) container;
componentRef: ComponentRef<any>
  constructor(private location:Location, private resolver: ComponentFactoryResolver) { }

  ngOnInit(): void {
  }


  

    createReview(){
       this.container.clear();
      const factory: ComponentFactory<any> = this.resolver.resolveComponentFactory(ReviewsComponent);
      this.componentRef = this.container.createComponent(factory);
       this.componentRef.instance.movie = this.movie;
    
    }

credentialsReceived(review:any) {
    console.log(review); -----> nothing on the console, no errors, nothing
    //this.componentRef.destroy(); --->commented
    alert('review submited!');
  }
}

The TS of the reviews component

@Input() movie: any[];
  @Output() sendCreds: EventEmitter<any> = new EventEmitter<any>();
  user: User;
  reviewForm: FormGroup;
  movieTitle:any;

  constructor(private auth: AuthService, private fb: FormBuilder) {
    this.auth.currentUser.subscribe((user) => (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) => 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}); ------>here the the object is displayed on the console
    this.reviewForm.reset();
  }

Any help would be appreciated!

Upvotes: 0

Views: 57

Answers (1)

G&#233;r&#244;me Grignon
G&#233;r&#244;me Grignon

Reputation: 4228

You need to define the communication with the event emitter (as you defined the communication with the input), when creating the component dynamically :

this.componentRef.instance.sendCreds.subscribe(event => // do whatever);

Upvotes: 2

Related Questions