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?

Answer 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.