@welight/ngx-components v0.3.2

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

Outputs

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

Outputs

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);
    });
  }
}