Повторно использовать шаблон со свойствами в Angular 7

Question

У меня есть этот шаблон, который я использовал везде в моем проекте:

<div class="col-xs-6 event" *ngFor="let event of events">
  <h1>{{ event.title }}</h1>
  <p>{{ event.content }}</p>
</div>

Я использую много свойств: заголовок, содержимое и т. Д.

Я структурировал свой проект так: events-list.component.ts, который отображает список событий, и events-get.component.ts, который является подробностью события. В деталях события я также отображаю другие события (например, блок «вам также может понравиться»).

Я не знаю, где и как объявить «шаблон» , который я мог бы использовать вместо дублирования этого кода.

Что-то вроде <event-template></event-template>, но с возможностью передачи свойств.

Answer 1

Благодаря комментариям мне удается добиться того, чего я хотел.

Я создал новый компонент с именем event . Теперь у меня есть event.component.ts:

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-event',
  templateUrl: './event.component.html',
  styleUrls: ['./event.component.css']
})
export class EventComponent implements OnInit {
  @Input() event: Event;

  constructor() { }

  ngOnInit() {
  }

}

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

Тогда в моем events-list.component.ts я могу использовать:

<app-event class="col-xs-12 col-sm-6 col-md-4 col-lg-4" *ngFor="let event of events" [event]="event"></app-event>

Это прекрасно!