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.

Prerequisites

  • 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

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.

devonfw setup

If you already installed the devonfw IDE, you can skip this step.

Prerequisites

  • You need to have a tool to extract .tar.gz files. On Windows lower Windows 10 use can use 7-Zip. The most other platforms support this feature by default.

  • You need to have Git and Curl installed. On Windows you have to install Git for Windows. On Linux systems you might need to install the following tools in case they are not present (sudo apt-get install git curl or sudo yum install git-core curl)

Create a new directory in the location where you want to install the devonfw IDE. If you are using the terminal, navigate to this location and run mkdir devonfw and cd devonfw to create the directory and navigate into it.

Download

Now you have to download the latest release of the devonfw IDE. You can download it from here.

In the Terminal execute Invoke-WebRequest -OutFile devonfw-ide-scripts.tar.gz 'https://repository.sonatype.org/service/local/artifact/maven/redirect?r=central-proxy&g=com.devonfw.tools.ide&a=devonfw-ide-scripts&v=LATEST&p=tar.gz' if you are using Windows.

On Linux use wget -c 'https://repository.sonatype.org/service/local/artifact/maven/redirect?r=central-proxy&g=com.devonfw.tools.ide&a=devonfw-ide-scripts&v=LATEST&p=tar.gz' -O devonfw-ide-scripts.tar.gz -.

On MacOS, depending on your setup, you can either use the same wget command specified for the Linux installation (install wget via homebrew brew install wget) or use any other available download command i.e. curl -o devonfw-ide-scripts.tar.gz https://repository.sonatype.org/service/local/artifact/maven/redirect?r=central-proxy&g=com.devonfw.tools.ide&a=devonfw-ide-scripts&v=LATEST&p=tar.gz.

After that you need to extract the downloaded file. To do this, run tar -xvzf devonfw-ide-scripts.tar.gz. Or you can simply use a tool (e.g. 7-Zip) for this.

Setup

First, you need to prepare a settings repository to specify the tools to be installed within the devonfw IDE. Normally this is done by your project. If you just want to test the devonfw IDE, you can use the default URL, which is https://github.com/devonfw/ide-settings.

For now clone the repository on https://github.com/devonfw/ide-settings or your own fork of it. For this tutorial you have to write DEVON_IDE_TOOLS=(npm ng vscode) into the devon.properties file of the cloned settings repository. These settings will now be passed into the installation process of the devonfw-ide. Start the setup process by executing .\setup 'path/to/settings' (Windows) or bash setup path/to/settings.git (Linux).

You can also just execute .\setup (Windows) or bash setup (Linux) and press Enter when the setup assistent asks for the URL to the settings repository. This will also download the default settings and install the default tools within the devonfw IDE.

Add Angular Material

[[index.asciidoc_installation-of-package-@angularmaterial-@angularcdk-@angularanimations]] === Installation of package @angular/material @angular/cdk @angular/animations Next you will add Angular Material to your application.

Prerequisites

  • Install Node.js. You can download Node.js here.

  • Installed npm. You can download npm here and follow the installation instructions.

Execution

You can install the package @angular/material @angular/cdk @angular/animations and add it to the dependencies.

Now execute npm install --save @angular/material @angular/cdk @angular/animations in the terminal.

This may take some time.

Import Material components

Changing of the app.module.ts file

Once the dependencies are installed, you need to import the BrowserAnimationsModule in your AppModule for animations support. Also, Angular Material provides a host of components for designing your application. All the components are well structured into NgModules. For each component from the Angular Material library that you want to use, you have to import the respective NgModule.

Prerequisites

  • VS Code Editor (can be installed in your devonfw environment).

Changing of app.module.ts in the VS Code Editor

To change the file app.module.ts, you have to open it in VS Code first. Open VS Code and choose in the File context menu in the top left corner right next to the VS Code symbol Open File…​ or just use the keyboard shortcut ctrl+o. Based on your operating system a window with the file explorer opens. You have to navigate to app.module.ts and select it. Choose the right folder manually by selecting the folders from the path devonfw/workspaces/main/devon4ng-mat-layout/src/app and select the file app.module.ts. You can confirm this with the Open button in the bottom right corner and app.module.ts will be opened in a new VS Code editor window.

Copy the following text.

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatMenuModule } from '@angular/material/menu';
import { MatListModule } from '@angular/material/list';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatSidenavModule } from '@angular/material/sidenav';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserAnimationsModule,
    MatIconModule,
    MatButtonModule,
    MatMenuModule,
    MatListModule,
    MatToolbarModule,
    MatSidenavModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now insert the copied text into the opened app.module.ts. The final step is to save the file by selecting Save in the file context menu or by using the keyboard shortcut ctrl+s and app.module.ts has been changed.

Load Material icons

Changing of the index.html file

To use Material Design Icons along with the mat-icon component, you will load the Material Icons library in your src/index.html file.

Prerequisites

  • VS Code Editor (can be installed in your devonfw environment).

Changing of index.html in the VS Code Editor

To change the file index.html, you have to open it in VS Code first. Open VS Code and choose in the File context menu in the top left corner right next to the VS Code symbol Open File…​ or just use the keyboard shortcut ctrl+o. Based on your operating system a window with the file explorer opens. You have to navigate to index.html and select it. Choose the right folder manually by selecting the folders from the path devonfw/workspaces/main/devon4ng-mat-layout/src and select the file index.html. You can confirm this with the Open button in the bottom right corner and index.html will be opened in a new VS Code editor window.

Copy the following text.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Devon4ngMatLayout</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

Now insert the copied text into the opened index.html. The final step is to save the file by selecting Save in the file context menu or by using the keyboard shortcut ctrl+s and index.html has been changed.

Add global styles

Changing of the styles.scss file

Now that you have all the Angular Material related dependencies set up in your project, you can start coding. Let’s begin by adding a suitable margin and font to the body element of your single page application. You will add it in the src/styles.scss file to apply it globally.

Prerequisites

  • VS Code Editor (can be installed in your devonfw environment).

Changing of styles.scss in the VS Code Editor

To change the file styles.scss, you have to open it in VS Code first. Open VS Code and choose in the File context menu in the top left corner right next to the VS Code symbol Open File…​ or just use the keyboard shortcut ctrl+o. Based on your operating system a window with the file explorer opens. You have to navigate to styles.scss and select it. Choose the right folder manually by selecting the folders from the path devonfw/workspaces/main/devon4ng-mat-layout/src and select the file styles.scss. You can confirm this with the Open button in the bottom right corner and styles.scss will be opened in a new VS Code editor window.

Copy the following text.

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

body {
    margin: 0;
    font-family: "Segoe UI", Roboto, sans-serif;
  }

Now insert the copied text into the opened styles.scss. The final step is to save the file by selecting Save in the file context menu or by using the keyboard shortcut ctrl+s and styles.scss has been changed.

Add a header

Changing of the app.component.html file

Clear the app.component.html file and setup a header with a menu button and some navigational links. You will use mat-toolbar, mat-button, mat-menu, mat-icon and mat-icon-button for this:

Prerequisites

  • VS Code Editor (can be installed in your devonfw environment).

Changing of app.component.html in the VS Code Editor

To change the file app.component.html, you have to open it in VS Code first. Open VS Code and choose in the File context menu in the top left corner right next to the VS Code symbol Open File…​ or just use the keyboard shortcut ctrl+o. Based on your operating system a window with the file explorer opens. You have to navigate to app.component.html and select it. Choose the right folder manually by selecting the folders from the path devonfw/workspaces/main/devon4ng-mat-layout/src/app and select the file app.component.html. You can confirm this with the Open button in the bottom right corner and app.component.html will be opened in a new VS Code editor window.

Copy the following text.

<mat-toolbar color="primary">
  <button mat-icon-button aria-label="menu" class="menu">
    <mat-icon>menu</mat-icon>
  </button>
  <button mat-button [matMenuTriggerFor]="submenu">Menu 1</button>
  <button mat-button>Menu 2</button>
  <button mat-button>Menu 3</button>

  <mat-menu #submenu="matMenu">
    <button mat-menu-item>Sub-menu 1</button>
    <button mat-menu-item [matMenuTriggerFor]="submenu2">Sub-menu 2</button>
  </mat-menu>

  <mat-menu #submenu2="matMenu">
    <button mat-menu-item>Menu Item 1</button>
    <button mat-menu-item>Menu Item 2</button>
    <button mat-menu-item>Menu Item 3</button>
  </mat-menu>

</mat-toolbar>

Now insert the copied text into the opened app.component.html. The final step is to save the file by selecting Save in the file context menu or by using the keyboard shortcut ctrl+s and app.component.html has been changed.

The color attribute on the mat-toolbar element will give it the primary (indigo) color as defined by your theme. The color attribute works with most Angular Material components; the possible values are primary, accent and warn. The mat-toolbar is a suitable component to represent a header. It serves as a placeholder for elements you want in your header. Inside the mat-toolbar, you start with a button having mat-icon-button attribute, which itself contains a mat-icon element having the value menu. This will serve as a menu button which you can use to toggle the sidenav. You follow it with some sample buttons having the mat-button attribute. Notice the first button has a property matMenuTriggerFor binded to a local reference submenu. As the property name suggests, the click of this button will display the mat-menu element with the specified local reference as a drop-down menu. The rest of the code is self explanatory.

Shift header menu buttons to right

Changing of the app.component.scss file

You want to keep the sidenav toggling menu button on the left and move the rest to the right to make it look better. To do this add the following style to the menu class in app.component.scss:

Prerequisites

  • VS Code Editor (can be installed in your devonfw environment).

Changing of app.component.scss in the VS Code Editor

To change the file app.component.scss, you have to open it in VS Code first. Open VS Code and choose in the File context menu in the top left corner right next to the VS Code symbol Open File…​ or just use the keyboard shortcut ctrl+o. Based on your operating system a window with the file explorer opens. You have to navigate to app.component.scss and select it. Choose the right folder manually by selecting the folders from the path devonfw/workspaces/main/devon4ng-mat-layout/src/app and select the file app.component.scss. You can confirm this with the Open button in the bottom right corner and app.component.scss will be opened in a new VS Code editor window.

Copy the following text.

.menu {
    margin-right: auto;
}

Now insert the copied text into the opened app.component.scss. The final step is to save the file by selecting Save in the file context menu or by using the keyboard shortcut ctrl+s and app.component.scss has been changed.

Create navigatable pages

Create the home.component.html file

Next, you will create a sidenav. But before that lets create a couple of components to navigate between, the links of which you will add to the sidenav. You can use the ng generate component (or ng g c command for short) to create Home and Data components. But here, you will create them manually. You nest them in the pages sub-directory since they represent your pages. And you will also add the new components to your AppModule.

Prerequisites

  • Existing folder you want to create the file. (If the folder doesn’t exist you can create it from with the editor).

  • VS Code Editor (can be installed in your devonfw environment).

Creating home.component.html in the VS Code Editor

Create home.component.html in the VS Code editor and insert the following data into it.

Opening a new file can be done by going to the file context menu in the top left corner right next to the VS Code symbol and selecting New File or use the keyboard shortcut ctrl+n. A new VS Code editor window will be opened with an untitled-1 filename.

Copy the following text.

<h2>Home Page</h2>

Now insert the copied text into the new file.

The next step is to save the file by selecting Save or Save as in the file context menu or by using the keyboard shortcut ctrl+s. A file explorer window opens. You should check if you are currently in the right directory where you want to save devonfw/workspaces/main/devon4ng-mat-layout/src/app/pages/home/home.component.html. Select the directory devonfw/workspaces/main/devon4ng-mat-layout/src/app/pages/home. If the directory does not exist, create the missing folders or run through the previous steps from the wiki again. To save the file specify the name of the file. Paste home.component.html in the text field File name:. The last step is to save the file with the Save button in the bottom right corner and home.component.html has been created and filled with some content.

Create the home.component.scss file

Prerequisites

  • Existing folder you want to create the file. (If the folder doesn’t exist you can create it from with the editor).

  • VS Code Editor (can be installed in your devonfw environment).

Creating home.component.scss in the VS Code Editor

Create home.component.scss in the VS Code editor and insert the following data into it.

Opening a new file can be done by going to the file context menu in the top left corner right next to the VS Code symbol and selecting New File or use the keyboard shortcut ctrl+n. A new VS Code editor window will be opened with an untitled-1 filename.

Copy the following text.

h2 {
    text-align: center;
    margin-top: 50px;
}

Now insert the copied text into the new file.

The next step is to save the file by selecting Save or Save as in the file context menu or by using the keyboard shortcut ctrl+s. A file explorer window opens. You should check if you are currently in the right directory where you want to save devonfw/workspaces/main/devon4ng-mat-layout/src/app/pages/home/home.component.scss. Select the directory devonfw/workspaces/main/devon4ng-mat-layout/src/app/pages/home. If the directory does not exist, create the missing folders or run through the previous steps from the wiki again. To save the file specify the name of the file. Paste home.component.scss in the text field File name:. The last step is to save the file with the Save button in the bottom right corner and home.component.scss has been created and filled with some content.

Create the home.component.ts file

Prerequisites

  • Existing folder you want to create the file. (If the folder doesn’t exist you can create it from with the editor).

  • VS Code Editor (can be installed in your devonfw environment).

Creating home.component.ts in the VS Code Editor

Create home.component.ts in the VS Code editor and insert the following data into it.

Opening a new file can be done by going to the file context menu in the top left corner right next to the VS Code symbol and selecting New File or use the keyboard shortcut ctrl+n. A new VS Code editor window will be opened with an untitled-1 filename.

Copy the following text.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

Now insert the copied text into the new file.

The next step is to save the file by selecting Save or Save as in the file context menu or by using the keyboard shortcut ctrl+s. A file explorer window opens. You should check if you are currently in the right directory where you want to save devonfw/workspaces/main/devon4ng-mat-layout/src/app/pages/home/home.component.ts. Select the directory devonfw/workspaces/main/devon4ng-mat-layout/src/app/pages/home. If the directory does not exist, create the missing folders or run through the previous steps from the wiki again. To save the file specify the name of the file. Paste home.component.ts in the text field File name:. The last step is to save the file with the Save button in the bottom right corner and home.component.ts has been created and filled with some content.

Create the data.component.html file

Prerequisites

  • Existing folder you want to create the file. (If the folder doesn’t exist you can create it from with the editor).

  • VS Code Editor (can be installed in your devonfw environment).

Creating data.component.html in the VS Code Editor

Create data.component.html in the VS Code editor and insert the following data into it.

Opening a new file can be done by going to the file context menu in the top left corner right next to the VS Code symbol and selecting New File or use the keyboard shortcut ctrl+n. A new VS Code editor window will be opened with an untitled-1 filename.

Copy the following text.

<h2>Data Page</h2>

Now insert the copied text into the new file.

The next step is to save the file by selecting Save or Save as in the file context menu or by using the keyboard shortcut ctrl+s. A file explorer window opens. You should check if you are currently in the right directory where you want to save devonfw/workspaces/main/devon4ng-mat-layout/src/app/pages/data/data.component.html. Select the directory devonfw/workspaces/main/devon4ng-mat-layout/src/app/pages/data. If the directory does not exist, create the missing folders or run through the previous steps from the wiki again. To save the file specify the name of the file. Paste data.component.html in the text field File name:. The last step is to save the file with the Save button in the bottom right corner and data.component.html has been created and filled with some content.

Create the data.component.scss file

Prerequisites

  • Existing folder you want to create the file. (If the folder doesn’t exist you can create it from with the editor).

  • VS Code Editor (can be installed in your devonfw environment).

Creating data.component.scss in the VS Code Editor

Create data.component.scss in the VS Code editor and insert the following data into it.

Opening a new file can be done by going to the file context menu in the top left corner right next to the VS Code symbol and selecting New File or use the keyboard shortcut ctrl+n. A new VS Code editor window will be opened with an untitled-1 filename.

Copy the following text.

h2 {
    text-align: center;
    margin-top: 50px;
}

Now insert the copied text into the new file.

The next step is to save the file by selecting Save or Save as in the file context menu or by using the keyboard shortcut ctrl+s. A file explorer window opens. You should check if you are currently in the right directory where you want to save devonfw/workspaces/main/devon4ng-mat-layout/src/app/pages/data/data.component.scss. Select the directory devonfw/workspaces/main/devon4ng-mat-layout/src/app/pages/data. If the directory does not exist, create the missing folders or run through the previous steps from the wiki again. To save the file specify the name of the file. Paste data.component.scss in the text field File name:. The last step is to save the file with the Save button in the bottom right corner and data.component.scss has been created and filled with some content.

Create the data.component.ts file

Prerequisites

  • Existing folder you want to create the file. (If the folder doesn’t exist you can create it from with the editor).

  • VS Code Editor (can be installed in your devonfw environment).

Creating data.component.ts in the VS Code Editor

Create data.component.ts in the VS Code editor and insert the following data into it.

Opening a new file can be done by going to the file context menu in the top left corner right next to the VS Code symbol and selecting New File or use the keyboard shortcut ctrl+n. A new VS Code editor window will be opened with an untitled-1 filename.

Copy the following text.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-data',
  templateUrl: './data.component.html',
  styleUrls: ['./data.component.scss']
})
export class DataComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

Now insert the copied text into the new file.

The next step is to save the file by selecting Save or Save as in the file context menu or by using the keyboard shortcut ctrl+s. A file explorer window opens. You should check if you are currently in the right directory where you want to save devonfw/workspaces/main/devon4ng-mat-layout/src/app/pages/data/data.component.ts. Select the directory devonfw/workspaces/main/devon4ng-mat-layout/src/app/pages/data. If the directory does not exist, create the missing folders or run through the previous steps from the wiki again. To save the file specify the name of the file. Paste data.component.ts in the text field File name:. The last step is to save the file with the Save button in the bottom right corner and data.component.ts has been created and filled with some content.

Changing of the app.module.ts file

Prerequisites

  • VS Code Editor (can be installed in your devonfw environment).

Changing of app.module.ts in the VS Code Editor

To change the file app.module.ts, you have to open it in VS Code first. Open VS Code and choose in the File context menu in the top left corner right next to the VS Code symbol Open File…​ or just use the keyboard shortcut ctrl+o. Based on your operating system a window with the file explorer opens. You have to navigate to app.module.ts and select it. Choose the right folder manually by selecting the folders from the path devonfw/workspaces/main/devon4ng-mat-layout/src/app and select the file app.module.ts. You can confirm this with the Open button in the bottom right corner and app.module.ts will be opened in a new VS Code editor window.

Copy the following text.

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatMenuModule } from '@angular/material/menu';
import { MatListModule } from '@angular/material/list';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatSidenavModule } from '@angular/material/sidenav';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './pages/home/home.component';
import { DataComponent } from './pages/data/data.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    DataComponent
  ],
  imports: [
    BrowserAnimationsModule,
    MatIconModule,
    MatButtonModule,
    MatMenuModule,
    MatListModule,
    MatToolbarModule,
    MatSidenavModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now insert the copied text into the opened app.module.ts. The final step is to save the file by selecting Save in the file context menu or by using the keyboard shortcut ctrl+s and app.module.ts has been changed.

Add routing

Changing of the app-routing.module.ts file

Let us set up the routing such that when you visit the root url you see the HomeComponent and when you visit /data url you see the DataComponent. You had opted for routing while creating the application, so you have the routing module app-routing.module.ts setup for us. In this file, you have the empty routes array where you set up your routes:

Prerequisites

  • VS Code Editor (can be installed in your devonfw environment).

Changing of app-routing.module.ts in the VS Code Editor

To change the file app-routing.module.ts, you have to open it in VS Code first. Open VS Code and choose in the File context menu in the top left corner right next to the VS Code symbol Open File…​ or just use the keyboard shortcut ctrl+o. Based on your operating system a window with the file explorer opens. You have to navigate to app-routing.module.ts and select it. Choose the right folder manually by selecting the folders from the path devonfw/workspaces/main/devon4ng-mat-layout/src/app and select the file app-routing.module.ts. You can confirm this with the Open button in the bottom right corner and app-routing.module.ts will be opened in a new VS Code editor window.

Copy the following text.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './pages/home/home.component';
import { DataComponent } from './pages/data/data.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'data', component: DataComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Now insert the copied text into the opened app-routing.module.ts. The final step is to save the file by selecting Save in the file context menu or by using the keyboard shortcut ctrl+s and app-routing.module.ts has been changed.

Changing of the app.component.html file

You need to provide a hook where the components will be loaded when their respective URLs are loaded. You do that by using the router-outlet directive in the app.component.html:

Prerequisites

  • VS Code Editor (can be installed in your devonfw environment).

Changing of app.component.html in the VS Code Editor

To change the file app.component.html, you have to open it in VS Code first. Open VS Code and choose in the File context menu in the top left corner right next to the VS Code symbol Open File…​ or just use the keyboard shortcut ctrl+o. Based on your operating system a window with the file explorer opens. You have to navigate to app.component.html and select it. Choose the right folder manually by selecting the folders from the path devonfw/workspaces/main/devon4ng-mat-layout/src/app and select the file app.component.html. You can confirm this with the Open button in the bottom right corner and app.component.html will be opened in a new VS Code editor window.

Copy the following text.

<mat-toolbar color="primary">
  <button mat-icon-button aria-label="menu" class="menu">
    <mat-icon>menu</mat-icon>
  </button>
  <button mat-button [matMenuTriggerFor]="submenu">Menu 1</button>
  <button mat-button>Menu 2</button>
  <button mat-button>Menu 3</button>

  <mat-menu #submenu="matMenu">
    <button mat-menu-item>Sub-menu 1</button>
    <button mat-menu-item [matMenuTriggerFor]="submenu2">Sub-menu 2</button>
  </mat-menu>

  <mat-menu #submenu2="matMenu">
    <button mat-menu-item>Menu Item 1</button>
    <button mat-menu-item>Menu Item 2</button>
    <button mat-menu-item>Menu Item 3</button>
  </mat-menu>

</mat-toolbar>
<router-outlet></router-outlet>

Now insert the copied text into the opened app.component.html. The final step is to save the file by selecting Save in the file context menu or by using the keyboard shortcut ctrl+s and app.component.html has been changed.

Create the sidenav

Changing of the app.component.html file

Let us finally create the sidenav. To implement the sidenav you need to use 3 Angular Material components: mat-sidenav-container, mat-sidenav and mat-sidenav-content. The mat-sidenav-container, as the name suggests, acts as a container for the sidenav and the associated content. So it is the parent element, and mat-sidenav and mat-sidenav-content are the children sibling elements. mat-sidenav represents the sidenav. You can put any content you want, though it is usually used to conatain a list of navigational links. The mat-sidenav-content element is for conataining your main page content. Since you need the sidenav application-wide, you will put it in the app.component.html

Prerequisites

  • VS Code Editor (can be installed in your devonfw environment).

Changing of app.component.html in the VS Code Editor

To change the file app.component.html, you have to open it in VS Code first. Open VS Code and choose in the File context menu in the top left corner right next to the VS Code symbol Open File…​ or just use the keyboard shortcut ctrl+o. Based on your operating system a window with the file explorer opens. You have to navigate to app.component.html and select it. Choose the right folder manually by selecting the folders from the path devonfw/workspaces/main/devon4ng-mat-layout/src/app and select the file app.component.html. You can confirm this with the Open button in the bottom right corner and app.component.html will be opened in a new VS Code editor window.

Copy the following text.

<mat-toolbar color="primary">
  <button mat-icon-button aria-label="menu" class="menu" (click)="sidenav.toggle()">
    <mat-icon>menu</mat-icon>
  </button>
  <button mat-button [matMenuTriggerFor]="submenu">Menu 1</button>
  <button mat-button>Menu 2</button>
  <button mat-button>Menu 3</button>

  <mat-menu #submenu="matMenu">
    <button mat-menu-item>Sub-menu 1</button>
    <button mat-menu-item [matMenuTriggerFor]="submenu2">Sub-menu 2</button>
  </mat-menu>

  <mat-menu #submenu2="matMenu">
    <button mat-menu-item>Menu Item 1</button>
    <button mat-menu-item>Menu Item 2</button>
    <button mat-menu-item>Menu Item 3</button>
  </mat-menu>

</mat-toolbar>
<mat-sidenav-container>
  <mat-sidenav mode="over" [disableClose]="false" #sidenav>
    Sidenav
  </mat-sidenav>
  <mat-sidenav-content>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

Now insert the copied text into the opened app.component.html. The final step is to save the file by selecting Save in the file context menu or by using the keyboard shortcut ctrl+s and app.component.html has been changed.

Changing of the app.component.scss file

Prerequisites

  • VS Code Editor (can be installed in your devonfw environment).

Changing of app.component.scss in the VS Code Editor

To change the file app.component.scss, you have to open it in VS Code first. Open VS Code and choose in the File context menu in the top left corner right next to the VS Code symbol Open File…​ or just use the keyboard shortcut ctrl+o. Based on your operating system a window with the file explorer opens. You have to navigate to app.component.scss and select it. Choose the right folder manually by selecting the folders from the path devonfw/workspaces/main/devon4ng-mat-layout/src/app and select the file app.component.scss. You can confirm this with the Open button in the bottom right corner and app.component.scss will be opened in a new VS Code editor window.

Copy the following text.

.menu {
    margin-right: auto;
}
mat-sidenav-container {
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
}

Now insert the copied text into the opened app.component.scss. The final step is to save the file by selecting Save in the file context menu or by using the keyboard shortcut ctrl+s and app.component.scss has been changed.

Style the sidenav

Changing of the app.component.html file

The sidenav’s width will be corrected when you add the navigational links to it. That is the only thing remaining to be done. Lets implement it now:

Prerequisites

  • VS Code Editor (can be installed in your devonfw environment).

Changing of app.component.html in the VS Code Editor

To change the file app.component.html, you have to open it in VS Code first. Open VS Code and choose in the File context menu in the top left corner right next to the VS Code symbol Open File…​ or just use the keyboard shortcut ctrl+o. Based on your operating system a window with the file explorer opens. You have to navigate to app.component.html and select it. Choose the right folder manually by selecting the folders from the path devonfw/workspaces/main/devon4ng-mat-layout/src/app and select the file app.component.html. You can confirm this with the Open button in the bottom right corner and app.component.html will be opened in a new VS Code editor window.

Copy the following text.

<mat-toolbar color="primary">
  <button mat-icon-button aria-label="menu" class="menu" (click)="sidenav.toggle()">
    <mat-icon>menu</mat-icon>
  </button>
  <button mat-button [matMenuTriggerFor]="submenu">Menu 1</button>
  <button mat-button>Menu 2</button>
  <button mat-button>Menu 3</button>

  <mat-menu #submenu="matMenu">
    <button mat-menu-item>Sub-menu 1</button>
    <button mat-menu-item [matMenuTriggerFor]="submenu2">Sub-menu 2</button>
  </mat-menu>

  <mat-menu #submenu2="matMenu">
    <button mat-menu-item>Menu Item 1</button>
    <button mat-menu-item>Menu Item 2</button>
    <button mat-menu-item>Menu Item 3</button>
  </mat-menu>

</mat-toolbar>
<mat-sidenav-container>
  <mat-sidenav [disableClose]="false" mode="over" #sidenav>
    <mat-nav-list>
        <a
          id="home"
          mat-list-item
          [routerLink]="['./']"
          (click)="sidenav.close()"
          routerLinkActive="active"
          [routerLinkActiveOptions]="{exact: true}"
        >
          <mat-icon matListAvatar>home</mat-icon>
          <h3 matLine>Home</h3>
          <p matLine>sample home page</p>
        </a>
        <a
          id="sampleData"
          mat-list-item
          [routerLink]="['./data']"
          (click)="sidenav.close()"
          routerLinkActive="active"
        >
          <mat-icon matListAvatar>grid_on</mat-icon>
          <h3 matLine>Data</h3>
          <p matLine>sample data page</p>
        </a>
      </mat-nav-list>
    </mat-sidenav>
  <mat-sidenav-content>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

Now insert the copied text into the opened app.component.html. The final step is to save the file by selecting Save in the file context menu or by using the keyboard shortcut ctrl+s and app.component.html has been changed.

Changing of the app.component.scss file

Prerequisites

  • VS Code Editor (can be installed in your devonfw environment).

Changing of app.component.scss in the VS Code Editor

To change the file app.component.scss, you have to open it in VS Code first. Open VS Code and choose in the File context menu in the top left corner right next to the VS Code symbol Open File…​ or just use the keyboard shortcut ctrl+o. Based on your operating system a window with the file explorer opens. You have to navigate to app.component.scss and select it. Choose the right folder manually by selecting the folders from the path devonfw/workspaces/main/devon4ng-mat-layout/src/app and select the file app.component.scss. You can confirm this with the Open button in the bottom right corner and app.component.scss will be opened in a new VS Code editor window.

Copy the following text.

.menu {
    margin-right: auto;
}
mat-sidenav-container {
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    a.active {
        background: #8e8d8d;
        color: #fff;

        p {
            color: #4a4a4a;
        }
    }
}

Now insert the copied text into the opened app.component.scss. The final step is to save the file by selecting Save in the file context menu or by using the keyboard shortcut ctrl+s and app.component.scss has been changed.

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.

Last updated 2023-11-20 10:43:49 UTC