Angular Material — Sidenavs, Side Toggles, and Sliders

Angular Material is a popular UI framework based on Material Design for Angular.

In this article, we’ll look at how to use Angular Material into our Angular project.


Angular comes with a sidenav component.

We can add it by writing:


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatButtonModule } from '@angular/material/button';
  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

#technology #javascript #web-development

What is GEEK

Buddha Community

Angular Material — Sidenavs, Side Toggles, and Sliders
Zachary Palmer

Zachary Palmer


CSS Flexbox Tutorial | Build a Chat Application

Creating the conversation sidebar and main chat section

In this article we are going to focus on building a basic sidebar, and the main chat window inside our chat shell. See below.

Chat shell with a fixed width sidebar and expanded chat window

This is the second article in this series. You can check out the previous article for setting up the shell OR you can just check out the chat-shell branch from the following repository.

Open up the chat.html file. You should have the following HTML.

<!DOCTYPE html>
    <meta charset="utf-8" />
    <title>Chat App</title>
    <link rel="stylesheet" type="text/css" media="screen" href="css/chat.css" />
    <div id="chat-container">

Now inside of the chat-container div add the following HTML.

<div id="side-bar">
<div id="chat-window">

Now let’s also add the following CSS under the #chat-container selector in the chat.css file.

#side-bar {
    background: #0048AA;
    border-radius: 10px 0 0 10px;
#chat-window {
    background: #999;
    border-radius: 0 10px 10px 0;

Now reload the page. You should see the following:-

So what happened? Where is our sidebar and where is our chat window? I expected to see a blue side bar and a grey chat window, but it’s no where to be found. Well it’s all good. This is because we have no content inside of either element, so it can be 0 pixels wide.

Sizing Flex Items

So now that we know that our items are 0 pixels wide, let’s attempt to size them. We’ll attempt to try this first using explicit widths.

Add the following width property to the #side-bar rule, then reload the page.

width: 275px;

Hmm. Same result. It’s still a blank shell. Oh wait I have to make sure the height is 100% too. So we better do that too. Once again add the following property to the #side-bar rule, then reload the page.

height: 100%;

So now we have our sidebar that has grown to be exactly 275 pixels wide, and is 100% high. So that’s it. We’re done right? Wrong. Let me ask you a question. How big is the chat window? Let’s test that by adding some text to it. Try this yourself just add some text. You should see something similar to this.

So as you can see the chat window is only as big as the text that’s inside of it, and it is not next to the side bar. And this makes sense because up until now the chat shell is not a flex container, and just a regular block level element.

So let’s make our chat shell a flex container. Set the following display property for the #chat-window selector. Then reload the page.

display: flex;

So as you can see by the above illustration, we can see it’s now next to the side bar, and not below it. But as you can see currently it’s only as wide as the text that’s inside of it.

But we want it to take up the remaining space of the chat shell. Well we know how to do this, as we did it in the previous article. Set the flex-grow property to 1 on the #chat-window selector. Basically copy and paste the property below and reload the page.

flex-grow: 1;

So now we have the chat window taking up the remaining space of the chat shell. Next, let’s remove the background property, and also remove all text inside the chat-window div if any still exists. You should now see the result below.

But are we done? Technically yes, but before we move on, let’s improve things a little bit.

Understanding the default alignment

If you remember, before we had defined our chat shell to be a flex container, we had to make sure we set the height of the side bar to be 100%. Otherwise it was 0 pixels high, and as a result nothing was displayed. With that said, try removing the height property from the #side-bar selector and see what happens when you reload the page. Yes that’s right, it still works. The height of the sidebar is still 100% high.

So what happened here? Why do we no longer have to worry about setting the height to 100%? Well this is one of the cool things Flexbox gives you for free. By default every flex item will stretch vertically to fill in the entire height of the flex container. We can in fact change this behaviour, and we will see how this is done in a future article.

Setting the size of the side bar properly

So another feature of Flexbox is being able to set the size of a flex item by using the flex-basis property. The flex-basis property allows you to specify an initial size of a flex item, before any growing or shrinking takes place. We’ll understand more about this in an upcoming article.

For now I just want you to understand one important thing. And that is using width to specify the size of the sidebar is not a good idea. Let’s see why.

Say that potentially, if the screen is mobile we want the side bar to now appear across the top of the chat shell, acting like a top bar instead. We can do this by changing the direction flex items can flex inside a flex container. For example, add the following CSS to the #chat-container selector. Then reload the page.

flex-direction: column;

So as you can see we are back to a blank shell. So firstly let’s understand what we actually did here. By setting the flex-direction property to column, we changed the direction of how the flex items flex. By default flex items will flex from left to right. However when we set flex-direction to column, it changes this behaviour forcing flex items to flex from top to bottom instead. On top of this, when the direction of flex changes, the sizing and alignment of flex items changes as well.

When flexing from left to right, we get a height of 100% for free as already mentioned, and then we made sure the side bar was set to be 275 pixels wide, by setting the width property.

However now that we a flexing from top to bottom, the width of the flex item by default would be 100% wide, and you would need to specify the height instead. So try this. Add the following property to the #side-bar selector to set the height of the side bar. Then reload the page.

height: 275px;

Now we are seeing the side bar again, as we gave it a fixed height too. But we still have that fixed width. That’s not what we wanted. We want the side bar (ie our new top bar) here to now be 100% wide. Comment out the width for a moment and reload the page again.

So now we were able to move our side bar so it appears on top instead, acting like a top bar. Which as previously mentioned might be suited for mobile device widths. But to do this we had to swap the value of width to be the value of height. Wouldn’t it be great if this size was preserved regardless of which direction our items are flexing.

Try this, remove all widths and height properties from the #side-bar selector and write the following instead. Then reload the page.

flex-basis: 275px;

As you can see we get the same result. Now remove the flex-direction property from the #chat-container selector. Then once again reload the page.

Once again we are back to our final output. But now we also have the flexibility to easily change the side bar to be a top bar if we need to, by just changing the direction items can flow. Regardless of the direction of flex, the size of our side bar / top bar is preserved.


Ok so once again we didn’t build much, but we did cover a lot of concepts about Flexbox around sizing. 

#css #programming #webdev 

Ayyaz Zafar


Angular Material Autocomplete - Multiple Use Cases covered

Learn How to use Angular Material Autocomplete Suggestions Search Input. I covered multiple use cases.

Please watch this video. I hope this video would be helpful for you to understand it and use it in your projects

Please subscribe:

#angular #angular-material #angular-js #autocomplete #angular-material-autocomplete #angular-tutorial

David Nano

David Nano


Angular Material Tutorial: Build Navigation UI with Toolbar and Side Navigation Menu

In this guide, we'll build a navigation UI using the Material toolbar, sidenav, buttons, and icons components from Material Design.

Setting up Angular Material 8

We'll be using Material Design to style our CRM UI, so we need to add Angular Material 8 to our project.

Fortunately, this is only one command away. Open a new terminal and run the following commands:

$ cd ./ngsimplecrm
$ ng add @angular/material

The command will ask you to Choose a prebuilt theme name, or "custom" for a custom theme: (Use arrow keys)

  • Indigo/Pink
  • Deep Purple/Amber
  • Pink/Blue Grey
  • Purple/Green

Let’s choose Deep Purple/Amber.

You’ll be also asked if you want to Set up HammerJS for gesture recognition? (Y/n) Choose the default answer which is Yes. And if you want to Set up browser animations for Angular Material? (Y/n) You can also choose Yes.

That's it! Angular Material is configured in your application.

Importing Angular Material Components: MatToolbarModule, MatSidenavModule, MatListModule, MatButtonModule and MatIconModule

After that, you need to import the Angular Material components that you want to use in your project.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatToolbarModule, MatIconModule, MatSidenavModule, MatListModule, MatButtonModule } from  '@angular/material';

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

// [...]

  declarations: [
      // [...]
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

We import the following Material components modules for building our navigation UI:

  • MatToolbarModule which provides <mat-toolbar> and <mat-toolbar-row> components.
  • MatSidenavModule
  • MatListModule
  • MatButtonModule which provides mat-button and mat-icon-button.
  • MatIconModule which provides <mat-icon>.

Note: Make sure you import the Angular Material modules after Angular’s BrowserModule, as the import order matters for NgModules.

Angular 8 Material Toolbar Example

The Material toolbar components are designed to add containers for headers, titles, or actions. We can use various component such as <mat-toolbar> and <mat-toolbar-row> to create and structure toolbars for your application.

Open the src/app/app.component.html file and start by adding the toolbar:

<mat-toolbar color="primary">
    <button mat-icon-button>
      <mat-icon (click)="sidenav.toggle()">menu</mat-icon>
    <span class="menu-spacer"></span>
      <a mat-button [routerLink]="'/accounts'"> Accounts </a>
      <a mat-button [routerLink]="'/create-account'"> Create Account </a>
      <a mat-button [routerLink]="'/contacts'"> Contacts </a>
      <a mat-button [routerLink]="'/create-contact'"> Create Contact </a>
      <a mat-button [routerLink]="'/activities'"> Activities </a>
      <a mat-button [routerLink]="'/create-activity'"> Create Activity </a>


      <span style="font-size: 12px;">SimpleCRM helps you easily manage your contacts</span>


We use a primary color for our toolbar. Next, we create tow toolbar rows using the <mat-toolbar-row>. In the first row, we add an icon button (using mat-icon-button)with a Material icon (<mat-icon>) to toggle the sidenav menu which we’ll add next. Next, we add a bunch of navigation buttons using <a> tags with mat-button.

You can set the color of a <mat-toolbar> component by using the color property. By default, toolbars make use a neutral background color depending on the current theme (light or dark). This can be changed to primaryaccent, or warn.

This is a screenshot of our toolbar:

Angular Material Sidenav Example

According to the docs:

The sidenav components are designed to add side content to a fullscreen app. To set up a sidenav we use three components: <mat-sidenav-container> which acts as a structural container for our content and sidenav, <mat-sidenav-content> which represents the main content, and <mat-sidenav> which represents the added side content.

In the same src/app/app.component.html file, add:

  <mat-sidenav #sidenav>

      <a mat-list-item [routerLink]="'/accounts'"> Accounts </a>
      <a mat-list-item [routerLink]="'/create-account'"> Create Account </a>
      <a mat-list-item [routerLink]="'/contacts'"> Contacts </a>
      <a mat-list-item [routerLink]="'/create-contact'"> Create Contact </a>
      <a mat-list-item [routerLink]="'/activities'"> Activities </a>
      <a mat-list-item [routerLink]="'/create-activity'"> Create Activity </a>
      <a mat-list-item (click)="sidenav.toggle()" href="" mat-list-item>Close</a>

    <div style="height: 88vh;">


We used a Material navigation list to create a list of buttons using <mat-nav-list> and mat-list-item. We also added a #sidenav template reference variable to <mat-sidenav #sidenav> to be able to call its toggle() method from the menu icon in the toolbar so we toggle it on and off ( <mat-icon (click)=“sidenav.toggle()”>menu</mat-icon>)

This is a screenshot of our UI:


In this tutorial, we’ve added Angular Material 8 to our Angular 8 application which will allow us to build a professional-grade UI for our CRM. Next, we created a navigation UI with Material toolbar, sidenav, buttons and icons components. In the next tutorial, we’ll build our table and form UI to create a CRUD interface for creating reading, updating and deleting items from or CRM REST API.

Originally published at on 05 Jun 2019

#angular #web-development

Christa  Stehr

Christa Stehr


Install Angular - Angular Environment Setup Process

Angular is a TypeScript based framework that works in synchronization with HTML, CSS, and JavaScript. To work with angular, domain knowledge of these 3 is required.

  1. Installing Node.js and npm
  2. Installing Angular CLI
  3. Creating workspace
  4. Deploying your First App

In this article, you will get to know about the Angular Environment setup process. After reading this article, you will be able to install, setup, create, and launch your own application in Angular. So let’s start!!!

Angular environment setup

Install Angular in Easy Steps

For Installing Angular on your Machine, there are 2 prerequisites:

  • Node.js
  • npm Package Manager

First you need to have Node.js installed as Angular require current, active LTS or maintenance LTS version of Node.js

Download and Install Node.js version suitable for your machine’s operating system.

Npm Package Manager

Angular, Angular CLI and Angular applications are dependent on npm packages. By installing Node.js, you have automatically installed the npm Package manager which will be the base for installing angular in your system. To check the presence of npm client and Angular version check of npm client, run this command:

  1. npm -v

Installing Angular CLI

  • Open Terminal/Command Prompt
  • To install Angular CLI, run the below command:
  1. npm install -g @angular/cli

installing angular CLI

· After executing the command, Angular CLI will get installed within some time. You can check it using the following command

  1. ng --version

Workspace Creation

Now as your Angular CLI is installed, you need to create a workspace to work upon your application. Methods for it are:

  • Using CLI
  • Using Visual Studio Code
1. Using CLI

To create a workspace:

  • Navigate to the desired directory where you want to create your workspace using cd command in the Terminal/Command prompt
  • Then in the directory write this command on your terminal and provide the name of the app which you want to create. In my case I have mentioned DataFlair:
  1. Ng new YourAppName

create angular workspace

  • After running this command, it will prompt you to select from various options about the CSS and other functionalities.

angular CSS options

  • To leave everything to default, simply press the Enter or the Return key.

angular setup

#angular tutorials #angular cli install #angular environment setup #angular version check #download angular #install angular #install angular cli

Monty  Boehm

Monty Boehm


Angular Material 12 File Upload Example with Progress Bar

In this tutorial, I will show you way to build an Angular Material 12 File upload to Rest API example using HttpClient, FormData and Progress Bar.

More Practice:

–  Angular Material 12 Image upload with Preview example

–  Angular 12 + Spring Boot: File upload example

–  Angular 12 + Node.js: File Upload example

–  Angular 12 Login and Registration example with JWT & Web Api

–  Angular 12 CRUD Application example with Web API

–  Angular 12 Form Validation example (Reactive Forms)

– Bootstrap instead:  Angular 12 File upload example with progress bar & Bootstrap

#angular #angular #angular 12 #angular material #file