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
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
Create an Angular application with Angular Material components using devon4ng
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'.
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.
Now build and start the app
devon ng serve --host 0.0.0.0 --disable-host-check
For your local projects you wouldn't add '--host 0.0.0.0' 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/