Fitting a mat-accordion inside ag-grid

Issue I have a fairly standard setup of ag-grid with a nested component as follows : import { Component } from ‘@angular/core’; import * as agGrid from ‘ag-grid-community’; import { NestedMatExpansionPanelComponent } from ‘./nested-mat-expansion-panel/nested-mat-expansion-panel.component’; @Component({ selector: ‘app-root’, templateUrl: ‘./app.component.html’, styleUrls:

Continue reading

Angular5 – How to detect empty or deleted field in mat-autocomplete?

Issue This is my html which contains the material autocomplete. <ng-container *ngSwitchCase=”‘autocomplete'”> <div [ngClass]=”(filter.cssClass || ‘col-md-4’) + ‘ mt-2 pt-1′”> <div class=”filter-key-label”> {{filter.columnTitle}} </div> <div class=”filter-form-control d-flex flex-wrap justify-content-left”> <mat-form-field class=”full-width”> <input type=”text” matInput [formControl]=”myControl” [matAutocomplete]=”auto” ng-model=”blah”> <mat-autocomplete #auto=”matAutocomplete”> <mat-option

Continue reading

Mat Radio Button Color Change in Angular

Issue Change The Color Of Angular Material mat-radio-button ,I am using Angular 11 Version & Angular Material 11.0.4 Version <mat-radio-group aria-label="Select an option"> <mat-radio-button [color]="primary" value="1" >Without Template</mat-radio-button> </mat-radio-group> Solution i searched lot of things ,but finally i got the

Continue reading

ng-repeat v/s md-virtual-repeat

Issue Difference between angular ng-repeat and angular material md-virtual-repeat? When should i use one or another? Solution ng-repeat renders all elements in list, its less performant on large lists. md-virtual-repeat renders list what is visible on viewport, it doesn’t render

Continue reading

Angular Dropdown Excel Post

Issue I want to create a selection dropdown that when the user select a value it will send to the backend controller. This is my code so far anyone could help HTML <mat-form-field appearance="fill" class="dropDown1"> <mat-select [(ngModel)]="selectedTemplate"> <mat-option *ngFor="let items

Continue reading

Angular Material Collapsible Card

Issue Is there a way to make a collapsible card using angular material? Seems like something that would be fairly popular, but I’ve been searching for the appropriate angular material component/setting here:Angular Material – Card and found nothing. Thanks! Solution

Continue reading

[Object][Object] angular

Issue I’m trying to display the value in my form why i get [Object][Object] in my display i tried the ngModel but i have a validators this is the out TS ngOnInit(): void { this.Form = this.fb.group({ Code: ({value:this.idObj,}, Validators.required),

Continue reading

Can't bind to 'matCellDefTrackBy' since it isn't a known property of 'mat-cell'

Issue How to use trackBy in angular material? I get the following error: Can’t bind to ‘matCellDefTrackBy’ since it isn’t a known property of ‘mat-cell’ html: <mat-table [dataSource]="data" matSort matSortDisableClear matSortActive="name" matSortDirection="asc"> <ng-container [matColumnDef]="column.value" *ngFor="let column of allCols"> <mat-header-cell *matHeaderCellDef

Continue reading

Property 'table' has no initializer and is not definitely assigned in the constructor

Issue I want following the example in this [link] (https://javascript.plainenglish.io/beautiful-styling-for-drag-and-drop-rows-in-the-angular-datatable-6870768c5a8f) to create a Drag Drop in Material table. app.component.ts: import { Component,ElementRef,ViewChild } from ‘@angular/core’; import {MatTable} from ‘@angular/material/table’; import { CdkDragDrop, moveItemInArray,transferArrayItem } from ‘@angular/cdk/drag-drop’; export interface PeriodicElement {

Continue reading

Angular material date picker return Moment object instead of Date

Issue I have a strange problem, in my html I defined- <mat-radio-button value=”embargoed”> <div>Everyone, limited by date</div> <mat-form-field *ngIf=”data.selected === ’embargoed'”> <mat-label>Available from date</mat-label> <input matInput [matDatepicker]=”picker” #input [(ngModel)]=”date”> <mat-datepicker-toggle matSuffix [for]=”picker”></mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> </mat-form-field> </mat-radio-button> in my comonent I

Continue reading

MatDialogRef on close sending data to parent undefined Angular 13 with angular material 13

Issue Parent component constructor(private dialog: MatDialog) {} openCreateMetric() { this.dialog.open(MetricCreateComponent, { width: ‘50%’, disableClose: true, autoFocus: ‘dialog’, }); this.dialog.afterAllClosed.subscribe((closeTrigger) => { console.log(closeTrigger) –> Always undefined at the parent this.loadFlag.next(Math.random()) }); } Child component export class MetricCreateComponent extends AppComponentBase implements OnInit,

Continue reading

Clear input button renders differently when using component

Issue I have following material form: <mat-form-field appearance="fill"> <mat-label>Email alebo ID používateľa</mat-label> <input #input matInput type="text" placeholder="123 | mail@mail.com" formControlName="inputValue" /> <button matSuffix type="button" *ngIf="this.userForm.get(‘inputValue’)!.value" mat-icon-button (click)="this.userForm.get(‘inputValue’)?.setValue(”)" > <mat-icon inline="true">close</mat-icon> </button> </mat-form-field> Which displays the following result, where the ‘x’

Continue reading

Angular cdk-virtual-scroll-viewport: scroll up is not working

Issue I have created simple virtual scroll with 5000 elements. But when you are scrolling up via mousewheel – elements are stopping and not scrolling at all expected behaviour: scrolling should work smoothly any thoughts? DEMO: https://stackblitz.com/edit/angular-h4xptu-r24hpq?file=app%2Fselect-reset-example.ts,app%2Fselect-reset-example.html <mat-form-field> <mat-select [formControl]="form"

Continue reading

Event in (selectionChange) returns error Cannot read properties of undefined (reading 'value')

Issue I have built a mat-select that looks like this in the template: <mat-form-field> <mat-select (selectionChange)="setActualYear($event)"> <mat-option *ngFor="let actualYears of navService.actualYearsDropdown" [value]="actualYears"> {{ actualYears }} </mat-option> </mat-select> </mat-form-field> For the change I have built the following function: /** * Function

Continue reading

Applying css styling for native material select

Issue I have two dropdown below: Basic Mat select Basic native select <h4>Basic mat-select</h4> <mat-form-field appearance="fill"> <mat-label>Favorite food</mat-label> <mat-select> <mat-option *ngFor="let food of foods" [value]="food.value"> {{food.viewValue}} </mat-option> </mat-select> </mat-form-field> <h4>Basic native select</h4> <mat-form-field appearance="fill"> <mat-label>Cars</mat-label> <select matNativeControl required> <option value="volvo">Volvo</option>

Continue reading

Angular Select shows MatIcon as a part of value

Issue Here is my code: <mat-select > <mat-option *ngFor="let option of options" [value]="option.id" [disabled]="option.disabled" [matTooltip]="option.tooltip" > <div [innerHtml]="option.label"></div> <button *ngIf="!option.cannotBeDeleted" (click)="deleteOption(option.id)" class="delete-action-button" mat-icon-button > <mat-icon>delete</mat-icon> </button> </mat-option> </mat-select> And when i select an element i get this: It adds "delete",

Continue reading

Don't show blank record on autocomplete in Angular

Issue I have this autocomplete in Angular <input type="text" matInput [ngModel]="List" #searchInput [matAutocomplete]="autocopmlete" (focus)="filter(”)" (ngModelChange)="filter($event)"> <mat-autocomplete #autocopmlete="matAutocomplete" [displayWith]="Name"> <mat-option *ngFor="let item of filteredObject" [value]="item" (onSelectionChange)="selectUser($event,item)" (click)="searchInput.value=”"> {{ item.Name }} </mat-option> </mat-autocomplete> we use this filter function filter(value = ”) {

Continue reading

Angular Material Table: action button also clickable

Issue In the Angular Material table, I have done the following code in the html: <mat-table [dataSource]="dataSource1" class="mat-table"> <ng-container matColumnDef="col1"> <mat-header-cell *matHeaderCellDef> Col1 </mat-header-cell> <mat-cell *matCellDef="let element"> {{element.col1}} </mat-cell> </ng-container> <!– Weight Column –> <ng-container matColumnDef="col2"> <mat-header-cell *matHeaderCellDef> Col2 </mat-header-cell>

Continue reading

Angular select list multiple selection with no checkbox not working properly

Issue Im doing a list of selectable items and checkbox should not be visibile. Demo : https://stackblitz.com/edit/mat-selection-list-get-options-gcsdjd?file=src%2Fapp%2Flist-selection-example.css,src%2Fapp%2Flist-selection-example.ts Background field when items selected its not working properly Solution I think what happens in your CSS is that mat-list-option:hover and mat-list-option:focus styles

Continue reading

Routing in matdialog in Angular

Issue I am trying to add routing to a Angular Material Mat Dialog in angular. But there is an problem occurring. When I try to add the route URL manually from https://localhost:3200 to https://localhost:3200/login or https://localhost:3200/signin it don’t pop up

Continue reading