Angular / Dart and Material Inputs: How to put a link into a checkbox label?

1.2k Views Asked by At

Simple question: Is this somehow possible?

<material-checkbox [(ngModel)]="agbsAccepted" label='I have read <a href="/#/terms" target="_blank">the terms and conditions</a> and accept those.'></material-checkbox>

If I write it like this the HTML is parsed into a normal string. But if I write it do not use the label property its sometimes difficult to style.

1

There are 1 best solutions below

0
On BEST ANSWER

HTML in string interpolation bindings is not supported. The label attribute is added using string interpolation

<div class="content">
  {{label}}
  <ng-content></ng-content>
</div>

material-checkbox template source

As you see in the template, projected context is supported though, therefore this should do what you want:

<material-checkbox [(ngModel)]="agbsAccepted">
  I have read <a href="/#/terms" target="_blank">the terms and conditions</a> and accept those.
</material-checkbox>