Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

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


    Create Application Layout with Components in an Angular CLI Project


    In this lesson we will our UiModule, that has a LayoutComponent, HeaderComponent and FooterComponent.

    We generate UiModule by running the following command:

    ng generate module ui --module app

    This generates the new module and imports it in our AppModule.

    We'll create the LayoutComponent using:

    ng generate component ui/containers/layout
    ng generate component ui/containers/header
    ng generate component ui/containers/footer

    We update our AppRoutingModule and add this component to our first route to make it visible.

    The HeaderComponent and FooterComponent are referenced in the LayoutComponent and we implement the actual templates!