Angular

Hi Below is the data returned.I am trying below Html. I want to display only Name & Email. In List Data there are more than 2 columns like Id,Name,Email,Contact No. etc. <ng-container *ngFor="let column of displayedColumns" [matColumnDef]="column"> <th mat-header-cell *matHeaderCellDef>{{ column }}</th> <td mat-cell *matCellDef="let element">{{ element[column] }}</td> </ng-container> <!-- Header Row --> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <!-- Data Rows --> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> @Input() arrChildHead: string[] = []; @Input() lstChild: any[] = []; In arrChildHead it has 2 fields Name,Email. In Lstchild it is data which is returned through API. Thanks

Hi How to display Dynamic columns and data in Angular Material Table using Angular 17 In Header Column i want to display only empName,empEmail. Data - {empId: 1512, empName: 'Mark1', empContactNo: '6754673254', empAltContactNo: '8762347483', empEmail: '[email protected]' Thanks

Hi I am using Angular 17. Data is not getting displayed. Below is the code. TypeError: value.replace is not a function at _MatColumnDef._setNameInput (table.mjs:243:41) at set name (table.mjs:365:10) at applyValueToInputField (core.mjs:4035:29) at writeToDirectiveInput (core.mjs:11096:13) at setInputsForProperty (core.mjs:12391:9) at elementPropertyInternal (core.mjs:11692:9) at Module.??property (core.mjs:21289:9) at DynamicMatTableComponent_ng_container_19_Template (dynamic-mat-table.component.html:26:63) at executeTemplate (core.mjs:11268:9) at refreshView (core.mjs:12791:13) export class DynamicMatTableComponent implements OnInit,AfterViewInit,OnChanges { @Input() title?: string; @Input() arrChildHead: string[] = []; @Input() lstChild: any[] = []; @Input() tabelData: any []= []; @Input() columnArray: string [] = []; @Input() isAction: boolean = false; @Input() columns: any = []; @Input() actionColumn: any = []; @Input() permission: any; dataSource: MatTableDataSource<any>; displayedColumns: string[] = []; constructor(private cdr: ChangeDetectorRef) { this.dataSource = new MatTableDataSource<any>([]); this.paginator = {} as MatPaginator; } defaultImage:string='assets/images/icons/no-photo.png'; ngOnInit(): void { // this.pageSizeOptions = this._common.getPageSizeOptions(); // this.displayedColumns = this.getDisplayedColumns(); } ngOnChanges(changes:SimpleChanges){ this.isLoading = true; if (changes?.['lstChild'] && changes?.['lstChild'].currentValue) { this.dataSource = new MatTableDataSource<any>(this.lstChild); this.dataSource.paginator = this.paginator; thi

Hi I am trying to create Dynamic table using Angular Material. What should be the Html Code. Using ANgular 17 <section class="content"> <div class="content-block"> <app-dynamic-mat-table [tableData]="userArray" [columnArray]="['empName','empEmail']" ></app-dynamic-mat-table> </div> </section> export class DynamicMatTableComponent implements OnInit,AfterViewInit,OnChanges { @Input() title?: string; @Input() tabelData: any = []; @Input() columnArray: string [] = []; @Input() columns: any = []; @Input() actionColumn: any = []; @Input() permission: any; dataSource: MatTableDataSource<any>; constructor(private cdr: ChangeDetectorRef) { this.dataSource = new MatTableDataSource<any>([]); this.paginator = {} as MatPaginator; } defaultImage:string='assets/images/icons/no-photo.png'; ngOnInit(): void { // this.pageSizeOptions = this._common.getPageSizeOptions(); // this.displayedColumns = this.getDisplayedColumns(); } ngOnChanges(changes:SimpleChanges){ this.isLoading = true; if (changes?.['tabelData'] && changes?.['tabelData'].currentValue) { this.dataSource = new MatTableDataSource<any>(this.tabelData); this.dataSource.paginator = this.paginator; this.dataSource.sort = this.sort; this.isLoading = false; } } Thanks

Hi Can we compare 2 dates using directive. Thanks

Hi I have Classes dropdown . I don't want to be in each component. I want it dynamically so that it can be used in every Component. Whenever we should change it should appear in all components dropdown. Thanks

Hi I am passing below 2 columns to dynamic table. I want 1 more column = Actions. In some components i may have Edit..Delete. In some components i may have 3 like Edit,Delete,View. How this can be done dynamically this.columns = [ { title: "Type", name: "name" , visible: true }, { title: "Description", name: "description" , visible: true }, Thanks

Hi I am getting below error in ANgular 17 NullInjectorError: NullInjectorError: No provider for _HtpClient! at NullInjector.get (core.mjs:1654:27) at R3Injector.get (core.mjs:3093:33) at R3Injector.get (core.mjs:3093:33) at injectInjectorOnly (core.mjs:1100:40) at Module.??inject (core.mjs:1106:42) at Object.MyApplicationService_Factory [as factory] (my-application.service.ts:9:34) at core.mjs:3219:47 at runInInjectorProfilerContext (core.mjs:866:9) at R3Injector.hydrate (core.mjs:3218:21) at R3Injector.get (core.mjs:3082:33) Thanks

Hi I want that Dob should be greater than doj . and minimum difference between the two should be 1 year. ON below line i am getting error - Property 'dob' does not exist on type 'EmpAddEditComponent' <input matInput [matDatepicker]="picker" [appDateCompare]="dob" formControlName="doj"> <form [formGroup]="empForm" ngSubmit="Save()"> <div mat-dialog-content class="content"> <div class="row"> <mat-form-field> <mat-label>Choose a date</mat-label> <input matInput [matDatepicker]="picker" formControlName="dob"> <mat-hint>MM/DD/YYYY</mat-hint> <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> </mat-form-field> <mat-form-field> <mat-label>Choose a date</mat-label> <input matInput [matDatepicker]="picker" [appDateCompare]="dob" formControlName="doj"> <mat-hint>MM/DD/YYYY</mat-hint> <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> </mat-form-field> </div> </div> <div mat-dialog-actions class="action"> <button mat-raised-button color="warning">Cancel</button> <button mat-raised-button color="primary" (click)="OnSave()">Save</button> </div> </form> ---------------TYPESCRIPT export class EmpAddEditComponent implements OnInit { empForm : FormGroup; constructor(private _fb : FormBuilder){ this.empForm = this._fb.group({ dob:'', doj:'',

Hi I am getting error - Property 'appDateCompare' has no initializer and is not definitely assigned in the constructor. @Directive({ selector: '[appDateCompare]', standalone: true, providers: [ { provide: NG_VALIDATORS, useExisting: DateCompareDirective, multi: true } ] }) export class DateCompareDirective implements Validator { @Input('appDateComparison') appDateCompare: string; // FormControlName for DOB validate(control: AbstractControl): ValidationErrors | null { const dtStart0 = control.root.get(this.appDateCompare); if (!dtStart0 || !dtStart0.value || !control.value) { return null; } const dtStart = new Date(dtStart0.value); const dtEnd = new Date(control.value); if (dtEnd <= dtStart) { return { 'dateComparison': true }; } return null; } } <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 mb-2"> <mat-form-field class="example-full-width" appearance="outline"> <mat-label>Start Date</mat-label> <input matInput [matDatepicker]="picker" formControlName="startDate" required> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> </mat-form-field> </div> <mat-form-field class="example-full-width" appearance="outline"> <mat-label>End Date</mat-label> <input matInput [matDatepicker]="picker1" appDateComparison="startDate" formControlName="endDate" required> <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle> <mat-datepicker #picker1></mat-datepicker> @if (sessionForm.get('endDate')?.hasError('required')|| sessionForm.get('endDate')?.touched) { <mat-error> {{displayErrMessage.required}} </mat-

Hi I am using Angulat material Table. In Header i have Add Button and a dropdown with option Export to excel., csv . I want that dropdown options should be Dynamic. If i want export to pdf it should appear automatically in every component where dropdown is defined.. Thanks.

Hi DatePicker not allowing to pick date. It is not appearing. It is also giving error - MatDatepicker can only be associated with a single input. <form [formGroup]="form" ngSubmit="Save()"> <div mat-dialog-content class="content"> <div class="row"> <mat-form-field> <mat-label>Choose a date</mat-label> <input matInput [matDatepicker]="picker" formControlName="dob"> <mat-hint>MM/DD/YYYY</mat-hint> <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> </mat-form-field> <mat-form-field> <mat-label>Choose a date</mat-label> <input matInput [matDatepicker]="picker1" appDateComparison="dob" formControlName="doj"> <mat-hint>MM/DD/YYYY</mat-hint> <mat-datepicker-toggle matIconSuffix [for]="picker1"></mat-datepicker-toggle> <mat-datepicker #picker1></mat-datepicker> <!-- <div *ngIf="form.get('doj').hasError('dateComparison')"> <small>Date of joining must be after date of birth.</small> </div> --> </mat-form-field> </div> </div> <div mat-dialog-actions class="action"> <button mat-raised-button color="warning">Cancel</button> <button mat-raised-button color="primary" (click)="OnSave()">Save</button> </div> </form> constructor(private _fb : FormBuilder){ this.form = this._fb.group({ dob: ['', Validators.required], doj: ['', Validators.required] })

Hi I am passing below data to Child Component but action buttons are not getting displayed when Column Title = 'options' this.columns = [ { title: "Type", name: "name" , visible: true }, { title: "Description", name: "description" , visible: true }, { title: "Action", name: 'actions', visible: true, buttons: this._common.getActionButton(this.btnEditClick,this.btnDeleteClick,Function()) } ] ********************* <table mat-table [dataSource]="dataSource" class="w-100" matSort (matSortChange)="sortData($event)" *ngIf="!isLoading"> <ng-container *ngFor="let item of columns"> <ng-container [matColumnDef]="item.name"> <th mat-header-cell *matHeaderCellDef>{{ item.name }}</th> <td mat-cell *matCellDef="let element">{{ element[item.name] }}</td> </ng-container> <ng-container *ngIf="item.name === 'actions'"> <span mat-icon-button *ngFor="let actionButton of item.buttons" class="btn"> </span> </ng-container> </ng-container> Thanks

Hi I have below columns data returned. I want if name = actions' then in row 2 button Edit & Delete should be displayed in Angular 17 Columns are displayed like below 1: name: "description" title: "Description" Thanks

Hi I am getting getting error on these 2 fields startAT,EndAt. Using Angular 17. export class DateRangeValidatorDirective implements Validator { validate(control: AbstractControl): ValidationErrors | null { const start: Date = control.get('startAt').value; const end: Date = control.get('endAt').value; if (start && end) { const isRangeValid = end.getTime() - start.getTime() > 0; return isRangeValid ? null : { dateRange: true }; } return null; } } Thanks

Hi In below code i an getting above error on below line <div *ngIf="form.get('doj').hasError('dateComparison')"> <small>Date of joining must be after date of birth.</small> </div> <mat-form-field> <mat-label>Choose a date</mat-label> <input matInput [matDatepicker]="picker" formControlName="dob"> <mat-hint>MM/DD/YYYY</mat-hint> <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> </mat-form-field> <mat-form-field> <mat-label>Choose a date</mat-label> <input matInput [matDatepicker]="picker" appDateComparison="dob" formControlName="doj"> <mat-hint>MM/DD/YYYY</mat-hint> <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> <div *ngIf="form.get('doj').hasError('dateComparison')"> <small>Date of joining must be after date of birth.</small> </div> </mat-form-field> Thanks

Hi How to use below code to compare 2 dates using custom directive. Where i should write the below code so it can be used in any component where Data validation of this type is required. import {FormGroup, ValidatorFn, Validators} from '@angular/forms'; export function creatDateRangeValidator(): ValidatorFn { return (form: FormGroup): ValidationErrors | null => { const start:Date = form.get("startAt").value; const end:Date = form.get("endAt").value; if (start && end) { const isRangeValid = (end.getTime() - start.getTime() > 0); return isRangeValid ? null : {dateRange:true}; } return null; } } Thanks

Hi I have below columns data returned. I want if name = actions' then in row 2 button Edit & Delete should be displayed. Columns are displayed like below 1: name: "description" title: "Description" Thanks

Hi I am getting below error Access to fetch at 'freeapi.miniprojectideas.com/api/BigBasket/GetAllProducts' from origin 'localhost:4204' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. Thanks

Hi I have below array for Header information . I want to give proper Headings to table columns. What changes need to be done in Html arrheader = [ {'Head': 'Category','FieldName': 'categoryName'}, {'Head': 'Name','FieldName': 'productName'}, {'Head': 'Description','FieldName': 'productDescription'}, {'Head': 'Price','FieldName': 'productPrice'} ] import { Component, Input } from '@angular/core'; @Component({ selector: 'app-dynamic-table', template: ` <table mat-table [dataSource]="arrGrid"> <ng-container *ngFor="let header of arrHeader"> <ng-container [matColumnDef]="header"> <th mat-header-cell *matHeaderCellDef>{{ header }}</th> <td mat-cell *matCellDef="let element">{{ element[header] }}</td> </ng-container> </ng-container> <tr mat-header-row *matHeaderRowDef="arrHeader"></tr> <tr mat-row *matRowDef="let row; columns: arrHeader;"></tr> </table> `, }) export class DynamicTableComponent { @Input() arrHeader: any = []; @Input() arrGrid: any = []; } Thanks

Hi In below code if variable Action - true then i want to display Action in Header & Edit/Delete buttons in a row. <table mat-table [dataSource]="arrGrid"> <ng-container *ngFor="let header of arrHeader"> <ng-container [matColumnDef]="header"> <th mat-header-cell *matHeaderCellDef>{{ header }}</th> <td mat-cell *matCellDef="let element">{{ element[header] }}</td> </ng-container> </ng-container> <tr mat-header-row *matHeaderRowDef="arrHeader"></tr> <tr mat-row *matRowDef="let row; columns: arrHeader;"></tr> </table> Thanks

Hi I have below lines to get data from parent . I am using Angular material table. I want to display Headers,Columns dynamically in Angular Material table. @Input() arrHeader: any = []; @Input() arrGrid: any = []; Thanls

Hi I have below Html of one component. I want to display Data in a common Angular material table. How it can be done in Common table. <section class="content"> <div class="content-block"> <app-dynamic-mat-table [lstData]="lstData" [columns]="columns" ></app-dynamic-mat-table> </div> </section> <ng-template #content let-data> <div mat-dialog-title> <h4> Product Form </h4> </div> <form [formGroup]="frmProduct" ngSubmit="Save()"> <div mat-dialog-content class="content"> <div class="row"> <mat-form-field appearance="outline"> <mat-label>Product Name</mat-label> <input matInput type="text" appAlphanumeric formControlName="ProductName"> <mat-error *ngIf="frmProduct.get('ProductName')?.invalid && (frmProduct.get('ProductName')?.touched || frmProduct.get('firstName')?.dirty)"> <!-- <span *ngIf="empForm.get('firstName')?.errors?.['required']">This is required</span> <span *ngIf="empForm.get('firstName')?.errors?.['minlength']">Minimum length is 4</span> --> </mat-error> </mat-form-field> <mat-form-field appearance="outline"> <mat-label>Product Description</mat-label> <input matInput type="text" appNumeric formControlName="ProductDescription"> </mat-form-field> <mat-form-field appearance="outline"> <mat-label>Product Image</mat-label> <input matInput type="text" appNumeric formControlName="ProductImageUrl"> </mat-form-field> </div> </div> <div mat-dialog-

Hi How the below line works. Columns are passed to common Angular Material Table component. buttons: this._common.getActionButton(this.btnEditClick,this.btnDeleteClick,Function()) this.columns = [ { title: "Id", name: "Id" , visible: true }, { title: "Description", name: "description" , visible: true }, { title: "Action", name: 'actions', visible: true, buttons: this._common.getActionButton(this.btnEditClick,this.btnDeleteClick,Function()) } Thanks

Hi How to use Angular Material Table as common component. I don't want to replicate in all components. Thanks