Published onThe next component we going to look at building is a button component. Our button component will be an attribute component that provides styling to an existing HTML element. 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 Generate Our Button For our button we will need to generate a module, a component, a few different enums for configurations, and a few additional SCSS files for our stylings.
Published onAnother useful component that you might commonly see is a slide out side panel. Right now at my current position we’re using Monday for project/task management and communication. If you’ve ever used Monday, clicking on a task item will slide out a side panel from the right where all communication for that task is displayed. This has inpsired me to recreate this feature as an reusable Angular component. A full screen demo of what we’re going to build.
Published onAnother simple component we can build for our library is a overlay loader component. This is a component you might use when first loading a page or loading new data for a page and want to disable the entire screen while the page/data is loading. 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 Generate Our Overlay Loader First we will generate a new module and a component for our page loader.
Published onIn the last post we created a very basic card component. Now we’re going to expand on that card component and create a more interactive flip card. You can think of a flip card as a index/flash card where you might have some content on the front side, then can be toggled/flipped over with additional content on the back side of the card. We will make our flip card have a configuration where we can set the axis we want the card to flip around, X or Y.
Published onA card component is something that you might use quite a bit in a project. We are going to build a very basic card component that doesn’t really do anything fancy to start. It will be made up of a header, body, and footer. In subsequent post will expand on our card component and create a couple fancier forms of cards using animations. A full screen demo of what we’re going to build
Published onThe 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.
Published onAnother 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
Published onThe 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.
Published onOne 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.
Published onThe 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.