You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
= Create an Angular application with Angular Material components using devon4ng
2
2
====
3
-
The purpose of this tutorial is to get a basic understanding of creating layouts using Angular Material in a devon4ng application. We will create an application with a header containing some menu links and a sidenav with some navigation links.
3
+
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.
4
4
5
5
## Prerequisites
6
-
* devonfw-ide installed
7
6
* Basic Angular knowledge
8
7
9
8
## Learning goals
10
-
In this tutorial we will learn how to:
9
+
In this tutorial you will learn how to:
11
10
* create an Angular application using the devon command
12
11
* add Angular Material to the application
13
-
* import Angular Material components into our modules
12
+
* import Angular Material components into your modules
14
13
* use Material icons in the application
15
14
* use a prebulit theme to style the application
16
-
* create layout (conataining a header with menu along with a sidenav with navigational links) with the Angular Material components
15
+
* create layout (containing a header with menu along with a sidenav with navigational links) with the Angular Material components
17
16
====
18
17
19
18
[step]
20
19
--
21
-
restoreDevonfwIde(["java","mvn", "npm", "ng"])
20
+
restoreDevonfwIde(["npm", "ng", "vscode"])
22
21
--
23
22
24
23
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.
25
-
Once you have setup devonfw ide, you are ready to create your first devon4ng project.
24
+
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).
Once the dependencies are installed, we need to import the BrowserAnimationsModule in our AppModule for animations support.
39
-
Also, Angular Material provides a host of components for designing our application. All the components are well structured into NgModules. For each component from the Angular Material library that we want to use, we have to import the respective NgModule.
38
+
Once the dependencies are installed, you need to import the BrowserAnimationsModule in your AppModule for animations support.
39
+
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.
Now that we have all the Angular Material related dependencies set up in our project, we can start coding. Let’s begin by adding a suitable `margin` and `font` to the body element of our single page application. We will add it in the `src/styles.scss` file to apply it globally.
53
+
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.
We will clear the `app.component.html` file and setup a header with a menu button and some navigational links. We will use `mat-toolbar`, `mat-button`, `mat-menu`, `mat-icon` and `mat-icon-button` for this:
61
+
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:
The color attribute on the mat-toolbar element will give it the primary (indigo) color as defined by our 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 we want in our header. Inside the `mat-toolbar`, we 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 we can use to toggle the `sidenav`. We 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.
67
+
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.
64
68
====
65
69
66
-
We 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 lets add the following style to the `menu` class in `app.component.scss`:
70
+
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`:
Next, we will create a sidenav. But before that lets create a couple of components to navigate between, the links of which we 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, we will create them manually. We nest them in the `pages` sub-directory since they represent our pages. And we will also add the new components to our AppModule.
77
+
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.
Let us set up the routing such that when we visit the root url we see the `HomeComponent` and when we visit `/data` url we see the `DataComponent`. We had opted for routing while creating the application, so we have the routing module `app-routing.module.ts` setup for us. In this file, we have the empty routes array where we set up our routes:
90
+
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:
We need to provide a hook where the components will be loaded when their respective URLs are loaded. We do that by using the `router-outlet` directive in the `app.component.html`:
97
+
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`:
Let us finally create the sidenav. To implement the sidenav we 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. We can put any content we want, though it is usually used to conatain a list of navigational links. The `mat-sidenav-content` element is for conataining our main page content. Since we need the `sidenav` application-wide, we will put it in the `app.component.html`
103
+
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`
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.
0 commit comments