Welight Components

Components for Angular to use in Welight projects.

Installation

Step 1

npm install @welight/ngx-components

Step 2

Configure AppModule to use Welight components.

import { WelightComponentsModule } from '@welight/ngx-components';

@NgModule({
  imports: [
    // others modules...
    WelightComponentsModule
  ]
})
export class AppModule {}

Components

WelightCardOng <welight-card-ong>

Inputs

| Name | Type | Description | |:----|:-----:|:-----------| | showTitle | boolean | Display name of Ong. | | showDescription | boolean | Display description of Ong. | | isCheckable | boolean | Display checkbox into card | | checked | boolean | Checkbox initial value. | | showButtons | boolean | Display footer buttons into card. | | ong | Object<Ong> | An object of type Ong with data. |

Outputs

| Name | Type | Description | |:----|:-----:|:-----------| | checkboxChange | EventEmitter<WelightCardOngChange> | When checkbox clicked |

Example

Demo

Note: To make the best use of the library, install in you project @welight/welight-api-ts.

<welight-card-ong
  *ngIf="ong"
  [ong]="ong"
  [isCheckable]="true"
  [checked]="true"
  [showDescription]="false"
  (checkboxChange)="changeOng($event)"
></welight-card-ong>

import { WelightCardOngChange } from '@welight/ngx-components';

@Component({
  selector: 'example'
})
export class ExampleComponent {
  ong: Ong;

  constructor(private service: WelightService){}

  async ngOnInit() {
    this.ong = await this.service.ongs.objects.find()[0];
  }

  changeOng(event: WelightCardOngChange) {
    console.log(event);
  }
}

WelightShimmerPlaceholder <welight-shimmer-placeholder>

Inputs

| Name | Type | Description | |:----|:-----:|:-----------| | data | Promise | string | string[] | Array of URLs or Promise to resolve. | | forceResult | boolean | Force display result when exists error. |

Outputs

| Name | Type | Description | |:----|:-----:|:-----------| | onComplete | EventEmitter<any> | When finish load. | | onSuccess | EventEmitter<any> | When finish load with success. | | onError | EventEmitter<any> | When finish load with error. |

Example

Demo

<welight-shimmer-placeholder [data]="data">
  <welight-placeholder-container>
    <p wePlaceholderItem height="20px"></p>
  </welight-placeholder-container>

  <welight-shimmer-result>
    <p>Lorem Ipsum...<p>
  </welight-shimmer-result>
</welight-shimmer-placeholder>

@Component({
  selector: 'example'
})
export class ExampleComponent {
  data: Promise<any>;

  ngOnInit() {
    this.ong = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve();
      }, 5000);
    });
  }
}