File

lib/common/src/widgets/widget.component.ts

Description

This component will be replaced by the best matching registered WidgetComponent at runtime. Tutorial: How to use Widgets

Metadata

Index

Properties
Methods
Inputs
Accessors

Constructor

constructor(parentInjector: Injector, widgetsService: WidgetsService)
Parameters :
Name Type Optional
parentInjector Injector No
widgetsService WidgetsService No

Inputs

widgetComponent
Type : WidgetComponentType
widgetControl
Type : WidgetControl

Methods

Protected setControl
setControl(control: WidgetControl)

Called when #widgetControl is set. Finds the best matching WidgetComponent for control and calls #updateInjector. Thows an error, if no match is found.

Parameters :
Name Type Optional
control WidgetControl No
Returns : void
Protected setWidgetComponent
setWidgetComponent(component: WidgetComponentType)

Set a WidgetComponentType to use instead of the best matching WidgetComponent and calls #updateInjector.

Parameters :
Name Type Optional
component WidgetComponentType No
Returns : void
Protected updateInjector
updateInjector()
Returns : void

Properties

Protected bestMatch
Type : WidgetComponentType<>

WidgetComponentType with the highest matching score with respect to #widgetControl.

Protected control
Type : WidgetControl

WidgetControl explicitly set by #widgetConrol

Protected explicitComponent
Type : WidgetComponentType<>
Public injector
Type : Injector

We need this to inject the control into the chosen widgetComponentType at #component.

Protected matchingWidgetComponents
Type : WidgetComponentType<>[]

Array of all WidgetComponents matching #widgetControl.

Public widgetsService
Type : WidgetsService

Accessors

widgetControl
setwidgetControl(control: WidgetControl)
Parameters :
Name Type Optional
control WidgetControl No
Returns : void
widgetComponent
setwidgetComponent(component: WidgetComponentType)
Parameters :
Name Type Optional
component WidgetComponentType No
Returns : void
component
getcomponent()

The widgetComponentType explicitly set by #widgetComponent or the component with the highest matching score with respect to #widgetControl.

import	{	
				Component,	
				Injector,
				Input
		}							from '@angular/core'

import	{
				assert
		}							from '@rcc/core'

import	{
				WidgetComponentType,
				WidgetControl,
		}							from './widgets.commons'

import	{
				WidgetsService
		}							from './widgets.service'


/**
 * This component will be replaced by the best matching registered {@link WidgetComponent} at runtime. 
 * {@link WidgetsModule#readme|Tutorial: How to use Widgets}
 */
@Component({
	selector: 	'rcc-widget',
	styleUrls:	['./widget.component.css'],
	template:	`
					<ng-container 
						*ngIf						= "component && injector"
						[ngComponentOutlet]			= "component" 
						[ngComponentOutletInjector]	= "injector"
					>
					</ng-container>
				`
})
export class RccWidgetComponent {

	@Input()
	set widgetControl(control: WidgetControl) {	this.setControl(control) }

	@Input()
	set widgetComponent(component: WidgetComponentType){ this.setWidgetComponent(component) }




	/**
	 * The {@link widgetComponentType} explicitly set by {@link #widgetComponent} or the component with the
	 * highest matching score with respect to {@link #widgetControl}.
	 */
	public get component()				: WidgetComponentType<unknown> { return this.explicitComponent || this.bestMatch }


	/**
	 * We need this to inject the control into the chosen
	 * {@link widgetComponentType} at {@link #component}.
	 */ 
	public injector!					: Injector


	/**
	 * Array of all {@link WidgetComponents} matching {@link #widgetControl}.
	 */
	protected matchingWidgetComponents 	: WidgetComponentType<unknown>[]

	/**
	 * {@link WidgetComponentType} with the highest matching score with
	 * respect to {@link #widgetControl}.
	 */
	protected bestMatch					: WidgetComponentType<unknown>

	/**
	 * {@link WidgetComponentType} explicitly set by {@link #widgetComponent}
	 */
	protected explicitComponent			: WidgetComponentType<unknown>


	/**
	 * {@link WidgetControl} explicitly set by {@link #widgetConrol}
	 */
	protected control					: WidgetControl


	constructor(

		private parentInjector		: Injector,
		public	widgetsService		: WidgetsService

	){}



	/**
	 * Called when {@link #widgetControl} is set. Finds the best matching {@link WidgetComponent} 
	 * for control and calls {@link #updateInjector}. Thows an error, if no match is found.
	 */ 
	protected setControl(control: WidgetControl): void {

		this.control					= control
		this.matchingWidgetComponents 	= this.widgetsService.getWidgetMatches(control)
		this.bestMatch					= this.matchingWidgetComponents[0]

		assert(this.bestMatch, `RccWidgetComponent.setControl() unable to find a matching widget component for ${control.constructor.name}. Please provide a corresponding widget component.`, control)

		this.updateInjector()

	}


	/**
	 * Set a {@link WidgetComponentType} to use instead of the best matching {@link WidgetComponent}
	 * and calls {@link #updateInjector}.
	 */
	protected setWidgetComponent(component: WidgetComponentType): void {
		this.explicitComponent = component

		this.updateInjector()
	}


	protected updateInjector() : void {

		const controlType 	= this.component.controlType


		//If no control is set, the component is not yet ready;
		//once it is set this method should be called again.
		if(!this.control) return;


		assert(this.control instanceof controlType, "RccWidgetComponent.updateInjector() control type mismatch.", this.control)

		this.injector =	Injector.create({
							providers: 	[{
											provide: 	controlType,
											useValue: 	this.control
										}],

							parent:		this.parentInjector
						})
	}

}

./widget.component.css

:host {
	display: 			contents;
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""