Components and Data Passing

Level : Beginner
Mentor: Shailendra Chauhan
Type : GuidedLab
Points : 10
Duration : 00:35:00

Lab Details


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


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:



 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."




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

 articleId= 1,

 body= "Good, Keep it up!"


Self-paced Membership
  • 22+ Courses
  • 750+ Hands-On Labs
  • 200+ Quick Notes
  • 55+ Skill Tests
  • 45+ Interview Q&A
  • 10+ Real-world Projects
  • Career Coaching
  • Email Support
Upto 66% OFF

To get full access to all courses

Still have some questions? Let's discuss.
Accept cookies & close this