Angular 6 use passing variables between components in the same file - node.js

Question

I have an Angular 6 app that uses API's to work. In my App I have to show some of the incoming data inside an Angular Material Dialog, so the dialog Component is located alongside with the principal component I'm using to display API's data.
Here's the thing, I want to transfer some of my data to the Dialog component, for example:
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-jours-feries',
templateUrl: './show-data.component.html',
styleUrls: ['./show-data.component.scss']
})
export class ShowDataComponent {
public data: any;
// data here will get the incoming data from the API
}
#Component({
selector: 'dialog.component',
templateUrl: 'dialog.component.html',
styleUrls: ['./dialog.component.scss']
})
export class DialogComponent {
// I want to use data property in this component without duplicating functions and variables
}
Here's my original code:
import { Component, OnInit, Inject } from '#angular/core';
import { FormControl, FormGroupDirective, NgForm, Validators } from '#angular/forms';
import { ErrorStateMatcher } from '#angular/material/core';
import { MatDialog, MAT_DIALOG_DATA } from '#angular/material';
import { ConfigurationService } from 'src/app/services/configuration.service';
export class MyErrorStateMatcher implements ErrorStateMatcher {
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
const isSubmitted = form && form.submitted;
return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
}
}
#Component({
selector: 'app-jours-feries',
templateUrl: './jours-feries.component.html',
styleUrls: ['./jours-feries.component.scss']
})
export class JoursFeriesComponent implements OnInit {
public displayedColumns: string[] = ['date', 'reserve', 'description', 'actions'];
public jourFeriesObjectHolder: any;
public description: any;
constructor(
private dialog: MatDialog,
private __ConfigurationService: ConfigurationService
) {
this.getJoursFeries();
}
/**
* Getting {{ Congés Annuels }} data from our service
*
*/
public getJoursFeries(){
this.__ConfigurationService.getJoursFeries().subscribe((data) => {
this.jourFeriesObjectHolder = data;
});
}
public getJoursFeriesDescription(){
this.__ConfigurationService.getJoursFeriesDesc().subscribe((data) => {
// this.jourFeries_IDHolder = data[0]._id;
// this.descExplicatifJourFer = data[0].description;
this.description = data[0].description;
});
}
openDialog() {
const dialogRef = this.dialog.open(AddUpdateJourFerieComponent, { data: this.description });
dialogRef.afterClosed().subscribe(confirm => {
if(confirm){
// do something
}
});
}
ngOnInit() {
}
}
#Component({
selector: 'add-update.component',
templateUrl: 'add-update.component.html',
styleUrls: ['./add-update.component.scss']
})
export class AddUpdateJourFerieComponent {
// Validate Jours Fériés
requiredDescriptionJoursFeries = new FormControl('', [
Validators.required
]);
requiredNameJoursFeries = new FormControl('', [
Validators.required
]);
requiredDateJoursFeries = new FormControl('', [
Validators.required
]);
requiredTextJoursFeries = new FormControl('', [
Validators.required
]);
matcher = new MyErrorStateMatcher();
/* Jour ferié */
public jourFerDate: string;
public isReservedHoliday: number = 0;
public descJourFer: string;
public descExplicatifJourFer: string;
public jourFeries_IDHolder: string;
constructor(#Inject(MAT_DIALOG_DATA) public data: any) {
console.log(data);
}
}
Any idea ?

Answer 1

let dialogRef = dialog.open(DialogComponent, {Data: { }})
Reference link for angular material dialog

Answer 2

i think you need to use EventEmitter for that, here is the doc link

Answer 3

I found the issue guys, I forgot to execute the fetching function in the main component constructor, and then create an object to pass it through.
constructor(
private dialog: MatDialog,
private __ConfigurationService: ConfigurationService
) {
this.getJoursFeries();
this.getJoursFeriesDescription(); // this one
}
openDialog() {
const dialogRef = this.dialog.open(AddUpdateJourFerieComponent, {
data: {
description: this.description
}
});
dialogRef.afterClosed().subscribe(confirm => {
//console.log(`Dialog result: ${confirm}`);
if(confirm){
}
});
}

Answer 4

Your code
constructor(
private dialog: MatDialog,
private __ConfigurationService: ConfigurationService
) {
this.getJoursFeries();
this.getJoursFeriesDescription(); // this one
}
openDialog() {
const dialogRef = this.dialog.open(AddUpdateJourFerieComponent, {
data: {
description: this.description
}
});
dialogRef.afterClosed().subscribe(confirm => {
//console.log(`Dialog result: ${confirm}`);
if(confirm){
}
});
}
Steps to receive your data on AddUpdateJourFerieComponent
import { Inject } from '#angular/core';
import { MAT_DIALOG_DATA, MatDialogRef, MatDialog } from '#angular/material'
constructor(#Inject(MAT_DIALOG_DATA) public data: any){}
ngOnInit() {
console.log(this.data, 'here is your data');
}