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.log
s 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?
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.