File
Implements
Metadata
selector |
[component-link] |
styleUrls |
./component-link.component.scss |
templateUrl |
./component-link.component.html |
Index
Properties
|
|
Methods
|
|
Inputs
|
|
HostBindings
|
|
HostListeners
|
|
HostListeners
click
|
Arguments : '$event'
|
click(event: Event)
|
|
Overwrites href. Listens to click events and route to url differently depending on if internal link or not.
|
import { Component, OnInit, Input, HostBinding, HostListener } from '@angular/core';
import { ComponentLinkService } from 'src/app/core/services/component-link-service/component-link.service';
import { Router } from '@angular/router';
import { UtilService } from 'src/app/core/services/util-service/util.service';
@Component({
selector: '[component-link]',
templateUrl: './component-link.component.html',
styleUrls: ['./component-link.component.scss']
})
export class ComponentLinkComponent implements OnInit {
// Json of the link object
@Input() linkObject;
// Passed if you want to override url in linkObject
@Input() overrideURL;
@Input() showChevron: boolean;
linkTarget;
isPageDetail: boolean;
// Add href to host element for SEO purpose.
@HostBinding('attr.href') get href() {
const url = this.getLinkUrl();
if (url) { return url; }
}
@HostBinding('attr.target') get target() {
if (this.linkTarget) {
return this.linkTarget.newWindow ? '_blank' : '_self';
}
}
/** Overwrites href. Listens to click events and route to url differently depending on if internal link or not. */
@HostListener('click', ['$event'])
clicked(event: Event) {
const url = this.getLinkUrl();
if (url) {
if (this.linkTarget.newWindow) { // Open in new tab if specified.
window.open(url, '_blank');
} else if (this.linkTarget.isInternal) {
this.router.navigateByUrl(url);
} else {
window.location.href = url;
}
}
event.preventDefault();
}
constructor(
private linkService: ComponentLinkService,
private router: Router,
private util: UtilService
) { }
ngOnInit() {
this.linkTarget = this.linkService.parseLink(this.linkObject);
const viewName = this.util.extract(this.linkTarget, 'linkObject', 'LinkModelTarget', 'MvcData', 'ViewName');
this.isPageDetail = (viewName === 'PageDetails' || viewName === 'PageDetailsHorizontal');
}
getLinkUrl(): string {
let url = '';
if (this.overrideURL) {
return this.overrideURL;
} else if (this.linkTarget) {
// Add anchor tag to linked component if ID exists and is not a Page Detail component.
url = this.linkTarget.linkID && !this.isPageDetail ? `${this.linkTarget.url}#${this.linkTarget.linkID}` : this.linkTarget.url;
}
return url;
}
}
<ng-content></ng-content>
<i class="icon-chevronLarge-next" *ngIf="showChevron"></i>
@import "src/app/styles/helpers";
Legend
Html element with directive