Skip to content

Basic Component

Jump to bottom
Kiran Mantha edited this page Nov 25, 2024 · 7 revisions

Creating component is a non-hectic task.

  1. import Component, html, signal functions and create component as follows
import { Component, html, signal } from '@plumejs/core';
import testEleStyles from './test-ele.scss';

@Component({
  selector: 'test-ele',
  styles: testEleStyles,
  root: true
})
class TestEle {
  test: string;
  greeting = signal<string>();

  constructor() {
    this.text = 'Hello World!';
  }

  greet = () => {
    this.greeting.set('hello');
  }

  render() {
    return html`<div data-testid="container">
       <h1>${this.text}</h1>
       <button data-testid="btn-greet" onclick=${this.greet}></button>
       <div>${this.greeting()}</div>
    </div>`;
  }
}

Warning

Through out the entire application there will be only one root component. Adding more than one root component will not render the page and throw duplicate root component error.

For styling one can use css or scss formats. but scss is the most preferred one. By default all plumejs components are render as block elements. They internally have :host { display: block; } property.

Made with ❤️ by KiranMantha

Clone this wiki locally