1. Как создавать компоненты
Для начала создадим два базовых компонента приложения
ng g c post-list --skipTests
ng g c post --skipTestsapp > post > post.component.html
<div class='card'>
<h2>{{title}}</h2>
<p>{{text}}</p>
</div>app > post-form > post-form.component.html
<div>
<input type='text' placeholder='Title...'>
<input type='text' placeholder='Text...'>
<button class='btn'>Add post</button>
</div>
2. Передача параметров
В первую очередь нужно в целевой компонент добавить поле со значением, которое придёт извне и обернуть его в декоратор Input, который скажет, что это значение компонент будет принимать извне
app > post > post.component.ts
import { Component, Input, OnInit } from '@angular/core';
import { Post } from '../app.component';
@Component({
selector: 'app-post',
templateUrl: './post.component.html',
styleUrls: ['./post.component.scss'],
})
export class PostComponent implements OnInit {
@Input() post: Post;
constructor() {}
ngOnInit() {}
}app > post > post.component.html
<div class='card'>
<h2>{{post.title}}</h2>
<p>{{post.text}}</p>
</div>Тут находятся данные, которые будут переданы в дочерний компонент и их интерфейс
app > app.component.ts
import { Component } from '@angular/core';
export interface Post {
id: number;
title: string;
text: string;
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
posts: Post[] = [
{ title: 'JS', text: 'Самый лучший язык в мире', id: 1 },
{ title: 'C#', text: 'Самый любимый язык в мире', id: 1 },
];
constructor() {}
}И далее через ngFor итерируем компонент и передаём переменную-итератор в компонент через [post]
app > app.component.html
<div class='container'>
<h1>Angular App</h1>
<app-post-form></app-post-form>
<hr>
<app-post *ngFor='let p of posts' [post]='p'></app-post>
</div>
Так же в декоратор можно передать имя пропса, который мы передаём, если нам нужно будет другое имя пропса
