라벨이 앵귤러인 게시물 표시

Angular2+ 에서 넘치는 글자 말줄임표(...) 처리하기

Angular2+ 에서 말줄임(...) 처리는 크게 세 가지로 할 수 있습니다. 1. Pipe 로 템플릿 단에서 처리 2. 스크립트 처리 3. CSS 로 처리 1줄일 경우, 2줄 이상일 경우 다른 방법이 쓰입니다. 이 세 가지에 대해 간단한 핵심 소스를 공유 드립니다. 1. Pipe *.ts str:string = '일이삼사오육칠팔구십' *.html <div> {{ (str.length>6)? (str | slice:0:6)+'...':(str) }} </div> 결과화면 일이삼사오육... 2. 스크립트 사용 *.ts var limitLen = 6; if (str.length > length) {      str = str.substr(0, limitLen) + '...'; } *.html <div> {{ str }} </div> 결과화면 일이삼사오육... *jquery ellipsis 사용 See the Pen jQuery ellipsis by jaeheekim ( @jaehee ) on CodePen . 2. CSS 사용 1줄일 경우 div {    white-space:nowarp; /* 줄바꿈 막음*/    text-overflow:ellipsis; /* ... 로 보이게 */    overflow:hidden; } 2줄 이상일 경우 div {      font-size:1em;      overflow:hidden;      text-overflow:ellipsis;      line-height:1.5;      height:3em;  /* line-height의 두 배 */      display:-webkit-box;      -webkit-line-clamp:2; /* 나타낼 글자 라인 수 */      -webkit-box-o

Angular2 양방향 바인딩에서 한글이 짤리는 문제

남도패스 사이트 운영중에 사용자로부터 다음과 같은 오류사항을 접수 받았습니다. 말씀주신 오타는 저희의   오타가 아닌 입력 부분 오류임을 말씀드립니다. 1. 업장명 등 글자를 입력하면 끝 글자는 자음만 표시가 됩니다.  예) 유명횟집-유명횟ㅈ     저희는 지금 맨 마지막 글자만 스페이스바로 임의적으로 입력하고 있습니다. 2, 전체적인 글자가 안 보이는 현상 (그러떄가 있고 안 그럴 때가 있어요)  예) 서대회 제공 - 대회 제공     앞글자가 안 나옵니다. 혜택뿐 아니라 다른 텍스트 입력에도 나오는 현상입니다.    아래 상세 내용은 입력해도 홈페이지에 안 나오네요. 사용자는 정확히 입력하였지만, 마지막글자가 반영되지 않는 것을 확인할수 있었습니다. 한글과 같은 조합형 문자의 경우 일반적으로 글자를 입력 후 스페이스나 엔터 등을 통하여 문자 입력을 완료한 시점에 compositioned라는 이벤트가 발생하고, 이 이벤트에 따라 Angular는 양방향 바인딩을 처리 합니다.  작성중인 문자를 모두 바인딩하기 위해서는 Angular에서 제공되는 COMPOSITION_BUFFER_MODE를 변경합니다. 프로젝트 전체에서 일괄반영하기 위해 app.module.ts 에서 valueProvider를 사용하여 주입시켜 주면 됩니다. import { CUSTOM_ELEMENTS_SCHEMA , NgModule, NO_ERRORS_SCHEMA } from '@angular/core' ; import { BrowserModule } from '@angular/platform-browser' ; import { BrowserAnimationsModule } from '@angular/platform-browser/animations' ; import { LocationStrategy, HashLocationStrategy } from '@angular/c