File

app/dxa/dxa-fields/component-link/component-link.component.ts

Implements

OnInit

Metadata

selector [component-link]
styleUrls ./component-link.component.scss
templateUrl ./component-link.component.html

Index

Properties
Methods
Inputs
HostBindings
HostListeners

Constructor

constructor(linkService: ComponentLinkService, router: Router, util: UtilService)
Parameters :
Name Type Optional
linkService ComponentLinkService No
router Router No
util UtilService No

Inputs

linkObject
overrideURL
showChevron
Type : boolean

HostBindings

attr.href
attr.target

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.

Methods

getLinkUrl
getLinkUrl()
Returns : string
ngOnInit
ngOnInit()
Returns : void

Properties

isPageDetail
Type : boolean
linkTarget
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>

./component-link.component.scss

@import "src/app/styles/helpers";
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""