Передача данных из компонента в html
 

Начинаю изучать Angular.
Возникла проблема при передачи данных из компонента в html.
Пример:
1) есть компонент post (файлы post.component.html, post.component.scss, post.component.ts)
2) в app.component.ts с помощью интерфейсов создаю Posthttp://joxi.ru/Dr8anVEFJll7Pm
3) в app.component.html обхожу Post c помощью *ngFor http://joxi.ru/4AkLOjei0ee30r
4) в post.component.ts прописываю переменную, с которой буду работать http://joxi.ru/VrwyQZlIjddxl2
5) в post.component.html пытаюсь вывести данные http://joxi.ru/Grqle5gCRKKgBA, но возникает ошибка http://joxi.ru/a2XlevQClLLqB2
Подскажите, что делаю не так и по какой причине title undefined?

Если в post.component.ts вместо

@Input() post: Post

указать

@Input() post: any

, тогда всё работает

Ну смотри, когда ты делаешь так:
@Input() post: Post
ты говоришь - вот свойство post, в нём лежит объект типа Post. Но сам объект ты туда явным образом не кладёщь. TS говорит тебе: "эээ нет, раз ты заявляешь что тут Post - будь добр положи".

Когда ты делаешь так:
@Input() post: Post | undefined
Ты говоришь что тут будет Post или ничего. Соответственно когда потом ты используешь post без проверки что он точно есть, TS тебе говорит "possibly undefined" - "возможно, что там нифига нет", т.е. если там ничего нет, а ты пытаешься получить свойства объекта post - это явная ошибка.

Когда ты делаешь так:
@Input() post: any
Ты говоришь: "тут лежит ВСЁ что угодно, при том одновременно, иди ты нафиг TS". Так, конечно, работает - внешне, но это убивает весь смысл TS т.к. никак не защищает от настоящих ошибок.

Теперь к решению: ты можешь написать так:
@Input() post!: Post
Чем ты скажешь TS'у: "тут лежит Post и он там точно есть, мамой клянусь!". Если вдруг его там не окажется - это уже будет забота не TS'а.

Правильным же решением будет просто проверять наличие post перед применением, но как оно там в ангулярах я хз.)

Aetae, спасибо что откликнулись.
Очень доходчиво расписали возможные варианты, спасибо.
Способ с @Input() post!: Post работает :thanks:
Теперь, во время применения обязательно буду вспоминать ваши примеры :)
Еще подсказали вариант с дефолтными значениями @Input() post: Post = { title: '', text: '', id: 0 }