Gathering detailed insights and metrics for @serengeti/serengeti-board
Installations
npm install @serengeti/serengeti-boardDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
10.20.1
NPM Version
6.14.4
Releases
Unable to fetch releases
Contributors
1
Love this project? Help keep it running — sponsor us today! 🚀
Download Statistics
Total Downloads
5,678
Last Day
1
Last Week
8
Last Month
152
Last Year
822
Maintainers
1
Package Meta Information
Latest Version
1.0.44
Package Id
@serengeti/serengeti-board@1.0.44
Unpacked Size
3.37 MB
Size
965.32 kB
File Count
101
NPM Version
6.14.4
Node Version
10.20.1
Published on
Apr 12, 2023
Total Downloads
Cumulative downloads
Total Downloads
5,678
Last Day
-66.7%
1
Compared to previous day
Last Week
-66.7%
8
Compared to previous week
Last Month
192.3%
152
Compared to previous month
Last Year
-68.8%
822
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
25
@angular/animations@angular/cdk@angular/common@angular/compiler@angular/core@angular/forms@angular/material@angular/material-moment-adapter@angular/platform-browser@angular/platform-browser-dynamic@angular/router@kolkov/angular-editor@ngx-translate/core@ngx-translate/http-loader@serengeti/serengeti-common@serengeti/serengeti-editorfile-savermonaco-languageclientnetng-packagrng2-file-uploadngx-translate-multi-http-loaderrxjstslibzone.js
Peer Dependencies
17
@angular/animations@angular/cdk@angular/common@angular/compiler@angular/core@angular/forms@angular/material@angular/material-moment-adapter@angular/platform-browser@angular/platform-browser-dynamic@angular/router@ngx-translate/core@ngx-translate/http-loaderngx-translate-multi-http-loaderrxjstslibzone.js
serengeti.board.ui
npm 설치
Transalate
npm install @ngx-translate/core --save npm install ngx-translate-multi-http-loader --saveMaterial
ng add @angular/materialfile-upload
npm install --save file-saver npm install --save ng2-file-upload
CKEditor5
// app.module
import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
// component
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import { CKEditor5 } from '@ckeditor/ckeditor5-angular'
import { UploadAdapter } from './FileUploadAdapter/FileUploadAdapter';
classicEditor = ClassicEditor;
editorConfig;
constructor() {
this.editorconfig = {
// ckeditor 설정
}
}
// html
<ckeditor>
[editor]="classicEditor"
[config]="editorConfig"
...
</ckeditor>
Translate
// app.module
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateService } from '@ngx-translate/core';
import { MultiTranslateHttpLoader } from "ngx-translate-multi-http-loader";
// Translate 파일 경로 및 형식 설정
export function createTranslateLoader(http: HttpClient) {
return new MultiTranslateHttpLoader(http, [
{ prefix: 'assets/i18n/setting/', suffix: ".json" }
]);
}
impots: [
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: createTranslateLoader,
deps: [HttpClient]
}
})
],
providers: [TranslateService],
exports: [TranslateModule]
export class AppModule {
constructor (translate: TranslateService) {
translate.setDefaultLang('ko-kr');
translate.use('ko-kr');
}
}
// component
import { TranslateService } from '@ngx-translate/core';
errorMessage;
constructor(private translateService: TranslateService) { }
// alert 또는 confirm에서 Translate 사용하기
submit() {
this.translateService.get(['board.edit.notice.alert.title', 'board.edit.notice.confirm.write'])
.subscribe((message: any) => { this.errorMessage = messages; });
...
alert(this.errorMessage['board.edit.notice.alert.title']);
if(confirm(this.errorMessage['board.edit.notice.confirm.write'])) { }
}
// html
<span translate>board.edit.title.write</span>
or
<span>{{'board.edit.title.write' | translate}}</span>
// src/assets/i18n/setting/ko-kr.json
{
"board": {
"edit": {
"title": {
"write": "글 쓰기"
},
"notice": {
"alert": {
"title": "제목은 필수 입력사항입니다."
},
"confirm": {
"write": "게시글을 저장 하시겠습니까?"
}
}
}
}
}
Validator
// app.module
import { FormsModule } from '@angular/forms';
imports: [FormsModule]
// componenet
import { FormControl, Validators } from '@angular/forms';
title = new FormControl('', [Validators.required]);
errorMessage;
// Translate와 연계
titleErrorMessage() {
this.translateService.get('board.edit.notice.validator.title')
.subscribe((messages: any) => {
this.errorMessage = messages;
});
if (this.title.hasError('required')) {
this.translates
return this.errorMessage;
}
}
// html
<mat-form-field>
<input matInput [formControl]="title" required>
<mat-error *ngIf="title.errors">{{titleErrorMessage()}}</mat-error>
</mat-form-field>
No vulnerabilities found.
No security vulnerabilities found.