Difficulty: Beginner
Estimated Time: 65 Minutes

The definition of each step of this tutorial can be found at https://github.com/devonfw-tutorials/tutorials/tree/main/devon4ng-mat-layout.

Feel free to report any errors to us or fix them yourself. Errors can be reported by creating an issue in the tutorials repository. To fix the error fork the repository and create a pull request. Errors in the wiki can be reported and fixed in the tutorial-compiler repository. You can find a description of what to look for when creating a pull request at the devonfw contribution guide: https://devonfw.com/website/pages/community/community.html#community.asciidoc_contributing-to-devonfw. If you want to create a tutorial you can start with the katacoda tutorial and read the description for creating your own tutorials: https://github.com/devonfw-tutorials/tutorials/wiki/Development.

The purpose of this tutorial is to get a basic understanding of creating layouts using Angular Material in a devon4ng application. You will create an application with a header containing some menu links and a sidenav with some navigation links.



  • Basic Angular knowledge


Learning goals

In this tutorial you will learn how to:

  • create an Angular application using the devon command

  • add Angular Material to the application

  • import Angular Material components into your modules

  • use Material icons in the application

  • use a prebulit theme to style the application

  • create layout (containing a header with menu along with a sidenav with navigational links) with the Angular Material components

In this tutorial you learned how to create an angular application using devonfw-ide, add Angular Material to it and use its components to create a simple layout.

Create an Angular application with Angular Material components using devon4ng

Step 1 of 12

Create Angular project

Before creating a devon4ng application, you first have to install the devonfw ide. You will find more information about devonfw on https://devonfw.com/website/pages/welcome/welcome.html. Once you have setup devonfw ide, you are ready to create your first devon4ng project.(Please wait until the devon setup completes and the command prompt becomes ready for writing commands in the integrated terminal here).

Please change the folder to 'devonfw/workspaces/main'.

cd devonfw/workspaces/main

Use the 'ng create' command to create a new Angular project with the name devon4ng-mat-layout. devon ng create devon4ng-mat-layout --style=scss --routing=true --strict=false

Now you have to open another terminal. Click on the cd command twice and you will change to 'devonfw/workspaces/main/devon4ng-mat-layout' in terminal 2 automatically. The first click will open a new terminal and the second one will change the directory. Alternatively you can click on the '+', choose the option 'Open New Terminal' and run the cd command afterwards.

cd devonfw/workspaces/main/devon4ng-mat-layout

Now build and start the app

devon ng serve --host --disable-host-check

For your local projects you wouldn't add '--host' and '--disable-host-check' to the 'ng' command.

Now you can open the following link to use the app. https://[[HOST_SUBDOMAIN]]-4200-[[KATACODA_HOST]].environments.katacoda.com/