Angular 11: Working With Nested Components

Angular    |    Intermediate
  • 6 videos | 21m 39s
  • Includes Assessment
  • Earns a Badge
Rating 4.4 of 94 users Rating 4.4 of 94 users (94)
Nested components in Angular allow the use of reusable logic within separate units, which can be associated with one or more different components at a time. Take this course to supplement your knowledge of working with nested components in Angular. Try your hand at building a nested component, using the @Input and @Output keywords, and implementing the ViewChild property. After wrapping up this course, you'll be able to use nested components to build applications in Angular that are composed of multiple components working together.

WHAT YOU WILL LEARN

  • Discover the key concepts covered in this course
    Describe nested components and the parent-child component structure
    List the use of the @input keyword and pass data to the child component
  • List the use of @output keyword, pass events from child component to parent component, and update properties of parent component using child component
    Explain viewchild and implement viewchild property in angular component
    Summarize the key concepts covered in this course

IN THIS COURSE

  • 1m 4s
    This course will show you how to build nested components, pass data to components via @Input, move data from the nested component into the parent via @Output, and explore the ViewChild property. FREE ACCESS
  • 3m 6s
    Explore nested components and the parent-child component structure. Examine the Talks parent component, the @Output function and @EventEmitter function. Learn about the @ViewChild decorator in Angular. FREE ACCESS
  • Locked
    3.  Passing Data to Nested Component Using @Input
    4m 20s
    Examine the @Input keyword and see how to pass data to the child component. Use Visual Studio editor to create a property with a value to pass over to a child component. Work with a product.component.ts file to demonstrate value transfers. FREE ACCESS
  • Locked
    4.  Moving Data from Nested Component using @Output
    6m 55s
    Explore the @Output keyword. See how to pass events from a child component to a parent component. Find out how to update the properties of a parent component via a child component. Use Visual Studio and a browser console window to recode and observe the behavior of components. FREE ACCESS
  • Locked
    5.  Implementing ViewChild in Angular Component
    4m 42s
    Use Visual Studio and a browser's console to examine and implement the ViewChild property in Angular. Verify that the component is loaded into the DOM (Document Object Model). Access the child component via a reference and then execute a method as well as access properties in that child component. FREE ACCESS
  • Locked
    6.  Course Summary
    1m 33s
    In this course, you saw how to build nested components, pass data to components via the @Input decorator, move data from the nested component into the parent via @Output, and explore the ViewChild property. FREE ACCESS

EARN A DIGITAL BADGE WHEN YOU COMPLETE THIS COURSE

Skillsoft is providing you the opportunity to earn a digital badge upon successful completion on some of our courses, which can be shared on any social network or business platform.

Digital badges are yours to keep, forever.

YOU MIGHT ALSO LIKE

Rating 4.4 of 69 users Rating 4.4 of 69 users (69)
Rating 4.6 of 198 users Rating 4.6 of 198 users (198)
Rating 4.5 of 560 users Rating 4.5 of 560 users (560)

PEOPLE WHO VIEWED THIS ALSO VIEWED THESE

Rating 4.6 of 265 users Rating 4.6 of 265 users (265)
Rating 4.5 of 64 users Rating 4.5 of 64 users (64)
Rating 4.5 of 51 users Rating 4.5 of 51 users (51)