Dear All,
I would like to follow up on this. Here's what I have tried so far based on
what I searched online. So I created a helper function in the
untyped-item.components.ts.At the top of the file I changed the import into
"import { ChangeDetectionStrategy, Component, Input } from '@angular/core';"
Then I modified the export class into:
export class UntypedItemComponent extends BaseComponent {
@Input() item: Item;
parseUrl(url: string) {
const getHostname = (url) => {
return new URL(url).hostname;
}
}
And then in my untyped-item.components.html, I added this:
<div class="item-page-field" style="margin-bottom: 15px;" *ngFor="let
eURL of object.metadata['dc.relation.uri']|keyvalue">
<div class="simple-view-element">
<h2 class="simple-view-element-header" style="font-size:
1.25rem;">Associated URL</h2>
<div class="simple-view-element-body">
<a class="dont-break-out" href="{{eURL.value.value}}"
target="_blank">parseUrl({{eURL.value.value}})</a>
</div>
</div>
</div>
It compiled successfully but the resulting display looked like this, it
just displayed the function name literally:
parseUrl(https://onlinelibrary.wiley.com/doi/epdf/10.1111/are.15556)
If I enclosed the function with {{}}
e.g. {{parseUrl({{eURL.value.value}})}}, it failed to compile. This may be
a newbie issue but I am struggling with how to call the function that I
made to successfully parse the URL so that it will only give me the
hostname. In the case on the URL example above, I just want to display the
hostname (onlinelibrary.wiley.com), without the protocol, port number and
any subpath. Screenshot from what I want to achieve was posted in my first
post above.
Please let me know what I am missing and what to do, since this
Angular/Typscript is very new to me.
I appreciate any help you can provide.
euler
On Monday, August 7, 2023 at 3:07:32 PM UTC+8 euler wrote:
> Dear Colleagues,
>
> I displayed the value of a field containing a URL by editing
> [dspace-angular]/src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html.
>
> However, some values of this field are very long, so I am hoping if there's
> a way just to show the hostname. In DSpace 6x, I managed to achieve this by
> using the XSLT function substring-before and substring-after. Please see
> the image below:
> [image: dspace-6.PNG]
>
> In DSpace 7x, this is the appearance:
> [image: dspace-7.PNG]
>
> I would like to display onlinelibrary.wiley.com instead of the whole URL.
>
> I found this answer [1] in Stackoverflow but I don't know how to apply
> this in DSpace-Angular. I hope this is not overly complicated as I am still
> learning a bit about how to customize the front end of DSpace and the
> learning curve for me is steep.
>
> [1] https://stackoverflow.com/a/54947757
>
> Thanks in advance and best regards,
> Euler
>
--
All messages to this mailing list should adhere to the Code of Conduct:
https://www.lyrasis.org/about/Pages/Code-of-Conduct.aspx
---
You received this message because you are subscribed to the Google Groups
"DSpace Technical Support" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to dspace-tech+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/dspace-tech/e4b9c85d-af06-473a-bc44-0e68e95725dcn%40googlegroups.com.
