I'm working in a Simple Crud app. When I will a binding(I didn't know if is correct) My child's template is rendered (it's a dialog component), but I want only pass value to the child's variable and it's work, but I don't know if it's a better way. How can i pass value without render my child's template?
My child Component.ts:
export class DialogFormUpdateComponent implements OnInit {
public titleForm!: string;
public form!: FormGroup;
equip!: Equipments;
@Input() Id!: number;
constructor(public dialogRef: MatDialogRef<DialogFormUpdateComponent>, private fb: FormBuilder,
private EquipmentService: EquipmentsService) {
}
ngOnInit(): void {
console.log(this.Id); // It's receiving Id value
this.EquipmentService.GetWithId(this.Id).subscribe(result => {
this.titleForm = "Update Equipment";
this.form = this.fb.group({
name: [result.name, [Validators.required]],
serialNumber: [result.serialNumber, [Validators.required]],
voltage: [result.voltage, [Validators.required]],
electricCurrent: [result.electricCurrent, [Validators.required]],
oil: [result.oil, [Validators.required]],
date: [result.date, [Validators.required]],
});
});
}
public SendFormUpdate(): void {
let newDate: moment.Moment = moment.utc(this.form.value.date).local();
this.form.value.date = newDate.format("YYYY-MM-DD");
const equipment: Equipments = this.form.value;
this.EquipmentService.PutEquipment(equipment).subscribe(result => {
alert("Equipment was send with success");
this.form.reset();
this.dialogRef.close();
})
}
Cancel() {
this.dialogRef.close();
this.form.reset();
}
}
Child Template:
<h1 mat-dialog-title>{{titleForm}}</h1>
<div mat-dialog-content>
<form [formGroup]="form" class="FormClass">
<mat-form-field >
<mat-label>Name</mat-label>
<input matInput formControlName="name" required>
</mat-form-field>
<mat-form-field >
<mat-label>Serial Number</mat-label>
<input matInput formControlName="serialNumber" required>
</mat-form-field>
<mat-form-field>
<mat-label>Voltage</mat-label>
<input matInput formControlName="voltage" required>
</mat-form-field>
<mat-form-field >
<mat-label>Electric Current</mat-label>
<input matInput formControlName="electricCurrent" required>
</mat-form-field>
<mat-form-field >
<mat-label>Oil</mat-label>
<input matInput formControlName="oil" required>
</mat-form-field>
<div fxLayout="row wrap">
<div fxFlex="50" fxFlexFill fxLayoutAlign="start center">
<mat-form-field appearance="fill" >
<mat-label>Register date</mat-label>
<input matInput formControlName="date" [matDatepicker]="picker">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker mat-datepicker #picker></mat-datepicker>
</mat-form-field>
</div>
</div>
</form>
</div>
<div mat-dialog-actions>
<button type="Submit" mat-raised-button color="primary" (click)="SendFormUpdate()" >Submit</button>
<button mat-button mat-raised-button color="accent" (click)="Cancel()" >Cancel</button>
</div>
My parent component.ts:
export class EquipmentsComponent implements OnInit {
ELEMENT_DATA!: Equipments[];
form: any;
titleForm!: string;
displayedColumns: string[] = ['name', 'serialNumber', 'voltage', 'electricCurrent', 'oil', 'date', 'actions'];
@Output() equipID: EventEmitter<number>= new EventEmitter<number>();
public dataSource = new MatTableDataSource<Equipments>(this.ELEMENT_DATA);
constructor(private EquipmentService: EquipmentsService, public dialog: MatDialog,
public DialogUpate: MatDialog, public DialogComponentUpdate: DialogFormUpdateComponent) { }
ngOnInit(): void {
//getall on start
this.EquipmentService.Getall().subscribe(result => {
this.dataSource.data = result as Equipments[];
});
}
//Open Create Form
NewEquipemnt(): void {
const dialogRef = this.dialog.open(DialogFormComponent,{
minWidth: '300px', disableClose: true
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
//get all
this.EquipmentService.Getall().subscribe(result => {
this.dataSource.data = result as Equipments[];
});
});
}
//Open Update Form
public UpdateEquipment(): void
{
const dialogRef = this.DialogUpate.open(DialogFormUpdateComponent,{
minWidth: '300px', disableClose: true
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
//get all
this.EquipmentService.Getall().subscribe(result => {
this.dataSource.data = result as Equipments[];
});
});
}
}
parent template:
<div class="pad-5 ">
<mat-card >
<div >
<button type="button" mat-raised-button color="primary" (click)="NewEquipemnt()">New Equipment</button>
</div>
<h2 class="m-top-10">Equipments Manager<hr/></h2>
<table mat-table [dataSource]="dataSource" class="mat-elevation-z2 w-100">
<ng-container class="m-r-10"matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<ng-container matColumnDef="serialNumber">
<th mat-header-cell *matHeaderCellDef> Serial Number </th>
<td mat-cell *matCellDef="let element"> {{element.serialNumber}} </td>
</ng-container>
<ng-container matColumnDef="voltage">
<th mat-header-cell *matHeaderCellDef> Voltage </th>
<td mat-cell *matCellDef="let element"> {{element.voltage}} </td>
</ng-container>
<ng-container matColumnDef="electricCurrent">
<th mat-header-cell *matHeaderCellDef> Electric Current </th>
<td mat-cell *matCellDef="let element"> {{element.electricCurrent}} </td>
</ng-container>
<ng-container matColumnDef="oil">
<th mat-header-cell *matHeaderCellDef> Oil </th>
<td mat-cell *matCellDef="let element"> {{element.oil}} </td>
</ng-container>
<ng-container matColumnDef="date">
<th mat-header-cell *matHeaderCellDef> Register date </th>
<td mat-cell *matCellDef="let element"> {{element.date}} </td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef> Actions </th>
<td mat-cell *matCellDef="let element">
<button class="pos-l-50 m-r-10" mat-raised-button color="accent" (click)="UpdateEquipment()" >Update</button>
<button class="pos-l-50" mat-raised-button color="warn">Delete</button>
<app-dialog-form-update [Id]="element.equipmentsID"></app-dialog-form-update>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</mat-card>
</div>
My template:
