binding - How to call another component function from model component in angular?

Question

I need to call the addItems function of homecomponent from modalcomponent.When i call the function the function is called but the row is not added in html. I need to add a new item row when function is called .Below is my code Home Component

import { Component, OnInit } from '@angular/core';
import { CommonComponent } from '../../common/common.component';
import  $ from 'jquery';
import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})  
export class HomeComponent implements OnInit {

  constructor(public common:CommonComponent) { }

  item_row: any[] = [];
  ngOnInit(): void {
    console.log(this.common.quote_company);
    this.item_row.push({
      'item_name':null,
      'hsn_code':null,
      'unit_price':null,
      'qty':null,
      'taxable_value':null,
      'total':null
    })
  }
   testJquery(){
    $('.test').html('test'); 
  }

  addItems(){
  this.addRow();
  }
  addRow(){
    const new_row={
      'item_name':'test',
      'hsn_code':'test',
      'unit_price':'test',
      'qty':'test',
      'taxable_value':'test',
      'total':'test'
    }
    this.item_row.push(new_row);
    console.log(this.item_row);
  }


}

I am calling the homecomponent function from modal component html. when this function is called a new row should be appended to the table.

Modal Component

import { Component, OnInit ,EventEmitter, Output } from '@angular/core';
import { AddQuoteComponent } from '../add-quote/add-quote.component';
import { CommonComponent } from '../../common/common.component';
import { HomeComponent } from '../home/home.component';
import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css']
})
export class ModalComponent implements OnInit {

  constructor(
    public home : HomeComponent,
    public common :CommonComponent
    ) { }

  ngOnInit(): void {

  }
  selectItem(){
    console.log('test');
    this.home.addItems();
  } 

}

Answer 1

Hello Dinesh D here is i have explain please check and go ahead step by step.

First you have to create 2 component and html file as well also add MatDialog material.

AddConfigurableProductComponent ConfigurableProductComponent

FYI below ConfigurableProductComponent in import AddConfigurableProductComponent

import { AddConfigurableProductComponent } from './add-configurable-product/add-configurable-product.component'

Product List page in i have below button html

<div class="add-button mt-20">
    <button type="button" (click)="addCampaignProduct()" mat-raised-button color="primary"
      [title]="'ADD_CAMPAIGN_PRODUCT' | translate:lang">
      <i class="material-icons">add_circle</i>{{ 'ADD_CAMPAIGN_PRODUCT' | translate:lang }}
    </button>
  </div>

Now i am click at that time call function for addCampaignProduct() call function under component "ConfigurableProductComponent".

 addCampaignProduct() {
    const dialogRef = this.dialog.open(AddConfigurableProductComponent, {
      disableClose: true,
      data: { campaignId: this.params.id }
    })
    dialogRef.afterClosed().subscribe(() => {
      this.getProductList()
    });
  }

under AddConfigurableProductComponent

ngOnInit() {

}