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

Issue

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.

Solution

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>

Answered By – Günter Zöchbauer

Answer Checked By – Dawn Plyler (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.