webcomponentsにAngularから値を渡す

バージョン

Angular/core ~8.1.2

やりたかったこと

webcomponentsのディレクティブにAngularから値を渡す。

app.component.html

<clr-icon [shape]="item.icon"></clr-icon>

怒られ

普通にやると怒られが発生する。

VM47766 vendor.js:21971 Uncaught Error: Template parse errors:
Can't bind to 'shape' since it isn't a known property of 'clr-icon'.
1. If 'clr-icon' is an Angular component and it has 'shape' input, then verify that it is part of this module.
2. If 'clr-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component

Angularの知らないプロパティを渡そうとしたからである。
だいたいの場合、moduleへ対象のAngular componentをexportしているmoduleをimportしていないことが原因で出るいつものやつだが、
今回は2.のケースに該当するため2.を実行する。

// app.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  declarations: [AppComponent],
  imports: [
    CommonModule,
    RouterModule,
    ClarityModule
  ],
  schemas:[CUSTOM_ELEMENTS_SCHEMA] // これを追加
})
export class AppModule { }

アトリビュートの指定

これでエラーは出なくなるが、挙動的にどうもshapeアトリビュートに値が渡ってなさそうである。
調べたところ、どうやら[attr.アトリビュート名]で指定する必要があるそうだ。

正解は以下の通り。

<clr-icon [attr.shape]="item.icon"></clr-icon>

出典