Angular cell renderers don't get ICellRendererParams in init

Question

I'm trying to make a cell renderer for making IP addresses into click-able SSH links using Angular. The renderer component:

import { Component, OnInit, OnDestroy } from "@angular/core";
import { DomSanitizer, SafeUrl } from "@angular/platform-browser";

import { ICellRendererAngularComp } from "ag-grid-angular";
import { ICellRendererParams } from "ag-grid-community";

const username = "me";

/**
 * SSHCellRendererComponent is an AG-Grid cell renderer that provides ssh:// links as content.
 */
@Component({
    selector: "ssh-cell-renderer",
    styleUrls: ["./ssh-cell-renderer.component.scss"],
    templateUrl: "./ssh-cell-renderer.component.html"
})
export class SSHCellRendererComponent implements ICellRendererAngularComp {

    /** The IP address or hostname to which the SSH link will point. */
    public get value(): string {
        return this.val;
    }
    private val = "";

    /** The SSH URL to use. */
    public get href(): SafeUrl {
        const url = `ssh://${username}@${this.value}`;
        return this.sanitizer.bypassSecurityTrustUrl(url);
    }

    constructor(private readonly sanitizer: DomSanitizer) {}

    /** Called by the AG-Grid API at initalization */

    public refresh(params: ICellRendererParams): boolean {
        this.val = params.value;
        return true;
    }

    /** called after ag-grid is initalized */
    public agInit(params: ICellRendererParams): void {
        console.log("has value?:", Object.prototype.hasOwnProperty.call(params, "value"));
        console.log("getval:", params.getValue());
        this.val = params.value;
    }
}

and then the template looks like:

<a [href]="href" target="_blank">{{value}}</a>

It should be pretty basic, and I've done basically exactly this in AngularJS, but it doesn't work. The cells all wind up with actual content that looks like:

<a href="ssh://me@" target="_blank"></a>

and those two console.logs I have in agInit show me why:

16:34:38.554     has value?: false             ssh-cell-renderer.component.ts:62:10
16:34:38.555     getval: undefined             ssh-cell-renderer.component.ts:63:10

I don't know what type of object is being given to agInit (and probably refresh, too), but it's clearly not ICellRendererParams - and getValue also doesn't help me because for whatever reason it always returns undefined. I have access to data (and from that I can see that the value being rendered is, in fact, not undefined), but then if I wanted to make a renderer for SSH links using an "IPv4 Address" column and an "IPv6 Address" column, I'd need two nearly identical components, which is a lot of duplicated code.

So what am I missing?

Filip · Accepted Answer · 2020-11-07T08:31:45.757

1

Did you use simply

const username = "me";
export class SSHCellRendererComponent implements ICellRendererAngularComp {
public username = username;

and in your template

<a [href]="sanitizer.bypassSecurityTrustUrl('ssh://' + username +'@'+value)" target="_blank">{{value}}</a>

Updated

Use sanitizer function in your template or create sanitizer security pipe.

edited Nov 07 '20 at 08:31

answered Nov 07 '20 at 00:06

Filip

143
1
8

That will not work. The URL will be considered unsafe by Angular, and will not be click-able, even if the properties are properly calculated. – ocket8888 Nov 07 '20 at 00:27
This works, but also after reverting it to check I found that my original code appeared to be working suddenly. I'm not sure what changed, but also to anyone trying to do something similar: beware that hovering over the link (at least in Firefox) does not display the user, so e.g. 'ssh://admin@1.2.3.4' shows up in the little link-address box on hover has 'ssh://1.2.3.4' – ocket8888 Jan 15 '21 at 18:47

Angular cell renderers don't get ICellRendererParams in init

1 Answers1