satreci-ngx-pretty-checkbox 은 pretty-checkbox 의 스타일을 적용한 체크박스/라디오 컨트롤을 Angular 컴포넌트로 제공합니다.
npm install satreci-ngx-pretty-checkbox pretty-checkbox --save
.angular-cli.json
{
...
"apps": [
{
...
"styles": [
"../node_modules/pretty-checkbox/dist/pretty-checkbox.min.css",
"styles.css"
],
...
}
]
...
}
Angular 모듈 파일 (app.module.ts)
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SiNgxPrettyCheckboxModule } from 'satreci-ngx-pretty-checkbox';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [SiNgxPrettyCheckboxModule, BrowserModule],
bootstrap: [AppComponent]
})
export class AppModule { }
컴포넌트 내 사용 예시 (app.component.ts)
import { Component } from '@angular/core';
@Component({
selector: 'app',
template: `
<!-- checkbox -->
<si-checkbox [(ngModel)]="checkboxState" name="c-success" checkboxClass="p-success">Success</si-checkbox>
<si-checkbox [(ngModel)]="checkboxState" name="c-success" checkboxClass="p-success">Success</si-checkbox>
<!-- radio -->
<si-radio [(ngModel)]="radioValue" name="si-radio" value="primary" radioClass="p-primary-o">Primary</si-radio>
<si-radio [(ngModel)]="radioValue" name="si-radio" value="success" radioClass="p-success-o">Success</si-radio>
`
})
export class AppComponent {
checkboxState: boolean = false;
radioValue: string = 'primary';
}