Simple Sliding Side Bar for your Angular Web Apps

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.

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

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

Vue CSS frameworks are great for many reasons; code is more universally understood, web applications are easier to maintain, and prototyping becomes less of an extra step.

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Hire CSS Developer

Want to develop a website or re-design using CSS Development? We build a website and we implemented CSS successfully if you are planning to **[Hire CSS Developer](https://hourlydeveloper.io/hire-dedicated-css-developer/ "Hire CSS Developer")**...

Angular Sass: How To Use Sass In Angular 9 Tutorial

Sass in Angular is an extension of CSS that allows you to use things like variables, nested rules, inline imports. Angular supports Sass, CSS, and Less.

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

In this Angular 9 video tutorial, you'll learn by example how to send GET requests to REST API servers in your Angular 9 application using Angular 9 HttpClie...