This tutorial is about creating a sample application using angular 5 material design.The app will have a login module as a landing page and after successful login user will be redirected to next module i.e. usermodule on user page. To design this page we will be using different angular 5 material components such as form controls, navigation menu, layout and buttons.
At first, we will be setting up the angular Hero app using angular CLI and then integrate material design with it from scratch. So, following are the commands I used to set up the angular 5 Hero app.
Now we have our Hero application running on http://localhost:4200.The CLI version here is 1.6.5 and angular version is 5.2.0.Let's start integrating material with it.
We will be using angular CLI to integrate material with this Hero application.Here is the official website for API description of angular 5 material. There are primarily 3 steps to configure material design.Let &apos's do it step by step.
Step 1 Install angular material and cdk
Above command will install required dependencies such as
@angular/material to get started with material. Here
@angular/material installs the actual dependency required for material designing whereas cdk(Component Development Kit) allows to build application without any dependency on material and
@angular/animations provides high quality animations effect.
Step 2 - Install Angular Theme - There are 4 themes available - deeppurple-amber.css, indigo-pink.css,
pink-bluegrey.css and purple-green.css under node_modules/@angular/material/prebuilt-themes. We will be using indigo-pink theme.Before using it we need to install it in our application. To do so, import the project into your IDE and open style.css under src folder paste the below line.
Also add following to index.html for fonts support.
Since, we have login and post login module, let's create two components here - login and user using cli command.
We have our final project structure ready.Following is the final structure.
Step 3 - Material Module Configuration - Here we will be creating a separate module file to define all our material related module in one single .ts file to make the implementation cleaner. So, create a file named material.module.ts file with following lines.
Now import the same in app.module.ts. Following is our app.module.ts with configuration for routing, angular material.app.module.ts
Till now there won's be any effect of material in our application but our configuration to get started with material is done. Now, we will start creating components using material.
We have our default routing configured for login and for post login user will be redirected to user page.Following is the routing configuration.app.routing.module.ts
Angular provides 3 navigation options - Menu, Sidenav and Toolbar. We will be creating toolbar here for navigation. To do so, first we need to import and export MatToolbarModule in our material.module.ts as follow:
Now we have tool bar module imported, we can create our tool bar which will have company logo on the left side and some buttons on the right side.To have material buttons we need buttons module imported which has been imported above.
Let's clean up default settings first and add following line inside login.component.htmllogin.component.html
Alao, add following css in login.component.css
Once this is done, hit ng serve in the command line and open browser at localhost:4200. Following is the material toolbar that we built.
Now let's create a login form. For this we require to import MatCardModule and MatInputModule. MatCardModule is a material layout and MatInputModule provides multiple input components.Add following lines in login.component.htmllogin.component.html
In the above code we have a layout having two form fields for username and password bind with our model attributes and a button. Once this button is clicked
login() will be called to validate the user.
Once you add above code, you will find error as Can't bind ngModel since it isn't a known property of input because we don't have formsModule imported. Hence let's import it in
app.module.ts.Also, make following changes in
login.component.ts to define the variable username, password and
Once the user is validated, he will be redirected to user page.
Now open the browser, you can see a beautiful login page as below.
once user is properly authenticated, he will be redirected to user page as below
In this tutorial, we learned about creating angular 5 application using material designing.If you have anything that you want to add or share then please share it below in the comment section
1. Angular Jwt Authentication
2. Angular Data Table Example
3. Angular Material Dialog
4. Typescript Tutorial
5. Install Nginx Php Mac
6. Nodejs Basic Tutorial
8. Building Angular Application
Contact us: email@example.com