Using ng-template as cellRenderer in ag-grid / Angular 5

It would seem that whenever you want to customize the output of the cell by something more than just text transformation, you need a cellRenderer. But it requires a whole new component to fulfill that goal. That approach is, in general, fine, but I've found that in my project I'm using grids a lot, and I need custom cell renderers for them. Most of the time they are also not re-usable and specific to particular grid. The overhead for creating (and storing somewhere in the filesystem) another component, just for the sake of providing an HTML tem...Read more

npm - Angular 5 (tour of heroes) tutorial: Cannot find module '@angular-in-memory-web-api' error

I found a similar question but it was for angular2 & the commands in the answers seems angular2 specific or telling to run the same cmd I am running, so I am asking this question here.I am following the Angular 5 tour of heroes tutorial & in the section of HTTP, I got the error below: Failed to compile. src/app/app.module.ts(13,48): error TS2307: Cannot find module '@angular-in-memory-web-api'.After running the cmd, I got some warnings but it confirmed installation:λ npm install angular-in-memory-web-api --savenpm WARN ajv-keywords@...Read more

Angular 5 animate SVG viewBox

I would like to change viewBox attribute of SVG (zoom in to specific area) and I would like this change to be animated. Can I do it using angular animations? I calculate new viewBox value dynamically based on where user click on SVG....Read more

themes - Angular - Material: Progressbar custom color?

I am now trying for hours. I use Material2 and simply want to change the color of the progress-bar. I know there are those themes (primary/accent/warn) but I want to have a cutom color (green) for my progressbar.I already tried the wierdest css-combinations.. but with no effort. Maybe someone had the same problem?...Read more

ag-grid gridOptions.api undefined in angular 2

I am trying ag-grid in angular2 with typescript, for some reasons I am not able to use the ag-grid APIs, getting undefined error.,here is the code..,import { AgRendererComponent } from 'ag-grid-ng2/main';import { GridOptions, RowNode } from 'ag-grid/main';import { GridOptionsWrapper } from 'ag-grid/main';import { GridApi } from 'ag-grid/main';public gridOptions: GridOptions;constructor() { this.gridOptions = <GridOptions>{}; alert(this.gridOptions); alert(this.gridOptions.api); // *** getting undefined *** this.gridOptions = ...Read more

angular - How to upgrade/refresh the ag-grid after row delete?

I have an ag grid where i am trying to delete a row...I am able to remove the row from data source using "splice" technique,after that i want to refresh the table.But it is showing error.This is the code which i am using to delete a rowselectedvalue={} //this holds the selected row valuerowData=[]; //this holds all the row dataonRowSelected(event) { this.selectedvalue = event; }deletebtn() { for (let i = 0; i < this.rowData.length; i++) { if ( === this.rowData[i].make) { this.rowData.spl...Read more

angular - How to initialize ag-grid api in angular2 application

I am working on an application built using angular2 with typescript.I am using ag-grid to display data in grid but not able to find the grid api./// <reference path="../../../typings/jquery/jquery.d.ts" />import {Component} from 'angular2/core';import {Hero, HeroService} from './hero.service';var gridOptions;var heroService;import * as core from 'angular2/core';declare var ag: any;ag.grid.initialiseAgGridWithAngular2({ core: core });@Component({ selector: 'gridapp', template: `<ag-grid-ng2 #gapp class="ag-fresh" style="height: ...Read more

angular - Data source is not executed in ag grid

Have implemented an ag-grid, and defined a datasource.but the data source is not getting invoked, How the data source will be executedThis is the html<div class="col-md-12" *ngIf="rowData.length > 0"> <ag-grid-angular #agGrid style="width: 100%; height: 350px;" class="ag-fresh" [gridOptions]="gridOptions" [columnDefs]="columnDefs" [rowData]="rowData" [datasource] = "dataSource" enableColResize enableSorting enableFilter rowSelection="single" ></ag-grid-angular...Read more

Ag-grid(Angular 2) Cannot access component fields in CellRenderer

I'm facing this issue while trying to call a service method on the click event of a button that is created using cellRenderer.I'm using ag-grid with Angular2.{ headerName: 'Update', field: "update", width: 80, cellRenderer : this.updateRecord }updateRecord(params) { var eDiv = document.createElement('div'); eDiv.innerHTML = '<span class="my-css-class"><button class="edit">Edit</button></span>'; var eButton = eDiv.querySelectorAll('.edit')[0]; eButton.addEventListener('click', function() { this.myService....Read more

angular - Getting error while specifying cellRendererFramework component within detailCellRendererParams

Getting following error while specifying cellRendererFramework component "cellRendererFramework": CheckboxCellComponent for [detailCellRendererParams]="detailCellRendererParams" in ng-grid-angular with [masterDetail]="true"Below framework component is working fine for gridOptions but throwing error for detailGridOptions ag-grid: you are specifying a framework component but you are not using a framework version of ag-grid for : cellRenderer at ComponentResolver.getComponentToUsedetailCellRendererParams = { detailGridOptions: { columnDef...Read more

angular2 forms - Angular 2 - EXCEPTION: _this.subscribe is not a function - Custom validation

I'm trying to implement a custom validation rule to validate if a checkbox is checked.But I'm getting an errorerror_handler.js:46 EXCEPTION: _this.subscribe is not a functionWhen I try to add the custom validator validator.ts import {Control} from "angular/common"; interface ValidationResult { [key: string]: any; } export class CustomValidators { static validateChecked(c: Control): ValidationResult { return (c.value); } } Component.tsimport {Component} from '@angular/core';import {FormBuilder, FormGroup, Validators, FormCo...Read more

Ag-Grid is not showing with angular 2?

I am new to angular 2 and trying to configure ag-grid. There was some error on console regarding ag-grid. I have solved it. Now there is no error on the console except one but it is not related to ag-grid. But still grid is not showing.Here is the code: In Package.json add:"ag-grid": "^7.1.0", "ag-grid-ng2": "^7.1.2", "ag-grid-enterprise": "^7.1.0"CSS Added in Layout(Using angular 2 with .net core(MVC)):<link href="~/lib/ag-grid/dist/styles/ag-grid.css" rel="stylesheet" /> <link href="~/lib/ag-grid/dist/styles/theme-fresh...Read more

angular - Ag grid tree data

I have an ag grid with tree data which filters out from the view the rows which are deleted[ { "name":"test", "children":[ { "name":"test", "ROWSTATE":"DELETE" }, { "name":"test", "ROWSTATE":"DELETE" } ] }] this is my data and the filter configuration is like thisisExternalFilterPresent: () => { return true; }, doesExternalFilterPass: (node: RowNode) { return !== ROWSTATE.DELETE; } The grid doesn...Read more