Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Course Overview: Advanced Angular Component Patterns

    Isaac MannIsaac Mann
    5 - 6

    Thanks for checking out this course!

    My goal is for you to be able to use the patterns described in this course to make your components more flexible and easy to use. Many thanks to Kent C. Dodds for his Advanced React Component Patterns course which was a big inspiration for this course.

    This course covers patterns that make a component's state, logic or ui configurable by a parent component. The patterns include: Compound Components, Provider Components, TemplateRefs and State Reducers.

    I hope you enjoy this course as much as I did making it.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson




    Isaac Mann: Hi. My name is Isaac Mann, and this is my Advanced Angular Component Patterns course.

    When we write components, we're encapsulating decisions about the state logic or UI of the app. Each of the patterns I share in this course will help you to write components that are opinionated about their core purpose but allow parent components to override secondary concerns.

    If this course feels eerily similar to Kent C. Dodds' Advanced React Component Patterns course, that's because I intentionally took the patterns he was applying in React and looked for analogs in the Angular world. They're good patterns, and they're just as useful in an Angular app as they are in a React one.

    First, we'll see how to use input and output decorators to allow a parent component to interact with the internal state of the component.

    Then, we'll explore using compound components to have more control over the UI of a component. We'll look at different ways of maintaining the state of the compound component, including using a provider component.

    Next, we'll look at using TemplateRefs to offer complete UI control to the parent component. This is the equivalent of React's render prop pattern.

    Finally, we'll see how to override the internal logic of a component using the state reducer pattern.

    I hope you enjoy the course.