We will add some more advanced behaviours

• Part 1: A simple crud
  • Installation
  • The generated app
  • The list of addresses
  • The detail
  • Editing the detail
  • Validation
• Part 2: A node.js express-based API
  • Setup Express
  • Simple handler
  • Handling pagination
• Part 3: Advanced material
  • Header and footer
  • Toolbar
  • Submenus
  • Using a Real API
  • The DataSource object

Code on github https://github.com/kendarorg/Angular101

Prepartion

Copy the project demo001mat to demo002mat

Header and footer

First generate the stubs for the components

ng generate component header
ng generate component footer

And we can then modify the app.component.html file to include them. It will become like

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

And starting the app with "ng serve" the new parts will magically appear inside the view! Note that the path for the two modules is src/app/footer and we are using the name "app-footer" and "app-header" to use them!

Navigating through the app will always show them

Last modified on: February 17, 2020