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_](https://cli.angular.io/)

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

Simple Sliding Side Bar for your Angular Web Apps

The Goal

Creating the Project

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

7 Best Vue CSS Component for Your App

Install Angular - Angular Environment Setup Process

Hire CSS Developer

Angular Sass: How To Use Sass In Angular 9 Tutorial

Audio app using Angular|REST APIs,HttpClient GET,Components,Services & ngFor|Part 3