Как добавить «необязательный» текст для формирования метки ввода

Question

Я новичок в Angular 2 и пытаюсь добавить текст для формирования входных данных, которые являются необязательными.

Примерно так (app-optional):

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

Что должно привести кв:

Имя - необязательно

Как мне этого добиться?Или вы могли бы предложить лучший способ?

Answer 1

Ну, мне удалось решить это с помощью <ng-content>, например:

<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;
}

Answer 2

Вы можете попробовать это

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

В html дополнительного компонента приложения:

Optional