Angular Layout

Creating an Angular Component Library - Toaster Component

Published on

The next component we are going to create for our component library is a toaster. A toaster is essentially a component where can give the use feedback in a non disruptive way. A small message will appear on the screen with a notification message. Generally toast messages appear in one of the corners of screen. Our approach for this component will be similar to how we created a progress bar. We will use a service to push new toast messages to our toaster component.

Creating an Angular Component Library - Progress Bar Component

Published on

Another common component you might use in an application is a progress bar. There are a few types of progress bars one being the general bootstrap style. Another one that I’m starting to see more frequently is the style positioned to the top of the page with an animation spanning the full width of the page similar to YouTube. This is the type we’re going to create. A full screen demo of what we’re going to build

Creating an Angular Component Library - Alert Component

Published on

The first component we are going to create for our library is an alert component. Alerts are a common component used to notify the user that something has change or maybe an error occured or even a valididation constraint failed on a form. A full screen demo of what we’re going to build  Prerequisites Install Node Install Angular CLI Creating an Angular Component Library - Workspace Setup OR Clone this github repository  Generating Our Alert Component We will need to generate a new module along with a component in our library project.

Creating an Angular Component Library - Workspace Setup

Published on

One fairly recent feature with Angular is the ability to generate libraries with the Angular CLI. A library is essentially a group of components, directives, service, pipes, interceptors, etc that allows for maximum code reuse by installing the library in multiple applications, think DRY principles. This next post we will setup a workspace to create a reusable component library and in subsequest post we will cover creating some components for our library.

Creating an Angular Dashboard Layout - Content Grid

Published on

The next thing we need for our dashboard layout is some sort of grid that we can use to layout our pages. In the past it was common to use a CSS grid library, bootstrap probably being the most popular. Now that we have CSS Grid, building a grid with pure CSS is relatively easy. We are going to build reusable Angular grid components for our dashboard. Each grid cell will be customizable in that we will be able to specify how many columns and rows to span by using element attributes.

Creating an Angular Dashboard Layout - Theming

Published on

In the previous post we put together our dashboard layout component containing our bare layout frame. Now we are going to be putting together a couple components to use with our framing. Hopefully by the end of this post, you’ll have a good idea of how we can swap out different styled navigation bars and side panels. A full screen demo of what we’re going to build  Prerequisites Install Node Install Angular CLI Creating an Angular Dashboard Layout - Framing OR Clone this github repository  Create a Shared Module Before we start creating our components, we are going to create a shared module.

Creating an Angular Dashboard Layout - Framing

Published on

If you ever search the for a dashboard layout you’ve probably come across fully themed out templates or a large library to construct your own dashboard but what if we only wanted just a simple structure where we could provide our own themed components. Something that wouldn’t required a large library import or excessively overriding css classes. Well, that’s what we’re going to build out next. A dashboard layout usually consists of a side panel with a navigation bar and a main content section.