Angular 2 basic course
Volume one- section three
What are we going to learn today?
How the components communicate with each other
- Components brothers
- Component son
- Tag Input
- Tag output
- Two ways data binding
Result of the practice
https://github.com/ardiadrianadri/basicCourse/releases/tag/final_volume_1_section_3
Homework
A table:
- Pagination button to go at the first page
- Pagination button to go at the previous page
- Pagination button to go at the next page
- Pagination button to go at the last page
- Select menu to set the size of the pages (5, 15 and 20)
Homework
Input parameters
Metadata:
[{
header: <Header of the table comlumn>
key: <Name of the attribute, which value will be in the column>
},...]
Homework
Input parameters
Table Object:
{
totalNumber: <Number of the results>
page: <Number of the current page>
totalPages: <Number of pages>
size: <Size of the pages>
data: <Array with the result of the search for the current page>
}
Homework
Example:
Metadata
[{header: 'Name', key:'name'},{header:'Email', key: 'email'}]
Table object
{
totalNumber: 2,
page: 1,
size: 5,
totalPages: 1,
data: [{name:'Adrian', email:'ardiadrianadri@gmail.com'},
{name: 'Victor', email:'victorVice@gmail.com'}]
}
Clue:
Use the ngFor directevie:
https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html