npm.io
0.3.2 • Published 7 years ago

@welight/ngx-components

Licence
—
Version
0.3.2
Deps
1
Size
642 kB
Vulns
0
Weekly
0
SummaryDependencyVersions

Welight Components

Components for Angular to use in Welight projects.

npm (scoped)

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.

HTML Template
<welight-card-ong
  *ngIf="ong"
  [ong]="ong"
  [isCheckable]="true"
  [checked]="true"
  [showDescription]="false"
  (checkboxChange)="changeOng($event)"
></welight-card-ong>
Typescript File
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

HTML Template
<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>
Typescript File
@Component({
  selector: 'example'
})
export class ExampleComponent {
  data: Promise<any>;

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