Add formData to datasource array of objects angular - javascript

I am trying to push edited form data from edit-customers-dialog.ts to an array of objects in my datasource. The form.data.value comes back correctly, but it is not being inserted into the array properly.
I am having trouble finding the correct syntax on pushing to an interface data type. Please help as I'm new to angular. Thanks!
customers.html
  <mat-card-title>    
    <button id="invite" mat-raised-button color="primary" type="button" (click)="addCustomer()">
      Add Customer
    </button>
  </mat-card-title>
<mat-card-content>
<table mat-table [dataSource]="dataSource.data" class="mat-elevation-z8">
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let row"> {{row.name}} </td>
</ng-container>
<!-- Address Column -->
<ng-container matColumnDef="address">
<th mat-header-cell *matHeaderCellDef> Address </th>
<td mat-cell *matCellDef="let row"> {{row.address}}</td>
</ng-container>
<!-- Actions Column -->
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef> Actions </th>
<td mat-cell *matCellDef="let row">
<ng-container>
<button id="edit" mat-icon-button color="primary" title="Update Customer" (click)="editCustomer(row)" >
<mat-icon>edit</mat-icon>
</button>
<button id="delete" mat-icon-button color="warn" title="Delete Customer" (click)="deleteCustomer(row)">
<mat-icon>delete</mat-icon>
</button>
</ng-container>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator
showFirstLastButtons
[length] = "0"
[pageSizeOptions]="[25, 50, 75]"
>
</mat-paginator>
</mat-card-content>
</mat-card>
customers.component.ts
import {MatTableDataSource} from '#angular/material/table';
import { MatPaginator } from '#angular/material/paginator';
import { MatSort } from '#angular/material/sort';
import { MatDialog, MatDialogConfig, MatDialogRef} from '#angular/material/dialog/';
import { AddCustomerDialogComponent } from '../customers/add-customer-dialog/add-customer-dialog.component';
import { EditCustomerDialogComponent } from '../customers/edit-customer-dialog/edit-customer-dialog.component';
import {CustomerDataSource, CustomerListItem } from './customer.datasource';
#Component({
selector: 'app-customers',
templateUrl: './customers.component.html',
styleUrls: ['./customers.component.css']
})
export class CustomersComponent implements OnInit {
#ViewChild(MatPaginator) paginator: MatPaginator;
#ViewChild (MatSort) sort: MatSort;
dataSource: CustomerDataSource;
customer: CustomerListItem [];
displayedColumns: string[]
constructor(
public dialog: MatDialog) {}
ngOnInit() {
this.displayedColumns = ['name', 'address', 'actions'];
this.dataSource = new CustomerDataSource (this.paginator, this.sort,
);
}
editCustomer(customer: CustomerListItem){
const dialogRef = this.dialog.open(EditCustomerDialogComponent, <MatDialogConfig> {
data: customer,
});
dialogRef.afterClosed()
.subscribe(result => {
this.dataSource.data.push({name, address: ''})
console.log('The dialog was closed');
console.log(this.dataSource.data);
});
}
deleteCustomer(customer: CustomerListItem){
if(confirm('Are you sure you want to delete this customer?'))
{
this.dataSource.data = this.dataSource.data.filter(person => person.name != customer.name);
}
}
}
edit-customer-dialog.html
<h2 mat-dialog-title>
Edit Customer
</h2>
<form *ngIf="form" [formGroup]="form" (ngSubmit)="onSubmitForm()">
<mat-dialog-content class="container">
<mat-form-field>
<input matInput placeholder="Name" formControlName ="name" required/>
</mat-form-field>
<mat-form-field class="input">
<input id="placeholder" matInput placeholder="Address" formControlName ="address" required/>
</mat-form-field>
</mat-dialog-content>
<mat-dialog-actions>
<button
id="add"
mat-button
mat-raised-button
color="primary"
type="submit"
>
Update
</button>
<button id="cancel" mat-button mat-raised-button color="warn" mat-dialog-close>Cancel</button>
</mat-dialog-actions>
</form>
edit-customer-dialog-comptent.ts
import { Component, OnInit, Inject } from '#angular/core';
import { FormBuilder, FormGroup, FormControl, Validators } from '#angular/forms';
import { MAT_DIALOG_DATA, MatDialogRef} from '#angular/material/dialog/';
import {MatTableDataSource} from '#angular/material/table';
import { MatPaginator } from '#angular/material/paginator';
import { CustomerDataSource, CustomerListItem } from '../customer.datasource';
#Component({
selector: 'app-edit-customer-dialog',
templateUrl: './edit-customer-dialog.component.html',
styleUrls: ['./edit-customer-dialog.component.css']
})
export class EditCustomerDialogComponent implements OnInit {
form: FormGroup;
customer: CustomerListItem [];
constructor(
#Inject (MAT_DIALOG_DATA) public data: any,
private dialogRef: MatDialogRef<EditCustomerDialogComponent>,
private formBuilder: FormBuilder
) {}
ngOnInit() {
// Intitlaize the form
this.form = this.formBuilder.group({
name: this.data.name,
address: this.data.address
})
console.log(this.form.value);
}
onSubmitForm(){
// Update Customer
console.log(this.form.value);
this.dialogRef.close(this.form.value);
}
}
datasource array:
export interface CustomerListItem {
name: string;
address: string;
}
// TODO: replace this with real data from server
const EXAMPLE_DATA: CustomerListItem[] = [
{ name: 'Michael Jordan', address: '1111 Grail St. Concord MI 98076' },
{ name: 'Jeremy Scott', address: '7690 Wing Drive. Adidas, MI' },
{ name: 'Hiroki Nakamura', address: '980 Air Force Rd. Jubilee, MI' },
{ name: 'James Bond', address: '654 Depop Dr. Chicago, MI' },
{ name: 'Bill Bowerman', address: '1811 Hill St. Converse, MI' },
{ name: 'Clyde Frazier', address: '3333 Cement Ln. Jordan, MI'},
{ name: 'Jeff Staple', address: '4444 Black Cat Ct. Jordan,MI' },
{ name: 'Sophia Chang', address: '2006 Citrus Rd. Seven, MI'},
];

Add let i = index and pass i to the edit function
<td mat-cell *matCellDef="let row; let i = index;">
<ng-container>
<button id="edit" mat-icon-button color="primary" title="Update Customer" (click)="editCustomer(row, i)" >
<mat-icon>edit</mat-icon>
</button>
</ng-container>
</td>
editCustomer(customer: CustomerListItem, i: number){
}
Try reinitializing the data after the edit.
this.dataSource.data[i] = result;
this.dataSource.data = this.dataSource.data;
OR
const temp = this.dataSource.data;
temp[i] = result;
this.dataSource.data = temp;

Related

How to pass list of objects from angular component to html template created in material design

I have method getReports in my angular component where I subscribe to endpoint which looks like list of objects after console log, and where I want to display form, until issi, status for every report that I have in my list. But seems that I didn't properly passed data from component to html, I also use material ui for design.
{
"content": [
{
"id": 1,
"from": "2022-03-14T23:00:00",
"until": "2022-03-15T13:37:00",
"issi": "1500",
"format": "KML",
"creationDate": "2023-01-19T11:53:40.018808",
"status": "DOWNLOADABLE"
},
{
"id": 2,
"from": "2022-03-14T23:00:00",
"until": "2022-03-15T13:37:00",
"issi": "1500",
"format": "KML",
"creationDate": "2023-01-19T11:54:23.810516",
"status": "DOWNLOADABLE"
},
{
"id": 3,
"from": "2022-03-14T23:00:00",
"until": "2022-03-15T13:37:00",
"issi": "1500",
"format": "CSV",
"creationDate": "2023-01-19T11:55:24.018175",
"status": "DOWNLOADABLE"
},
],
"pageable": {
"sort": {
"empty": false,
"sorted": true,
"unsorted": false
},
"offset": 0,
"pageNumber": 0,
"pageSize": 25,
"unpaged": false,
"paged": true
},
"totalPages": 1,
"totalElements": 12,
"last": true,
"size": 25,
"number": 0,
"sort": {
"empty": false,
"sorted": true,
"unsorted": false
},
"first": true,
"numberOfElements": 12,
"empty": false}
here is my component
import {Component, ViewChild, AfterViewInit, Input} from '#angular/core';
import {MatPaginator} from '#angular/material/paginator';
import {ReportInterface} from "../../types/ReportInterface";
import {MatTableDataSource} from "#angular/material/table";
import {ReportsService} from "../../services/reports.service";
import {saveAs} from "file-saver";
#Component({
selector: 'app-reports-table',
templateUrl: './reports-table.component.html',
styleUrls: ['./reports-table.component.scss']
})
export class ReportsTableComponent implements AfterViewInit {
public displayedColumns: string[] = ['createdAt', 'from', 'until', 'devices', 'status', 'action'];
#Input() data: ReportInterface[] = [];
dataSource!: MatTableDataSource<any>;
// #ViewChild(MatPaginator) paginator: MatPaginator;
constructor(private reportsService: ReportsService) {
}
ngOnInit(): void {
this.getReports();
}
ngAfterViewInit(): void {
// this.dataSource.paginator = this.paginator;
}
downloadReport(id: number, format: 'CSV' | 'KML') {
this.reportsService.downloadReport(id).subscribe((buffer) => {
const data: Blob = new Blob([buffer], {
type: "text/csv;charset=utf-8"
});
if (format === 'CSV') {
return saveAs(data, "report-" + id + ".csv");
}
return saveAs(data, "report-" + id + ".kml");
});
}
getReports() {
this.reportsService.getAllReports().subscribe({
next: (element:ReportInterface[]) => {
this.dataSource = new MatTableDataSource(element);
console.log('aco',element);
},
error: (err) => {
alert('Error while fetching users');
},
});
}
}
and also my HTML template
<table mat-table [dataSource]="dataSource" class="reports-table">
<!-- Create at Column -->
<ng-container matColumnDef="createdAt">
<th mat-header-cell *matHeaderCellDef> Created at </th>
<td mat-cell *matCellDef="let element"> {{element.creationDate | date: 'd/M/yy - H:mm'}} </td>
</ng-container>
<!-- From Column -->
<ng-container matColumnDef="from">
<th mat-header-cell *matHeaderCellDef> From </th>
<td mat-cell *matCellDef="let element"> {{element.from | date: 'd/M/yy - H:mm'}} </td>
</ng-container>
<!-- Until Column -->
<ng-container matColumnDef="until">
<th mat-header-cell *matHeaderCellDef> To </th>
<td mat-cell *matCellDef="let element"> {{element.until | date: 'd/M/yy - H:mm'}} </td>
</ng-container>
<!-- Status Column -->
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef> Status </th>
<td mat-cell *matCellDef="let element"> {{element.status.toLowerCase()}} </td>
</ng-container>
<!-- Devices Column -->
<ng-container matColumnDef="devices">
<th mat-header-cell *matHeaderCellDef> Devices </th>
<td mat-cell *matCellDef="let element"> {{element.issi}} </td>
</ng-container>
<!-- Actions Column -->
<ng-container matColumnDef="action">
<th mat-header-cell *matHeaderCellDef> Action </th>
<td mat-cell *matCellDef="let element">
<button mat-button class="download-button" (click)="downloadReport(element.id, element.format)">Download in {{element.format}}</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<mat-paginator [pageSizeOptions]="[5, 10, 20]"
showFirstLastButtons
aria-label="Select page of periodic elements">
</mat-paginator>
</table>

How to post data of angular material stepper form to Node.Js backend

I have angular in front end and node.js in back end
I used angular material form stepper, it has 3 forms form1, form2, form3 for each step, on the last step
I need to join all objects in to one and post it to Node.js, I am new any help will be appreciated thanks.
bellow is my code:
<mat-horizontal-stepper linear #stepper>
<mat-step [stepControl]="firstFormGroup">
<form [formGroup]="firstFormGroup" #personalInfo="ngForm" (ngSubmit)="form1()">
<ng-template matStepLabel>Personal Information</ng-template>
<mat-form-field>
<input matInput placeholder="Surname/Family name" formControlName="lastnameCtrl" required>
</mat-form-field>
<br />
<mat-form-field>
<input matInput placeholder="First name" formControlName="firstnameCtrl" required>
</mat-form-field>
<br />
<mat-form-field>
<mat-label>Gender</mat-label>
<mat-select [formControl]="genderControl" required>
<mat-option></mat-option>
<mat-option *ngFor="let gender of genders" [value]="gender">
{{gender.value}}
</mat-option>
</mat-select>
<mat-error *ngIf="genderControl.hasError('required')">Please choose gender</mat-error>
</mat-form-field>
<div>
<!-- <button [disabled]="personalInfo.invalid" mat-raised-button color="warn" matStepperNext type="submit" >Save & continue</button> -->
<button mat-raised-button color="primary" matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step [stepControl]="secondFormGroup" [optional]="isOptional">
<form [formGroup]="secondFormGroup" #programAvailability="ngForm" (ngSubmit)="form2()">
<ng-template matStepLabel>Program Availability</ng-template>
<mat-form-field>
<input matInput placeholder="Email" formControlName="emailCtrl" required>
</mat-form-field>
<div>
<button mat-raised-button matStepperPrevious>Back</button>
<button mat-raised-button color="primary" matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step>
<form [formGroup]="thirdFormGroup" #programAvailability="ngForm" (ngSubmit)="form3()">
<ng-template matStepLabel>Confirm & submit</ng-template>
<mat-checkbox formControlName="agreementCtrl" (change)="changeCheck($event)"> I agree to....</mat-checkbox>
<div>
<button mat-raised-button matStepperPrevious>Back</button>
<button mat-raised-button [disabled]="disabledAgreement" color="primary" matStepperNext type="submit" >Submit</button>
<button mat-raised-button color="warn" (click)="stepper.reset()">Reset</button>
</div>
</form>
</mat-step>
and my component code is here:
import { Component, OnInit} from '#angular/core';
import { merge } from 'rxjs';
import {FormBuilder,FormControl, FormGroup, Validators} from '#angular/forms';
import{AgentService} from '../../services/agent.service';
import {PersonalData,ContactRequest, Agent} from '../../models/applicant.model';
import {ApplicantService} from '../../services/applicant.service';
#Component({
selector: 'app-manage-agent',
templateUrl: './manage-agent.component.html',
styleUrls: ['./manage-agent.component.css']
})
export class ManageAgentComponent implements OnInit {
firstFormGroup: FormGroup;
secondFormGroup: FormGroup;
thirdFormGroup:FormGroup;
selectedValue: string;
isEditable = false;
constructor(private agentService:AgentService,private _formBuilder: FormBuilder,private service:ApplicantService) { }
genderControl = new FormControl('', [Validators.required]);
genders: Gender[] = [
{value: 'Male', viewValue: 'Male'},
{value: 'Female', viewValue: 'Female'}
];
ngOnInit() {
//this.agentService.getNode();
this.firstFormGroup = this._formBuilder.group({
lastnameCtrl: ['', Validators.required],
firstnameCtrl: ['', Validators.required]
//genderCtrl: ['', Validators.required]
});
this.secondFormGroup = this._formBuilder.group({
emailCtrl: ['', Validators.required]
});
this.thirdFormGroup = this._formBuilder.group({
agreementCtrl: ['', Validators.required]
});
}
disabledAgreement: boolean = true;
changeCheck(event){
this.disabledAgreement = !event.checked;
}
form1(){
console.log(this.firstFormGroup.value);
}
form2(){
console.log(this.secondFormGroup.value);
}
form3(){
if(this.firstFormGroup.valid && this.secondFormGroup.valid && this.thirdFormGroup.valid){
console.log('----form is valid----');
console.log(this.firstFormGroup.value);
console.log(this.secondFormGroup.value);
console.log(this.thirdFormGroup.value);
const f1 = this.firstFormGroup.value;
const f2 = this.secondFormGroup.value;
const f3 = this.thirdFormGroup.value;
if(this.service.formData.Id==0){
this.insertRecord(form);
}
//---------Update Record---------//
else{
this.UpdateRecord(form);
this.resetForm();
}
}else{
console.log('--- form is invalid');
}
}
You can merge values from forms at the moment you are "commiting" the changes.
if(this.firstFormGroup.valid && this.secondFormGroup.valid && this.thirdFormGroup.valid){
const result = Object.assign({}, this.firstFormGroup.value, this.secondFormGroup.value, this.thirdFormGroup.value);
if(this.service.formData.Id==0){
this.insertRecord(result);
} else {
this.UpdateRecord(result);
this.resetForm();
}
}else{
console.log('--- form is invalid');
}

Expand ngx-datatable on view load

Have the below ngx-datatable where I want to have the first row expanded on view load. I have tried to call the toggleExpandRow(this.table.row[0]) on the angular lifecycle hook ngAfterViewChecked and the template is not getting updated with the row expanding. Has anyone accomplished this before with ngx-datatable? The below code does not run and is there for information purposes only.
import {
Component,
Input,
Output,
EventEmitter,
OnInit,
ChangeDetectionStrategy,
ViewEncapsulation,
ViewChild
} from '#angular/core';
import { defaultTrackByFn } from '#shared/utils';
import { Datatable } from '#app/stores/dashboard-store/models/datatable.model';
import { DatatableComponent as ngxDatatableComponent } from '#swimlane/ngx-datatable';
import { Observable } from 'rxjs';
import { ActiveToggleService } from '#dashboard/services/ActiveToggle.service';
#Component({
selector: 'fmsl-datatable',
templateUrl: './datatable.component.html',
styleUrls: ['./datatable.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class DatatableComponent implements OnInit {
#Input()
datatable: Datatable;
#Input()
isBorrower: boolean;
#ViewChild('loanTable')
table: ngxDatatableComponent;
#Input()
showLegend: boolean = true;
trackByFn: Function = defaultTrackByFn;
// TODO: Implement Datatable Actions
actions = ['replace with logic later'];
isBorrower$: Observable<boolean>;
constructor(private _toggleService: ActiveToggleService) {}
ngOnInit() {
// console.log('table:', this.table)
// console.log('table row detail', this.table.rowDetail)
// this.table.rowDetail.expandAllRows();
}
ngAfterViewChecked() {
console.log('table:', this.table)
console.log('table row detail', this.table.rowDetail)
console.log('table row:', this.table._rows[0])
this.table.rowDetail.toggleExpandRow(this.table._rows[0]);
}
toggleExpandRow(row) {
console.log('row toggled', row);
console.log('row table', this.table);
this.table.rowDetail.toggleExpandRow(row);
}
onDetailToggle(event) {
// on row detail expand we can do something
}
toggleActiveInactive(row) {
const { uuid, loanStatusTypeName } = row;
this._toggleService.toggleActiveInactive({ uuid, loanStatusTypeName });
}
}
<div class="row datatable-row">
<div class="col">
<!--mdc-replace datatable-->
<div [ngClass]="datatable.tableClass">
<!-- {{ datatable | json }} -->
<ngx-datatable
#loanTable
class="material expandable"
[rows]="datatable.rows"
[columnMode]="'flex'"
rowHeight="auto"
sortType="single"
[headerHeight]="42"
[footerHeight]="0"
[scrollbarH]="true"
[footerHeight]="0"
[loadingIndicator]="datatable.loading"
[messages]="datatable.messages"
>
<ngx-datatable-row-detail [rowHeight]="44" (toggle)="onDetailToggle($event)">
<ng-template
let-row="row"
let-expanded="expanded"
ngx-datatable-row-detail-template
>
<div class="expansion-row" style="padding-left:35px;">
<mdc-icon class="material-icons" aria-hidden="true">info_outline</mdc-icon>
<span
[innerHTML]="row.statusProperties.statusDetail"
class="datatable__expansion-row-message"
></span>
</div>
</ng-template>
</ngx-datatable-row-detail>
<ngx-datatable-column
[width]="50"
[resizeable]="false"
[sortable]="false"
[draggable]="false"
[canAutoResize]="false"
>
<ng-template let-row="row" let-expanded="expanded" ngx-datatable-cell-template>
<a
href="javascript:void(0)"
[class.datatable-icon-right]="!expanded"
[class.datatable-icon-down]="expanded"
title="Expand/Collapse Row"
(click)="toggleExpandRow(row)"
>
</a>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column
*ngFor="let col of datatable.columns; index as i; trackBy: trackByFn"
[name]="col.name"
resizeable="false"
[flexGrow]="col.flex"
[prop]="col.prop"
[pipe]="col.pipe"
>
<ng-template let-column="column" ngx-datatable-header-template let-expanded="true">
{{ col.name }}
</ng-template>
<ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
<div class="table-cell justify-content-start" [attr.data-heading]="col.name">
<span *ngIf="col.isIcon; else progressCell">
<fmsl-datatable-icon
*ngIf="value"
[actionRequiredBy]="value"
[legend]="datatable.legend"
[currentRole]="datatable.currentRole"
></fmsl-datatable-icon>
</span>
<div *ngIf="col.isActions" class="rowActions">
<button mdc-button (click)="toggleActiveInactive(row)">
Mark {{ row.loanStatusTypeName === 'active' ? 'Inactive' : 'Active' }}
</button>
</div>
<ng-template #progressCell>
<div *ngIf="col.isProgress; else linkCell" class="progress-container">
<mdc-linear-progress
class="progress-bar loan-status-progress-bar"
[determinate]="true"
[progress]="value"
></mdc-linear-progress>
</div>
</ng-template>
<ng-template #linkCell>
<span *ngIf="col.isLink; else valueCell">
<a
*ngIf="row.sharePointURL; else internalLink"
target="_blank"
href="{{ row.sharePointURL }}"
>{{ value }}
</a>
<ng-template #internalLink>
<a [routerLink]="['/dashboard/deal', 'loan-request-info', row.uuid]">{{
value
}}</a>
</ng-template>
</span>
</ng-template>
<ng-template #valueCell>
<span>{{ value }}</span>
</ng-template>
</div>
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
</div>
</div>
</div>
There is an open issue https://github.com/swimlane/ngx-datatable/issues/929 while using toggle functions with onInit and afterViewInit hooks.
To call toggle function inside ngAfterViewChecked is not a good idea, as this hook will be called multiple times. And once you get it expanded, you cannot collapse it.
Still there is a dirty workaround to call the toggle function inside AfterViewInit within setTimeout:
#ViewChild(DatatableComponent) private table: DatatableComponent;
constructor(private cdRef: ChangeDetectorRef) {}
setTimeout(() => {
this.table.rowDetails.toggleExpandedRow(ROW);
this.cdRef.detectChanges();
}, 1000);

How to link mat-progress bar with project id from mat-table

I have a Job Execution screen which displays list of Jobs and their status.
I want to create an Indeterminate mat-progress bar which will appear for Jobs which are executing and when the status of Job changes to stop or complete it should disappear.
I have created a progress bar but I cannot link it to mat-table id or status.
HTML Code:
<div class="main-content">
<mat-toolbar>
<mat-progress-bar
mode="indeterminate"
class="mat-progress-bar"
color="primary"
>
</mat-progress-bar>
<button
mat-icon-button
(click)="stop_exec_job(element)"
matTooltip="Stop Executing the Job"
>
<!-- Edit icon for row -->
<i class="material-icons" style="color:red"> stop </i>
</button>
</mat-toolbar>
<div class="card">
<div class="card-header">
<h5 class="title">Job Execution Stats</h5>
</div>
<mat-table [dataSource]="jobExecutionStat">
<!-- Id Column -->
<ng-container matColumnDef="id">
<mat-header-cell *matHeaderCellDef> ID </mat-header-cell>
<mat-cell *matCellDef="let element">{{ element.id }} </mat-cell>
</ng-container>
<ng-container matColumnDef="exec_date">
<mat-header-cell *matHeaderCellDef>
Execution Date
</mat-header-cell>
<mat-cell *matCellDef="let element"
>{{ element.exec_date }}
</mat-cell>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="curr_time_period">
<mat-header-cell *matHeaderCellDef>
Current Time Period
</mat-header-cell>
<mat-cell *matCellDef="let element"
>{{ element.curr_time_period }}
</mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="prev_time_period">
<mat-header-cell *matHeaderCellDef>
Previous Time Period
</mat-header-cell>
<mat-cell *matCellDef="let element"
>{{ element.prev_time_period }}
</mat-cell>
</ng-container>
<ng-container matColumnDef="status">
<mat-header-cell *matHeaderCellDef> Status </mat-header-cell>
<mat-cell *matCellDef="let element"
>{{ element.status }}
</mat-cell>
</ng-container>
<ng-container matColumnDef="actions">
<mat-header-cell *matHeaderCellDef> </mat-header-cell>
<mat-cell *matCellDef="let element; let index = index">
<button
mat-icon-button
(click)="stop_exec_job(element)"
matTooltip="Stop Executing the Job"
[disabled]="element.status == 'Completed'"
>
<!-- Edit icon for row -->
<i class="material-icons" style="color:red"> stop </i>
</button>
<!-- Delete icon for row -->
<button
mat-icon-button
(click)="re_run_job(element)"
matTooltip="Re-Run the Job"
[disabled]="
element.status == 'Running' ||
element.status == 'Pending'
"
>
<i class="material-icons" style="color:green">
cached
</i>
</button>
</mat-cell>
</ng-container>
<mat-header-row
*matHeaderRowDef="jobExecStatDisplayedColumns"
></mat-header-row>
<mat-row *matRowDef="let row; columns: jobExecStatDisplayedColumns">
</mat-row>
</mat-table>
</div>
Typescript Code:
import { Component, OnInit } from "#angular/core";
import { MatTableDataSource } from "#angular/material";
import { GlobalAppSateService } from "../../services/globalAppSate.service";
import { DataService } from "../../services/data.service";
import { SnakBarComponent } from "../custom-components/snak-bar/snak-
bar.component";
#Component({
selector: "app-job-execution-screen",
templateUrl: "./job-execution-screen.component.html",
styleUrls: ["./job-execution-screen.component.scss"]
})
export class JobExecutionScreenComponent implements OnInit {
jobExecStatDisplayedColumns = [
"id",
"exec_date",
"prev_time_period",
"curr_time_period",
"status",
"actions"
];
jobExecutionStat = new MatTableDataSource<Element>(ELEMENT_DATA);
constructor(
private dataService: DataService,
public globalAppSateService: GlobalAppSateService,
private snakbar: SnakBarComponent
) {}
ngOnInit() {
const project = JSON.parse(this.dataService.getObject("project"));
if (project != null) {
this.globalAppSateService.onMessage(project);
}
}
stop_exec_job(element) {
if(element.status == 'Running') {
this.snakbar.statusBar('Job Execution Stopped','Sucess');
}
}
re_run_job(element) {
if(element.status == 'Completed') {
this.snakbar.statusBar('Job Execution Started','Sucess');
}
}
}
const ELEMENT_DATA: Element[] = [
{
id: 1,
exec_date: "17-01-2016",
prev_time_period: "2016-04,2016-05,2016-06",
curr_time_period: "2016-08",
status: "Completed"
},
{
id: 2,
exec_date: "17-01-2017",
prev_time_period: "2017-04,2017-05,2017-06",
curr_time_period: "2017-08",
status: "Running"
},
{
id: 3,
exec_date: "27-07-2017",
prev_time_period: "2017-45,2017-46,2017-47",
curr_time_period: "2018-01,2018-02",
status: "Pending"
},
{
id: 4,
exec_date: "17-10-2018",
prev_time_period: "2017-30,2017-31,2017-32",
curr_time_period: "2018-01,2018-02",
status: "Completed"
},
{
id: 5,
exec_date: "21-01-2018",
prev_time_period: "2016-01,2016-02,2016-03,2016-04",
curr_time_period: "2016-52",
status: "Pending"
},
{
id: 6,
exec_date: "17-01-2018",
prev_time_period: "2017-31,2017-32,2017-33,2017-34",
curr_time_period: "2017-52",
status: "Running"
}
];
export interface Element {
id: number;
exec_date: string;
prev_time_period: string;
curr_time_period: string;
status: string;
}
Link for stackblitz
Stop button that is placed next to Job Name is working because the element variable is valid(i.e. inside mat-table tag).
But it's not working for Stop button next to Progress bar because the element variable is undefined/not valid(i.e. Outside of mat-table tag). That's why its giving error like 'TypeError: Cannot read property 'status' of undefined.'

Angular Material - Collapse inactive steps of Stepper

I have a Stepper from #Angular/Material and it looks great. However, I see many example that have only the current step opened up. I would like this functionality. All inactive steps should be closed.
[EDIT]: Just added in the HTML and TS file.
Component HTML File
<img width="350px" align="middle" mat-card-image src="../assets/Icon_Rev8.png" alt="Logo">
<mat-card-content>
<mat-tab-group mat-stretch-tabs [selectedIndex]="0" dynamicHeight=true>
<mat-tab label="Login">
<form>
<mat-form-field class="sameWidth">
<input matInput style="width:100%;" placeholder="Username">
</mat-form-field>
<mat-form-field class="sameWidth">
<input matInput style="width:100%;" placeholder="Password">
</mat-form-field>
</form>
<button class="sameWidth" mat-raised-button color="primary">Login</button>
<button class="sameWidth" mat-button color="primary">Forgot Password?</button>
</mat-tab>
<mat-tab label="Register">
<mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
<mat-vertical-stepper [linear]=true>
<mat-step [stepControl]="firstFormGroup">
<form [formGroup]="firstFormGroup">
<ng-template matStepLabel>Fill out your name</ng-template>
<mat-form-field>
<input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
</mat-form-field>
<div>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step [active]="true" [stepControl]="secondFormGroup">
<form [formGroup]="secondFormGroup">
<ng-template matStepLabel>Fill out your address</ng-template>
<mat-form-field>
<input matInput placeholder="Address" formControlName="secondCtrl" required>
</mat-form-field>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step>
<ng-template matStepLabel>Done</ng-template>
You are now done.
<div>
<button mat-button matStepperPrevious>Back</button>
</div>
</mat-step>
</mat-vertical-stepper>
<!--<form>
<table cellspacing="0">
<tr>
<td>
<mat-form-field>
<input style="width: 40%;" matInput placeholder="First Name">
</mat-form-field>
</td>
<td>
<mat-form-field>
<input style="width: 40%;" matInput placeholder="Last name">
</mat-form-field>
</td>
</tr>
</table>
<mat-form-field style="width:100%;">
<input matInput placeholder="Password">
</mat-form-field>
</form>-->
<mat-checkbox style="z-index: 1000;" color="primary">I Agree to the Terms and Conditions</mat-checkbox>
<button class="sameWidth" mat-raised-button color="primary">Register</button>
</mat-tab>
</mat-tab-group>
</mat-card-content>
Component TS File
import { Component, OnInit, ViewEncapsulation, Inject } from "#angular/core";
import {
MatIconRegistry,
MatDialog,
MatDialogRef,
MAT_DIALOG_DATA
} from "#angular/material";
import { DomSanitizer } from "#angular/platform-browser";
import { HttpClientModule, HttpClient } from "#angular/common/http";
import { FormBuilder, FormGroup, Validators } from "#angular/forms";
#Component({
selector: "app-login",
templateUrl: "login.component.html",
styleUrls: ["login.component.css"]
})
export class LoginComponent {
animal: string;
name: string;
constructor(
private _formBuilder: FormBuilder,
iconRegistry: MatIconRegistry,
sanitizer: DomSanitizer,
public dialog: MatDialog
) {
iconRegistry.addSvgIcon(
"close",
sanitizer.bypassSecurityTrustResourceUrl(
"assets/icons/ic_close_48px.svg"
)
);
}
openDialog(): void {
let dialogRef = this.dialog.open(LoginDialogComponent, {
width: "400px",
data: { name: this.name, animal: this.animal }
});
dialogRef.afterClosed().subscribe(result => {
console.log("The dialog was closed");
this.animal = result;
});
}
}
#Component({
selector: "dialog-login",
templateUrl: "loginDialog.component.html",
styleUrls: ["loginDialog.component.css"]
})
export class LoginDialogComponent {
constructor(
private _formBuilder: FormBuilder,
public dialogRef: MatDialogRef<LoginDialogComponent>,
#Inject(MAT_DIALOG_DATA) public data: any
) {}
onNoClick(): void {
this.dialogRef.close();
}
ngOnInit() {
this.firstFormGroup = this._formBuilder.group({
firstCtrl: ["", Validators.required]
});
this.secondFormGroup = this._formBuilder.group({
secondCtrl: ["", Validators.required]
});
}
}
My Current Status:
My Goal:
There is no official fix yet. I have submitted a bug-report and it is being looked into. For now I have researched and found a workaround for this issue. I had to add (selectionChange)="cambiaStep($event)" as an attribute to my <mat-vertical-stepper> tag. Then I had to add a <ng-container> under all of my <mat-step> tags. In each corresponding <ng-container>, I had to set an attribute based on which position it had in the stepper order. In each <ng-container> I had to add *ngIf="stepIndex === 0" but the 0 was based on its order in the steps (0: first, 1: second, 2: third, etc.)
My stepper ended up having code as such:
<mat-vertical-stepper (selectionChange)="cambiaStep($event)">
<mat-step>
<ng-container *ngIf="stepIndex === 0">
</ng-container>
</mat-step>
<mat-step>
<ng-container *ngIf="stepIndex === 1">
</ng-container>
</mat-step>
<mat-step >
<ng-container *ngIf="stepIndex === 2">
</ng-container>
</mat-step>
</mat-vertical-stepper>
I also had to add the event function in my component's *.ts file.
export class LoginDialogComponent {
stepIndex: number = 0;
cambiaStep(e) {
this.stepIndex = e.selectedIndex;
}
constructor() {}
}
I just copy pasted your code in default angular-material stepper code and it's showing like your goal
https://stackblitz.com/edit/angular-tpeo6s?embed=1&file=app/stepper-overview-example.html
Edit
It seems angular material bug to me.
if stepper is put out of tabs, it is working but inside tab, though aria-expanded="false" for inactive steps , material is not adding style="height: 0px; visibility: hidden;" to hide inactive steps.
you can log issues related to angular material 2 HERE

Categories

Resources