как переопределить и привязать к атрибутам проецируемого содержимого

Question

Предположим, что их 2 компонента. родительский компонент page и дочерний компонент field. я хочу пройтиinput html тег / элемент из page к fieldиспользуя проекцию контента. затем внутриfield компонент я хочу изменить переданный inputАтрибуты элемента html. например, установка максимальной / минимальной длины поля на жестко заданную длину и привязка (размытие) события к функции.

образцы кода.

в page.component:

 @Component({
  selector: 'page',
  templateUrl: `
  <field>
    <input type="text">
  </field>`
})
export class PageComponent  {}

в полевом компоненте:

@Component({
  selector: 'field',
  template: `
  <ng-content  select="input"></ng-content>
  `
})
export class FieldComponent  {
  length = 14;
  onBlur()
  {
    console.log('blured');
  }
}

Я попытался сделать что-то подобное (очевидно, это не сработало), но, надеюсь, это прояснит мою точку зрения

@Component({
  selector: 'field',
  template: `
  <ng-content maxLength="length" minLength="length" (blur) ="onBlur()" select="input"></ng-content>
  `
})
export class FieldComponent  {
  length = 14;
  onBlur()
  {
    console.log('blured');
  }
}

примечание: я не смог найти способ / технику / шаблон, как это сделать. поиск слов, таких как заголовок выше, направляет меня только к статьям, которые учат использовать проекцию контента или расширенные варианты использования, а этот не является их частью. возможно, я не смог найти правильный термин для поиска. Если это так, скажите, пожалуйста, как называется этот процесс. заранее спасибо.