Search code examples
angulardartangular-materialangular2-dartdart-angular-templates

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


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>