Bulma Extensions를 Angular 애플리케이션에 통합하는 방법

Bulma Extensions

CSS 프레임워크Bulma 확장 프로그램에서
Tooltip, Calendar, Budge 등 Bulma 본체에서 지원하지 않는 UI 부품이 제공됩니다.
이번에는 Bulma tooltip을 예로 Bulma Extensions의 부품을 Angular 애플리케이션에 통합하는 방법을 소개합니다.

설치

Bulma 본체

Bulma Extensions는 Bulma 본체가 필요하므로 설치합니다.

npm install --save bulma

Bulma Badge

npm install --save @creativebulma/bulma-tooltip

CSS 적용

angular.json의 스타일 (CSS의 정의 부분)에 Bulma 본문과 Bulma Extensions의 CSS 파일 경로를 작성합니다.

angular.json

"build": {
  ...
  "styles": [
    "src/styles.scss",
    "node_modules/bulma/css/bulma.min.css",　　←Bulma本体のCSS
    "node_modules/@creativebulma/bulma-tooltip/dist/bulma-tooltip.min.css"  ←Bulma TooltipのCSS
  ],
  ...
}

HTML에 통합

CSS를 적용하면 HTML에 내장하면 ToolTip 부품을 사용할 수 있습니다.
data-tooltip 부분에 ToolTip로 표시할 문장을 기입합니다.html
<button class="button is-primary" data-tooltip="Tooltip Text">Tooltip</button>

그러면 버튼에 마우스 오버시 ToolTip이 표시되는지 생각합니다.

바인딩

Angular 앱이므로 Tooltip의 메시지를 변수에 바인딩하고 싶은 경우가 있다고 생각합니다만, 그 경우 조금 고안이 필요합니다

예를 들면 이런 느낌

app.compoennt.ts

export class AppComponent {
  message = 'Bind Tooltip Text'
}

app.compoennt.html

<button class="button is-primary" [data-tooltip]="message">Tooltip</button>

그런데 실제로 움직여 보면 아래와 같은 오류가 나올 것입니다.

Uncaught Error: Template parse errors:
Can't bind to 'data-tooltip' since it isn't a known property of 'button'. ("

  <div class="column">
    <button class="button is-primary" [ERROR ->][data-tooltip]="message">Tooltip</button>
  </div>

어쨌든 "<button> 태그에 [data-tooltip] 따위 속성은 없기 때문에 바인딩 할 수 없어!"라는 오류입니다
이 오류를 해결하려면 HTML 측에서 Tooltip 메시지를 바인딩하는 위치를 [attr.data-tooltip]="変数名" 형식으로 작성해야합니다.
자세한 내용은 여기을 참조하십시오.

app.compoennt.html

<button class="button is-primary" [attr.data-tooltip]="message">Tooltip</button>

이제 툴팁 메시지를 바인딩 할 수있었습니다.