serengeti.board.ui

npm 설치

Transalate

npm install @ngx-translate/core --save
npm install ngx-translate-multi-http-loader --save

Material

ng add @angular/material

file-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>