Simple Sliding Side Bar for your Angular Web Apps

A Series of Web Components that you can create in Angular and avoid having to import a whole library for it. In this post, I’ll be creating a simple sliding side bar for your Angular Web Apps and PWAs (Progressive Web Apps) that you can use to hide your menu options and trigger from anywhere in the app.

Let it slide, let it slide, let it slide!.

Image for post

_Dependencies: _Angular CLI

Let’s build a simple yet flexible and configurable sliding bar in Angular (usually used for navigation purposes) while at the same time we learn some important concepts about:

Creating configurable components using Angular Inputs to increase their flexibility and reusability
Simple Templating techniques for component embedding
Using services to enable highly decoupled communication between components
Using CSS in conjunction with Angular directives to create minimal-code animated transitions for your Angular Components

The Goal

We want to create a simple sliding bar that has the following capabilities:

Allow users to provide an option to either slide from the left or right
Allow users to configure the speed at which the sliding bar animates
Allow users to configure the width of the sliding bar
Allow users to configure the content of the sliding bar

Let’s start!

Creating the Project

Go ahead and create the project via the Angular CLI by using the command

ng new simple-side-nav

Select YES on adding Angular Routing and pick SCSS as your stylesheet format at the prompts provided during project creation.

I’m gonna be using a Google Font for this project so it doesn’t look so boring and also I’ll be using some Material Icons for Web (i’ll be using some icons from it) by referencing them from a CDN. Place the links below inside of the tag of the project’s index.html. We’ll show how to use them later.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<link href="https://fonts.googleapis.com/css2?family=Alata&display=swap" rel="stylesheet">

Your app’s main index.html should look like this:

<!DOCTYPE html>
	<html lang="en">
	  <head>
	    <meta charset="utf-8" />
	    <title>Angular</title>
	    <base href="/" />
	    <link
	      href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap"
	      rel="stylesheet"
	    />
	    <meta name="viewport" content="width=device-width, initial-scale=1" />
	    <link rel="icon" type="image/x-icon" href="favicon.ico" />
	  </head>

	  <body>
	    <app-root></app-root>
	  </body>
	</html>

At the root of the project, inside the src/app folder, I’ll be creating several directories for better project structure. I’ll create directories called components, models, pages and services. Your structure should look as follows (from the src root):

- src
  - app
    - components
    - pages
    - services

#services #components #angular #css

The Goal

Creating the Project

itnext.io

Simple Sliding Side Bar for your Angular Web Apps