How to append "optional" text to form input label

Question

I'm new to Angular 2 and trying to append a text to form inputs that are optionals.

Something like this (app-optional):

<div class="form-group">
  <label app-optional>
    Name
    ... input here ...
  </label>
</div>

Which should result in:

Name - optional

How could I achieve this? Or could you suggest a better way?

Answer 1

You can try this

<div class="form-group">
  <label>
    Name - <app-optional></app-optional>
  </label>
</div>

In html of app-optional component:

Optional

Answer 2

Well, I managed to solve it with <ng-content> like this:

<div class="form-group">
  <label app-optional>
    Name
    ... input here ...
  </label>
</div>

optional.component.ts

import { Component } from '@angular/core';
import { Translations } from '../../translations/translations';

@Component({
  selector: '[app-optional]',
  templateUrl: './optional.component.html',
  styleUrls: ['./optional.component.scss']
})
export class OptionalComponent {
  constructor(public T: Translations) {}
}

optional.component.html

<ng-content></ng-content>
<span class="optional"><em> - {{T.OPTIONAL}}</em></span>

optional.component.scss

.optional {
  font-weight: 300;
}