<wuf-web-message>

Description

A Web Component designed to be functionality equivalent to its Angular cousing, now removed from the library. Its purpose is to showcase the migration of an Angular component to be a Web component.

Usage

Note that the examples below are derived from a web application written with Angular framework, in this case the Living Style Guide.

Declare the components

The software engineer updates the host application's packages.json to include kg-web-message:

    "@anviltech/wuf-web-message": "1.0.0",

Import the components

The software engineer updates the host application's main.ts to import kg-web-message:

// ...
import '@anviltech/wuf-web-message';
// ...

Add to the view

The software engineer declares kg-web-message as a target view child, with the recommended place being at the top of the view; the code snippet below is found in the Living Style Guide web-messages.component's web-messages.component.html view:

<wuf-content-main>
    . . .
  <!-- begin Example tab contents -->
  <div class="tab-content" [ngClass]="{ 'active': activeTab === 0}">
    <wuf-web-message #kgm></wuf-web-message>
    <!-- where #kgm is used to provide access to the web component's setter methods
    . . .

Add to the controller

The host component's controller includes logic to access kg-web-message setter methods; in Angular this is done using the ViewChild decorator; ; the code snippet below is found in the Living Style Guide web-messages.component's web-messages.component.ts controller:

export class WufWebMessagesComponent implements OnInit {
	@ViewChild('kgm') kgm : ElementRef;

The host component's controller also includes logic to trigger messages.

export class WufWebMessagesComponent implements OnInit {
	
	// Button click handler to trigger an error message
	onShowErrorMessageClick() {
		this.kgm.nativeElement.errorMessage = `Danger, Will Robinson!`;
	}

    // Button click handler to trigger an information message
	onShowInfoMessageClick() {
		this.kgm.nativeElement.infoMessage = `Did you know that astronauts never snore? Sleep apnea can't happen without gravity!`
	}

    // Button click handler to trigger a success message
	onShowSuccessMessageClick() {
		this.kgm.nativeElement.successMessage = `I'm ok!`;
	}

	// Button click handler to trigger a warning message
	onShowWarningMessageClick() {
		this.kgm.nativeElement.warningMessage = `The "check engine" light is on.`;
	}

Results

These calls trigger the insertion of kg-web-message web components as kg-web-messages children, in the order they are created.

<wuf-web-message>
  #shadow-root (open)
    <div class="message message-dismissible message-danger">
        <button class="message-close close" type="button">×</button>
        <div>Danger, Will Robinson!!</div>
    </div>
    <div class="message message-dismissible message-info">
        <button class="message-close close" type="button">×</button>
        <div>Did you know that astronauts never snore? Sleep apnea can't happen without gravity!!</div>
    </div>
    <div class="message message-dismissible message-succes">
        <button class="message-close close" type="button">×</button>
        <div>I'm ok!</div>
    </div>
    <div class="message message-dismissible message-warning">
        <button class="message-close close" type="button">×</button>
        <div>The "check engine" light is on.</div>
    </div>
</wuf-web-message>

The kg-web-message web component includes a multiplication sign element at the top right which, when clicked causes its kg-web-message's parent to be deleted from the DOM.

<!-- the construct message-${this.type is resoved to a class name which controls the message's background color -->
<div class="message message-dismissible message-${this.type}">
    <!-- the message is removed from the DOM when the button's multiplication is clicked  -->
    <button class="message-close close" type="button">&times;</button>
    <div>${this.text}</div>
</div>

Properties

• errorMessage
• infoMessage
• successMessage
• warningMessage

Methods

• get errorMessage(): string
• set errorMessage(value: string)
• get infoMessage(): string
• set infoMessage(value: string)
• get successMessage(): string
• set successMessage(value: string)
• get warningMessage(): string {
• set warningMessage(value: string)
• set clearAll()

Events Received

none

Events Emitted

none