Next, follow these steps to implement the products-page component with just the menu for now:

1. Generate the component using Angular CLI by running the following:

ng g component modules/market/products-page

2. Replace the HTML file /src/app/modules/market/products-page/products-page.component.html contents with the following:

<app-category-menu></app-category-menu>

3. Add ProductsPageComponent to the market module's exports as follows:
   1. Open the market.module.ts file.
   2. Add exports to the @NgModule decorator, with an array as the value.
   3. Add ProductsPageComponent to the exports array.

@NgModule({
   imports: [
     CommonModule
   ],
   declarations: [
     CategoryMenuItemComponent,
     CategoryMenuComponent,
     ProductsPageComponent,
   ],
   exports: [
     ProductsPageComponent,
   ]
 })
 export class MarketModule { }

   Finally, add the products page to the root app component as follows:

4. Add the products page component to app.component.html:

<app-header></app-header>
<div class="main-area">
  <app-products-page></app-products-page>
</div>

5. Replace the CSS file contents in the app.component.css file with the following:

.main-area {
  margin: 10px;
}

6. Since AppComponent uses the ProductsPageComponent, AppModule now requires MarketModule: so let's add it as follows:
   1. Add MarketModule to the imports of AppModule by adding the following to app.module.ts:

import { MarketModule } from './modules/market/market.module';
 
@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent
  ],
  imports: [
    BrowserModule,
    SharedModule,
    MarketModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

You can now run the application and see the category menu items in place. It should look similar to that in the following screenshot, only with different categories:

Currently, the menu items are defined statically with a constant name.

To complete the functionality of the category menu items, we need to do the following:

• CategoryMenuComponent should receive the menu items data from its ProductsPageComponent parent component.
• CategoryMenuItemComponent should receive the item name, and an indication of whether or not it is selected from its CategoryMenuComponent parent component.
• CategoryMenuComponent should manage the menu item selection by doing the following:
  1. CategoryMenuItemComponent should notify it when it is clicked.
  2. It should maintain the selection as part of its state.
  3. It should notify selection changes to its parent.

The following diagram visualizes the preceding detailed steps:

For the purpose of implementing the preceding flow, you will learn about data binding and component interaction next.