CODEWITHSUNDEEP
javascriptangulartypescriptviewchild
Akhil Paul
Akhil Paul

Reputation: 35

How to update parent component view when data is fetched from child component?

I have a parent and a child component, the child component is actually a modal where we can enter emails and click on 'Add to List'. The entered emails are then fetched from parent component using @ViewChild property. The array details are obtained in parent because I can console.log() and see them from parent.

But how do I update a part of view in Parent with this new data is received ?

The code and explanations are as below :

Child component :

"emails" is an array with email ids. I am fetching this array from child.

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-add-student-popup',
  templateUrl: './add-student-popup.component.html',
  styleUrls: ['./add-student-popup.component.scss']
})


export class AddStudentPopupComponent implements OnInit {
  emails: string[] = [];
  constructor() { }

  ngOnInit(): void {

  }

  **** Some other code that adds user entered emails to an array 'emails' ****
  ----
  ----

  sendData() {
    console.log(this.emails);
  }

}

Parent

import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';

// Add students modal popup
import { BsModalRef, BsModalService } from  'ngx-bootstrap/modal/';
import { AddStudentPopupComponent } from './add-student-popup/add-student-popup.component';

@Component({
  selector: 'app-create-course',
  templateUrl: './create-course.component.html',
  styleUrls: ['./create-course.component.scss']
})

export class CreateCourseComponent implements OnInit, AfterViewInit {
  bsModalRef!: BsModalRef;
  emails: string[] = [];
  isEmpty: boolean = true;

  @ViewChild(AddStudentPopupComponent) addStudent!: AddStudentPopupComponent;

  constructor(private modalService: BsModalService) { }

  ngOnInit(): any {}

  ngAfterViewInit(): void {
    if (this.addStudent) {
      this.emails = this.addStudent.emails;
      isEmpty = false;
    }
  }

  openAddStudentModal() {
    this.bsModalRef = this.modalService.show(AddStudentPopupComponent, {class: 'modal-lg'});
    this.bsModalRef.content.closeBtnName = 'Close';
  }

}

I want to use the updated "emails" array in my front end view. The view part using this array should be updated.

View part

When the popup is filled and submitted the emails array is populated and it should update the this view part.

<div class="multipleInput-container" *ngIf="!isEmpty;else noEmails">
    <div class="col-lg-12">
        <ul *ngFor="let email of emails">
            <li class="multipleInput-email">{{ email }}</li>
        </ul>
    </div>
</div>
<ng-template #noEmails>
    <div class="col-lg-3">
        <input type="text" class="form-control form-control-sm" 
            placeholder="No Students Added" aria-label="No Students Added">
    </div>
</ng-template>

Thanks in Advance

Upvotes: 1

Views: 896

Answers (1)

JsNgian
JsNgian

Reputation: 835

You should use @Output

In AddStudentPopupComponent

   emails: string[] = [];
   @Output() sendEmail = new EventEmitter();
   sendData() {
      this.sendEmail.emit(this.emails);
   }

then in create-course.component.html file

<app-add-student-popup (sendEmail)="emails = $event"></app-add-student-popup>

Upvotes: 1

Related Questions