Create Dynamic Components in Angular
Offered By: egghead.io
Course Description
Overview
Dynamic data gives us the opportunity to build dynamic components. Dynamic components are reusable and make building large-scale applications so much easier. In this course, Juri Stumpflohner will take us through the specific use case of of creating a tabbed component which allows us to dynamically define new tabs.
On our journey of implementing this component we will learn about how we can dynamically instantiate components, leveraging the ComponentFactoryResolver and ViewContainerRef.
Furthermore we will explore how to define view templates, how to pass them to our dynamically instantiated components as well as how to pass data into those templates. All of this will be powered by ngTemplateOutlet and ngTemplateOutletContext.
On our journey of implementing this component we will learn about how we can dynamically instantiate components, leveraging the ComponentFactoryResolver and ViewContainerRef.
Furthermore we will explore how to define view templates, how to pass them to our dynamically instantiated components as well as how to pass data into those templates. All of this will be powered by ngTemplateOutlet and ngTemplateOutletContext.
Syllabus
- Angular Tab Component Overview
- Declare a Template within a Template using `ng-template` in Angular
- Pass a Reference of an ng-template to a Component and Render it in Angular
- Pass Data to a Dynamic ng-template using ngTemplateOutletContext in Angular
- Define an Anchor Point Where to Render Dynamic Components in Angular
- Dynamically Instantiate an Angular Component
- Destroy a Dynamically Instantiated Angular Component
Taught by
Juri Strumpflohner
Related Courses
Single Page Web Applications with AngularJSJohns Hopkins University via Coursera Front-End JavaScript Frameworks: AngularJS
The Hong Kong University of Science and Technology via Coursera Front End Frameworks
Google via Udacity Developing Dynamic Web Applications Using Angular
Microsoft via edX AngularJS: Advanced Framework Techniques
Microsoft via edX