Components and Data Passing

Description

In this guide, you will learn how to use the parent and child component relationship and use the child component as a nested or a reusable component and will see the way of doing data passing between the business logic from the component to the template.

Lab Objective

Upon completion of this lab, you will be able to:

•  How to create the component and models
•  How does the data pass between the components
•  Use the ability of TypeScript objects and arrays for the data storage

Prerequisites

You should have a basic understanding of components and a knowledge of TypeScript fundamentals such as class, object, and constructor.

Lab Requirements

•  Create an article page for displaying the article
•  Show the article comments using nested components.
•  Add the option to add comments
•  Show the comments count.

Note: Use a JavaScript object for the article with a comments array. The schema for the models is as:

Article

{

 id = 1,

 title = "Angular Best Practices",

 author = "Shailendra Chauhan",

 body = "Angular is a JavaScript framework widely used to make web apps, mobile apps and SPAs."

}

Comment

{

Copyright Dot Net Tricks Innovation Pvt. Ltd. | All rights Reserved.

 articleId= 1,

 body= "Good, Keep it up!"

}