DEV Community: Ria Pacheco

Quick WSN: Serve Angular App on Local Network for Responsive Device Previews

Ria Pacheco — Mon, 05 Sep 2022 18:39:21 +0000

What

Enable a live preview of your Angular application on any device on your local network, including laptops and mobile devices. This works by enabling the typical :4200 port with your devices' local network IP address (not internet).

So, what?

Useful for previewing applications on smaller device screens for responsive design; and for debugging inconsistencies rendered by different browsers on different devices and/or operating systems.

Now, what?

Get your IP Address
Run your app's port on it

Skip to Step

Find and Copy Local IP Address
Host Application on IP Address
Result

Find and Copy Local IP Address

Get your local IP address from the command line

# for Mac machines connected via ethernet
ipconfig getifaddr en0

# for Mac machines connected via router
ipconfig getifaddr en1

# for Windows machines
ipconfig

Host Application on IP Address

# Command Line
ng serve -o --host 192.16x.x.xx

-o opens in browser
--host enables address following flag to act as host [replace 192.16x.x.xx with address returned from first step's command]

Result

Any device, on the same network (ensure wifi is on) can preview application via http://192.16x.x.xx:4200

Custom Image Carousel that Manipulates Data w/ Angular Low-Level Directives, Lifecycle Methods, and Execution Workflow

Ria Pacheco — Fri, 02 Sep 2022 02:56:10 +0000

With Angular, one might build a component that leans mostly on the template's logic (e.g. using the *ngSwitch directive), while another might create the same component leaning entirely on methods from the component itself, while another might have it dominantly rely on the structure of the data it's created for.

This post walks through the creation of a custom/reusable image carousel to help anyone new to the framework see a few of the tool's best low-level features in action: in-template directives, lifecycle hook methods, and dynamic component-to-template data-binding.

It's also just useful, if you like its simplicity/flexibility, for future copy/paste logic (and avoiding broken libraries).

Skip ahead

App Creation and Dependencies
- SCSS Import
- CommonModule
- Material Icons
Setting Up the Component
- The Image Carousel Component
- Carousel Image Data Schema
- A Property for an Active Image
- Width and Height Properties
- Actual Image Data
Creating the Template
- The Dynamic Template
- Next and Previous Buttons
- Show Next Image
- Finishing Styling
Make it Reusable
- What does Reusable Even Mean?
- Prepare the Parent with Switchover Controls
- Parent Data
- Make Child Data Open to All Parent Components
- Complete the Connection
Result

App Creation and Dependencies

First, we'll create a new app with the --skip-tests flag so that anything we generate through the @angular/cli won't include test files. To keep this high-level, we'll also install my SCSS package for access to shorthand classes and colors.



# Command Line 

# 1️⃣ Create the app
ng new ng-carousel --skip-tests

# 2️⃣ Install yutes
npm install @riapacheco/yutes

SCSS Import

In your styles.scss file, add the following code:



// styles.scss

@import '~@riapacheco/yutes/main.scss';         // Reset default styles & access shorthand classes
@import '~@riapacheco/yutes/season/two.scss';   // Access colors

html {
  font-size: 10px;
  font-family: "Inter", sans-serif;
}
body {
  font-size: 1.6rem;
}

CommonModule

Don't forget to add the CommonModule so that we have access to directives.



// Add this ⤵️
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [ AppComponent ],
  imports: [
    BrowserModule,
    // ⬇️ and this
    CommonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Material Icons

We'll use Google's Material Icons by adding the following snippet within the <head> element of the index.html file:



<!--index.html-->

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>NgCarousel</title>

  <!-- Add Material Icons here ⤵️ -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

  <base href="/">
  <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>

Setting Up the Component

To make this component reusable in the most effective way possible, we first take into account the data schema it will accept and any properties that might drive or react to user controls. We consider the data schema since the directives found in templates often shape themselves around the structure that the data provides and we consider behavioral properties since they define the user's experience (and this one is pretty predictable).

The Image Carousel Component

Generate a new component by running the following command



# Command Line
ng g c components/image-carousel

Replace the content found in the app.component.html file with the new component's selector. I've added a couple classes from @riapacheco/yutes to make things a bit easier on our eyes:



<!--app.component.html-->
<div class="mx-auto-200px pt-5">
  <app-image-carousel></app-image-carousel>
</div>

The mx-auto-200px is a shorthand class from the yutes package that gives the div the width of the pixels specified (before the px) and centers it horizontally
The pt-5 is a shorthand class for padding-top: 5rem;

When you run $ ng serve in your terminal, you should see the following on http://localhost:4200:

Carousel Image Data Schema

In the component file, we'll create an exported interface that defines the properties of a single image and the types of data accepted for each of those properties.



// image-carousel.component.ts
import { Component, OnInit } from '@angular/core';

// Add this interface ⤵️
export interface ICarouselImage {
  url: string;
  caption?: string; // the `?` indicates optional data that won't return an error if missing
  alt?: string;
}

@Component({
  selector: 'app-image-carousel',
  templateUrl: './image-carousel.component.html',
  styleUrls: ['./image-carousel.component.scss']
})
export class ImageCarouselComponent implements OnInit {
  constructor() { }
  ngOnInit(): void {}
}

Note: Within the interface, the ? indicates that the property its attached to is optional and consequently won't return an error if missing from the data

A Property for an Active Image

Since image carousels focus and render only one image at a time, we'll create a property on our component that will tell our template which image to display based on its index. Since an array's index starts at 0 (not 1), we'll assign 0 to the property so it knows to render the first image when the component initializes.



// image-carousel.component.ts
// .. other code
export class ImageCarouselComponent implements OnInit {
  // ⤵️ Add this property
  activeImageIndex = 0;

  constructor() { }
  ngOnInit(): void {}
}

Width and Height Properties

Since the component will be placed in containers controlled by a parent (which impact dimensions unpredictably), we want to add properties that enable any parent to adjust the component's container and image dimensions if required. To do this, we'll add properties to the component file that can bind to the template like this:



// image-carousel.component.ts
// ... other code
export class ImageCarouselComponent implements OnInit {
  activeImageIndex = 0;
  // ⤵️ add this
  config = {
    height: 100,
    width: 100,
  };
  constructor() { }

  ngOnInit(): void {}
}

Actual Image Data

We'll add some placeholder data that a parent component will later replace. In the component file, create an images property to the type of ICarouselImage as an array (by adding a [] suffix to the type):



// image-carousel.component.ts

// ...other code

export class ImageCarouselComponent implements OnInit {
  activeImageIndex = 0;
  config = {
    height: 100,
    width: 100,
  };

  // Add this ⤵️
  images: ICarouselImage[] = [
    {
      url: 'https://zwkbcfekyorurkjubugn.supabase.co/storage/v1/object/public/bucks/watchy_faces/watchy1.png?t=2022-09-01T22%3A04%3A27.297Z',
      caption: 'Standard digital clock',
      alt: ''
    },
    {
      url: 'https://zwkbcfekyorurkjubugn.supabase.co/storage/v1/object/public/bucks/watchy_faces/watchy2.png?t=2022-09-01T22%3A06%3A12.323Z',
      caption: 'Digital clock with date, weather, and steps',
      alt: ''
    },
    {
      url: 'https://zwkbcfekyorurkjubugn.supabase.co/storage/v1/object/public/bucks/watchy_faces/watchy3.png',
      caption: 'Pokemon themed watch face',
      alt: '',
    },
    {
      url: 'https://zwkbcfekyorurkjubugn.supabase.co/storage/v1/object/public/bucks/watchy_faces/watchy5.png',
      caption: 'Tetris themed watch face',
      alt: '',
    },
    {
      url: 'https://zwkbcfekyorurkjubugn.supabase.co/storage/v1/object/public/bucks/watchy_faces/watchy6.png',
      caption: 'Paint program themed watch face',
      alt: '',
    },
    {
      url: 'https://zwkbcfekyorurkjubugn.supabase.co/storage/v1/object/public/bucks/watchy_faces/watchy7.png',
      caption: 'Sports watch themed face',
      alt: '',
    },
    {
      url: 'https://zwkbcfekyorurkjubugn.supabase.co/storage/v1/object/public/bucks/watchy_faces/watchy8.png',
      caption: 'Binary watch face',
      alt: '',
    },
    {
      url: 'https://zwkbcfekyorurkjubugn.supabase.co/storage/v1/object/public/bucks/watchy_faces/watchy9.png',
      caption: 'Fancy watch face',
      alt: '',
    },
    {
      url: 'https://zwkbcfekyorurkjubugn.supabase.co/storage/v1/object/public/bucks/watchy_faces/watchy12.jpg',
      caption: 'Cat face watch face',
      alt: '',
    },
    {
      url: 'https://zwkbcfekyorurkjubugn.supabase.co/storage/v1/object/public/bucks/watchy_faces/watchy14.png',
      caption: 'PowerShell themed watch face',
      alt: '',
    }
  ];

  constructor() { }

  ngOnInit(): void {}
}

Creating the Template

The Dynamic Template

First, add the following the component's scss file so that we have a simple outline showing us where the images should appear:



// image-carousel.component.scss
.carousel-container {
  padding: 5px;
  border: 1px solid black;
  border-radius: 3px;
}

In the template, add the following (explained below snippet):



<!--1️⃣: div wrapper -->
<div class="carousel-container"
  [style.height.%]="config.height"
  [style.width.%]="config.width">

  <!-- ---------------------------- 2️⃣: Buttons ----------------------------- -->
  <a class="carousel-btn previous">
    <i class="material-icons">chevron_left</i>
  </a>
  <a class="carousel-btn next">
    <i class="material-icons">chevron_right</i>
  </a>

  <!-- ---------------------------- 3️⃣: Wrapper ----------------------------- -->
  <div *ngFor="let image of images; let i = index;" class="carousel-wrapper">
    <!--4️⃣: ng-container -->
    <ng-container *ngIf="i == activeImageIndex">
      <!--5️⃣: image-->
      <img
        [src]="image.url" 
        [alt]="image.alt"
        [style.height.%]="config.height"
        [style.width.%]="config.width">
    </ng-container>
  </div>
</div>

What's Happening Here?

Element #	Summary
(1) `div wrapper`	- Containing `div` that applies styles we added earlier - Uses Angular's `[style]` directive to access the div's `width` and `height` - Assigns the component's `config` values to their associated properties as percentages
(2) buttons	- Add 2 buttons (utilizing `Material Icons`) to act as user controls
(3) wrapper	- The actual carousel wrapper that binds the `images` array data from the component; and - Instantiates any actions contained with `let i = index`
(4) ng-container	- Uses Angular's `ng-container`, which ensures the div is not present in the DOM unless the expression following `*ngIf` returns true - Allows only the `active` image to render by only allowing an index position equal to the position specified by the component's `activeImageIndex` property
(5) img element	- Binds the image url which was initially bounded by the `*ngFor` wrapper but narrowed down by the enclosing `ng-container`'s expression - Utilizes the same `width` and `height` properties as the component's wrapping div

Now if you serve the app locally, it should look similar to this:

Next and Previous Buttons

Though the buttons don't look too bad here, we'd like for the buttons to hover over the image so that the component is as tight (and predictable) as possible, for any parent component styles to influence.

In our component's scss file, we'll create some basic styling and some structural properties to control how the buttons are positioned in the container:



.carousel-container {
  padding: 5px;
  border: 1px solid black;
  border-radius: 3px;

  // enables and contains nested `absolute` elements
  position: relative;

  /* ------------------------- Style for BOTH buttons ------------------------- */
  a.carousel-btn {
    // Some quick styles
    color: white;
    background-color: black;
    border-radius: 2px;

    // enables control of position within the relative container
    position: absolute;

    // General width and height of buttons
    width: 3rem;
    height: 3rem;

    // Ensures the icon is centered within the button
    display: inline-flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;

    // Ensures the buttons are centered vertically with math
    top: calc(50% - (3rem / 2)); // calc({half of container height} - ({half of button height})) 

    /* ------------------------- Styles for Each Button ------------------------- */
    &.previous { left: 0; }
    &.next { right: 0; }
  }
}

If you view the served app, the buttons look pretty abnoxious.

However, first we'll make sure the buttons do as we want them to [UX] before addressing design issues [UI].

Show Next Image

Since our reusable component accepts dynamic data, in that we can have as many images as we want in the images array, we need to identify the array's length (count of images) when the component initializes so that any user control logic we implement (for "next" or "previous" buttons) have min / max thresholds to work with when it's time to reset the carousel back to the first image.

To do this, we'll declare a new property in the component called lastIndexPosition to the type of number and assign value to it when the component initializes. Don't forget to assign the length of the images array minus 1, since array data starts with 0 instead of 1.



// image-carousel.component.ts
// ... other code

export class ImageCarouselComponent implements OnInit {

  activeImageIndex = 0;
  // ⤵️ Add this property
  lastIndexPosition!: number;
  config = {
    height: 100,
    width: 100,
  };
  images: ICarouselImage[] = [
    //... other code
  ];

  ngOnInit(): void {
    // ⤵️ And this
    this.lastIndexPosition = this.images.length - 1;
  }
}

Now we can create an onNext() method that knows to update the activeImageIndex property with the next available index position, but will reset it to 0 if it's currently on the last image:



export class ImageCarouselComponent implements OnInit {
  activeImageIndex = 0;
  lastIndexPosition!: number;
  config = {...};
  images: ICarouselImage[] = [...];

  ngOnInit(): void {
    this.lastIndexPosition = this.images.length - 1;
  }

    // IF the current image is the last one in the array, reset to the first
    // ELSE add (and self-assign) 1 to the current position ⤵️
    onNext() {
    if (this.activeImageIndex >= this.lastIndexPosition) { this.activeImageIndex = 0; }
    else { this.activeImageIndex += 1; }
  }
}

For our onPrevious() control, we'll first identify if the current image is the first one in the array. If it is, it will reset to the last image in the array. Below the onNext() method, add the following:



// IF the current image is the first in the array, show the last image
// ELSE subtract (and self-assign) 1 to the current position
onPrevious() {
  if (this.activeImageIndex == 0) { this.activeImageIndex = this.lastIndexPosition; }
  else { this.activeImageIndex -= 1; }
}

Now if you add the methods to the template, you'll see that the buttons enable you to cycle through the images as you'd expect!

Finishing Styling

Remove Highlighting on Buttons

Notice how the icons themselves sometimes highlight from the click. This is because the icons are rendered as text and typically we like highlighting text so that we can copy it or select it for print. However, in cases like these, we can remove this with the following code added to the buttons:



a.carousel-btn {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

Appear Only on Hover

As we said earlier, though the buttons themselves are useful, they get in the way of the actual image we're trying to view. To fix this (I'm sure you already know this), just add an opacity property to the buttons with a value of 0 and when the overall wrapper experiences the :hover event, set the opacity to 1:



a.carousel-btn {
  opacity: 0;
}

// HOVER state
.carousel-container:hover {
  a.carousel-btn {
    opacity: 1;
    transition: 180ms ease-in-out; // threw this in for funsies
  }
}

Make It Reusable

What Does "Reusable" Mean?

In this MVVM world, there are smart components and there are dumb components. Smart component (also known as Parent components) should have all the data, talk to services if they need that data, and should gain access to any dumb component controls. Though dumb (or child) components will use decorators and emitters to be able to communicate with their parent, when generally looking at a Smart component's TypeScript file, there shouldn't be any traces of that child component's logic (with some deliberate exceptions).

For this example, our ImageCarouselComponent is the child component and our AppComponent is the parent. Though, any other component, where the <app-image-carousel></app-image-carousel> selector is placed inside, would also be considered a parent component. We're using the AppComponent here to limit the work.

Prepare the Parent with Switchover Controls

Parent Data

Since the parent AppComponent will use the same data structure, we'll add the same data from the child component to the parent (named parentImages for differentiation). In the app.component.ts file, add the following:



import { Component } from '@angular/core';
// Import interface ⤵️
import { ICarouselImage } from './components/image-carousel/image-carousel.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  // Add the data ⤵️ the same as we did to the image-carousel but with a different name for the array
  parentImages: ICarouselImage[] = [
    {
      url: 'https://zwkbcfekyorurkjubugn.supabase.co/storage/v1/object/public/bucks/watchy_faces/watchy1.png?t=2022-09-01T22%3A04%3A27.297Z',
      caption: 'Standard digital clock',
      alt: ''
    },
    {
      url: 'https://zwkbcfekyorurkjubugn.supabase.co/storage/v1/object/public/bucks/watchy_faces/watchy2.png?t=2022-09-01T22%3A06%3A12.323Z',
      caption: 'Digital clock with date, weather, and steps',
      alt: ''
    },
    {
      url: 'https://zwkbcfekyorurkjubugn.supabase.co/storage/v1/object/public/bucks/watchy_faces/watchy3.png',
      caption: 'Pokemon themed watch face',
      alt: '',
    },
    {
      url: 'https://zwkbcfekyorurkjubugn.supabase.co/storage/v1/object/public/bucks/watchy_faces/watchy5.png',
      caption: 'Tetris themed watch face',
      alt: '',
    },
    {
      url: 'https://zwkbcfekyorurkjubugn.supabase.co/storage/v1/object/public/bucks/watchy_faces/watchy6.png',
      caption: 'Paint program themed watch face',
      alt: '',
    },
    {
      url: 'https://zwkbcfekyorurkjubugn.supabase.co/storage/v1/object/public/bucks/watchy_faces/watchy7.png',
      caption: 'Sports watch themed face',
      alt: '',
    },
    {
      url: 'https://zwkbcfekyorurkjubugn.supabase.co/storage/v1/object/public/bucks/watchy_faces/watchy8.png',
      caption: 'Binary watch face',
      alt: '',
    },
    {
      url: 'https://zwkbcfekyorurkjubugn.supabase.co/storage/v1/object/public/bucks/watchy_faces/watchy9.png',
      caption: 'Fancy watch face',
      alt: '',
    },
    {
      url: 'https://zwkbcfekyorurkjubugn.supabase.co/storage/v1/object/public/bucks/watchy_faces/watchy12.jpg',
      caption: 'Cat face watch face',
      alt: '',
    },
    {
      url: 'https://zwkbcfekyorurkjubugn.supabase.co/storage/v1/object/public/bucks/watchy_faces/watchy14.png',
      caption: 'PowerShell themed watch face',
      alt: '',
    }
  ];
}

Make Child Data Open to all Parent Components

To signal to the app that parent components can access and provide data for the images property in the child component, we import the Input decorator from @angular/core and add it to the property as a prefix.



// image-carousel.component.ts
// Import decorator ⤵️
import { Component, Input, OnInit } from '@angular/core';

// other code

export class ImageCarouselComponent implements OnInit {
  // ⬇️ Prefix it here
  @Input() images: ICarouselImage[] = [ ... ];
}

Complete the Connection

To completely switchover control of this property, we bind the data from one component to the other through the selector itself. In the app.component.html file, add the following to the child component's selector:



<!--app.component.html-->
<div class="mx-auto-200px pt-5">
  <app-image-carousel
    [images]="parentImages">
  </app-image-carousel>
</div>

Any references added to an element using [] indicate a binding of data (as opposed to () which binds events)
This shows that the data from the child component (on the left side of the =) is now bound to the data in the parent component which has the same structure

Now you can remove the data inside the child component like this:



// image-carousel.component.ts
export class ImageCarouselComponent implements OnInit {
  @Input() images!: ICarouselImage[];
}

Provide the Other Inputs

Now we can do the same for the other properties like config and activeImageIndex (if you wanted to start at a different position).



// image-carousel.component.ts
export class ImageCarouselComponent implements OnInit {
  @Input() images!: ICarouselImage[];  
  @Input() activeImageIndex = 0;
  @Input() lastIndexPosition!: number;
  @Input() config = {
    height: 100,
    width: 100,
  };
}

Result

Full code found here

Searchable Data Table in Angular (NO Material) with SCSS, Useful Directives, JS methods, and Virtual Scroll

Ria Pacheco — Sun, 17 Jul 2022 00:12:00 +0000

If you've taken on the use-case of a searchable or sortable data table in Angular, that avoids the restrictive styles of @angular/material by using the cdkTable under it, you've probably pulled out your hair as much as I have in frustration.

So, here's a way to create your own data table in Angular without MatTable OR cdkTable that's searchable, gorgeous, and can be configured (in terms of both data and style adjustments) from the component itself using some of Angular's most useful lower-level features like [style] and virtual scrolling. You can also make it completely reusable by other parent components!

Here's what it will look like:

Note: you can add additional sorting capabilities by using JS' Array.sort() method; but it won't be covered here. You're likely set to figure it out easily, once you build the table outlined in this article though.

Skip Ahead

Create the App
Some Dependency Setup
- Utility Classes and Colors with @riapacheco/yutes
- Access Directives with CommonModule
JSON Data Setup
- Generate a Data Table Component
- @riapacheco/yutes classes
- Enable the Consumption of JSON Data
- Add a Mock Data File and Access it with TypeScript's resolveJsonModule
- Import to Component via File Path
Create and Structure the Table
- Populating Dynamic Cells
Responsive Structuring with SCSS
- Fancy Basic Styling
Component-Configurable Columns
- Add Flex-Basis Values to the Component
- Bind the Data with style.flex-basis
Improving Performance with Virtual Scrolling
- Virtual Scroll Viewport
Adding Search Capabilities with a Filter All Pipe
- Generate New Pipe and Apply Logic
- Add a Two-Way Bounded Input Field
Result

Create the App



# Terminal
ng new custom-table-demo --skip tests

When prompted:



# Terminal Response
? Would you like to add Angular routing? (y/N) N



# Terminal Response
? Which stylesheet format would you like to use?
  CSS
❯ SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]
  Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
  Less   [ http://lesscss.org                                             ]

Some Dependency Setup

Utility Classes and Colors with @riapacheco/yutes

To keep this post high-level, we'll borrow my @riapacheco/yutes package's utility classes (get it?) and access a seasonal stylesheet for colors only. We'll shape the table from scratch and add critical functionality without touching any other external libraries.



# Terminal
npm install @riapacheco/yutes

And in your styles.scss file, add the following:



// styles.scss
@import "~@riapacheco/yutes/main.scss"; // Strips webkit / default browser styles
@import "~@riapacheco/yutes/season/two.scss"; // Access colors

html,
body {
  background-color: $midnight-dark;
  background-image: linear-gradient(
    to bottom right,
    $gunmetal-dark,
    $midnight-dark
  );
  background-attachment: fixed; // fixes gradient to viewport
  color: $steel-regular; // font colors
}

Access Directives with CommonModule

Now we'll add the CommonModule to access directives. Add the following to your app.module.ts file:



// app.module.ts

import { AppComponent } from "./app.component";
import { BrowserModule } from "@angular/platform-browser";
// Add this ⤵️
import { CommonModule } from "@angular/common";
import { NgModule } from "@angular/core";

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    // ⤵️ and this
    CommonModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

JSON Data Setup

Generate a Data Table Component

First, let's create a separate component so that our app-root acts as a wrapper. In your terminal, run the following:



#Terminal
ng g c components/data-table

Once that's generated, replace the content in your app.component.html file with its selector and add a wrapper to make things easier on our eyes as we evolve the structure:



<!-- app.component.html -->
<div class="mx-auto-900px pt-5">
  <app-data-table></app-data-table>
</div>

@riapacheco/yutes classes

mx-auto-900px sets the width of the container to the number indicated in the class (in pixels)
- This shorthand class allows you to set a width anywhere from 1px to 3000px
pt-5 adds 5rem [rem being a multiple of your base font-size] to the top of the container

When you run ng serve this should appear in your browser:

Enable the Consumption of JSON Data

Since we want the table to handle a lot of data, we'll store some mock data in a local json file and import it into our component as though it were an external data source call.

Add a Mock Data File and Access it with TypeScript's resolveJsonModule

Create a file called data.json in your main app folder and populate it with this data (pulled from Binance's open API)
To enable the app to read the data, add "resolveJsonModule": true under compilerOptions in your tsconfig.ts file like this:



// tsconfig.json
{
  "compilerOptions": {
    // ... other options
    "resolveJsonModule": true,
    "esModuleInterop": true
  }
}

Import to Component via File Path

Now we can import the data from its file path and assign it to an initialized array called cryptocurrencies. Add the following:



// data-table.component.ts

import { Component, OnInit } from "@angular/core";
// import the file like this ⤵️
import * as data from "../../data.json";

@Component({
  selector: "app-data-table",
  templateUrl: "./data-table.component.html",
  styleUrls: ["./data-table.component.scss"],
})
export class DataTableComponent implements OnInit {
  // Assign like this ⤵️
  cryptocurrencies: any = (data as any).default;

  constructor() {}
  ngOnInit(): void {}
}

Note: this is a great way to make an "instant" blog if you ever wanted to do that

Create and Structure the Table

Now we can create the actual table, and in a way that dynamically accepts the data we just imported. First, add the following to your template:



<!--data-table.component.html-->
<!-- ----------------------------- HEADER ROW ------------------------------ -->
<tr class="table-row header">
  <th>Symbol</th>
  <th>Ask Price</th>
  <th>Count</th>
  <th>Bid Price</th>
  <th>Low Price</th>
  <th>High Price</th>
</tr>

<!-- ------------------------------ DATA ROWS ------------------------------ -->
<table>
  <tr class="table-row data">

  </tr>
</table>

Though the first header row (table-row header) isn't actually inside the the <table> element, our styling will ensure that they always align. We keep the header row outside of the table so that it doesn't scroll out of view when we restrict the container's height.

Populating Dynamic Cells

Now we can add the data dynamically for each row using Angular's *ngFor directive. Remember to ensure that the order of data types listed matches the headings we created earlier (there are 6 in total):



<!--data-table.component.html-->

<!-- ... code we added earlier -->

<!-- ------------------------------ DATA ROWS ------------------------------ -->
<table>
  <!-- ⤵️ add this -->
  <tr *ngFor="let crypto of cryptocurrencies"
    class="table-row data">
    <td>
      {{ crypto.symbol | uppercase }} <!--Angular's `uppercase` pipe-->
    </td>
    <td>
      {{ crypto.askPrice }}
    </td>
    <td>
      {{ crypto.count }}
    </td>
    <td>
      {{ crypto.bidPrice }}
    </td>
    <td>
      {{ crypto.lowPrice}}
    </td>
    <td>
      {{ crypto.highPrice}}
    </td>
  </tr>
</table>

If you run the app locally, you'll see that there's a lotta data (and it looks like a mess).

Responsive Structuring with SCSS

At first glance, we might want to structure the table by restricting cell widths in a way that uniformly aligns every header cell with those populated data cells below them.

The problem is that this restricts the width of the table overall and will prohibit it from filling the full area of whatever wrapper it's contained in.

Instead, we turn to flexbox aka my precious. In the app.component.scss file, we'll complete the following tasks:

Ensure the width of the the overall table inherits the viewport
Enable adjustments to "columns" from within the component itself

Add the following (read comments for more details):



// data-table.component.scss

@import '~@riapacheco/yutes/season/two.scss';

$column-spacing: 1rem;    // For easier updating later
table { width: 100%; }    // Expands the template's parent element

/* -------------------------- STRUCTURAL PROPERTIES ------------------------- */
// STYLES APPLIED TO BOTH TABLE-ROWS
tr {
  width: 100%;
  height: 2.5rem;         // Emphasize the header row more
  display: flex;          // Spread header row
  align-items: center;    // WITHOUT losing vertical text centering

  // Enclosed Cells
  th, td {
    cursor: pointer;
    text-align: center;

    // Solves issue of growing into parent wrappers
    flex-grow: 1;
    flex-shrink: 1;
    width: 100%;

    // How the $column-spacing var we created acts as "column" spacing: math.
    margin-left: $column-spacing / 2;
    margin-right: $column-spacing / 2;
    &:first-child { margin-left: none; }    // Removes left margin from very left column
    &:last-child { margin-right: none; }    // Removes right margin from very right column
  }
}

The table is now taking shape!

Fancy Basic Styling

Now that we got the general structure out of the way, we'll:

Differentiate the header row from the rest of the table
We'll add a background color to every other row in our data rows

Add the following to the component's stylesheet:



// data-table.component.scss

@import '~@riapacheco/yutes/season/two.scss';

$column-spacing: 1rem;    // For easier updating later
table { width: 100%; }    // Expands the template's parent element

/* -------------------------- STRUCTURAL PROPERTIES ------------------------- */
// STYLES APPLIED TO BOTH TABLE-ROWS
tr {
  // .. stuff added earlier
}

/* --------------------------- HEADER ROW STYLING --------------------------- */
.table-row.header {
  background-color: $midnight-dark;   // Adds a nice darker background
  border-radius: 6px 6px 0 0;         // Rounds the top-left and top-right corners

  // Typical header styling
  font-size: 0.8rem;                  // Smaller and
  font-weight: 500;                   // less thick font
  text-transform: uppercase;          // Uppercase and
  letter-spacing: 0.07rem;            // spaced like a subheading
  color: $soot-grey-medium;           // Subtle color
}
/* ---------------------------- DATA ROW STYLING ---------------------------- */
.table-row.data {
  &:nth-child(even) {                   // Adds BG color to every other CHILD element
    background-color: $gunmetal-dark;
  }
}

Now run your app, and check it out!

Component-Configurable Columns

If you remember from earlier, we made sure to add two values to each cell: flex-grow:1 and flex-shrink:1. This means that each cell will grow or shrink, based on any stationary elements around it.

To effectively add a width to any one (or multiple) columns, we then simply need to add a flex-basis property to it with a value that accepts pretty much any measurement from % to px to rem. (though I'd advise on %).

Add Flex-Basis Values to the Component

Again, we're going to take advantage of how Angular binds data to a component with its [style.<property>] feature.

First, let's add variables that this can bind to from the component itself (further, this is how I usually add configuration for reusable components, where there's an @Input() decorator prefixed to this object.. but that's for another time):



// data-table.component.ts

// .. other code

export class DataTableComponent implements OnInit {
  cryptocurrencies: any = (data as any).default;

  searchText = '';   

  /* ------------------------ VIRTUAL SCROLL PROPERTIES ----------------------- */
  itemSize = '2.5rem';
  viewportHeightPx = 500;


  //  ⤵️ add this
  /* ------------------------------ COLUMN WIDTHS ----------------------------- */
  config: any = {
    columnWidth: {
      _1: 'auto',
      _2: 'auto',
      _3: 'auto',
      _4: 'auto',
      _5: 'auto',
      _6: 'auto',
    }
  }

  // .. other code
}

As with any object, you can access values with .<key>. So, to access the 'auto' string we stored here, we simply need to reference it in the template as config.columnWidth._1. I personally like to use text that makes sense in plain english to help others understand what's going on right away.

Bind the Data with [style.flex-basis]

Now we can add the these values to the template and any adjustments we want to make in the future can be done by changing that config variable in the component.

Add the [style.flex-basis] directive to the template like this:



<!--data-table.component.html-->
<!-- ----------------------------- HEADER ROW ------------------------------ -->
<tr class="table-row header">
  <!-- ⤵️ add this -->
  <th [style.flex-basis]="config.columnWidth._1">Symbol</th>
  <th [style.flex-basis]="config.columnWidth._2">Ask Price</th>
  <th [style.flex-basis]="config.columnWidth._3">Count</th>
  <th [style.flex-basis]="config.columnWidth._4">Bid Price</th>
  <th [style.flex-basis]="config.columnWidth._5">Low Price</th>
  <th [style.flex-basis]="config.columnWidth._6">High Price</th>
</tr>
<!-- ------------------------------ DATA ROWS ------------------------------ -->
<table>
  <tr
    *ngFor="let crypto of cryptocurrencies"
    class="table-row data">

    <!-- ⤵️ and add this -->
    <td [style.flex-basis]="config.columnWidth._1">
      {{ crypto.symbol | uppercase }}
    </td>
    <td [style.flex-basis]="config.columnWidth._2">
      {{ crypto.askPrice }}
    </td>
    <!-- continute adding them to each column after this -->

Change the value of config.columnWidth._1 to '50%' and see what happens!

Improving Performance with Virtual Scrolling

One core tool we'll pull from Angular's CDK is is it's virtual scroll viewport. This creates a height-restricted view that only renders data that's visible in the viewport, which drastically improves performance.
Import the CDK package from Angular by running the following in your terminal:



npm install @angular/cdk

And import the ScrollingModule to your app.module.ts file (and add it to the imports array):



// app.module.ts
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { DataTableComponent } from './components/data-table/data-table.component';
import { NgModule } from '@angular/core';
// Import this ⤵️
import { ScrollingModule } from '@angular/cdk/scrolling';

@NgModule({
  declarations: [
    AppComponent,
    DataTableComponent
  ],
  imports: [
    BrowserModule,
    CommonModule,
    // ⤵️ and add this
    ScrollingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Virtual Scroll Viewport

Now we'll wrap the table-row data element with the <cdk-virtual-scroll-viewport> selector. For this to properly render, we add an [itemSize] value to the selector itself and specify a restricted height.

The itemSize represents what height the feature should expect of each row
To specify height, we can use Angular's handy [style] directive. Both of these can bind values directly from the component. First, let's add those values to the component itself:



// data-table.component.ts

// ... other code

export class DataTableComponent implements OnInit {
  cryptocurrencies: any = (data as any).default;

  /* ------------------------ VIRTUAL SCROLL PROPERTIES ----------------------- */
  itemSize = '2.5rem';        // Can accept pixels and ems too
  viewportHeightPx = 500;

  constructor() { }

  ngOnInit(): void {
  }

}

And apply them to the wrapping selector in the template:



<!-- ------------------------------ DATA ROWS ------------------------------ -->
<table>

  <!-- ⤵️ Add the viewport here with our bounded elements -->
  <cdk-virtual-scroll-viewport 
    [itemSize]="itemSize" 
    [style.height]="viewportHeightPx + 'px' ">

    <tr
      *ngFor="let crypto of cryptocurrencies"
      class="table-row data">

      <!-- ... cell code -->

    </tr>
  </cdk-virtual-scroll-viewport>
</table>

And to tell viewport what data it's reading, we'll replace our *ngFor="let crypto of cryptocurrencies" with *cdkVirtualFor="let crypto of cryptocurrencies". Now when running the app, we know that it only renders what's been scrolled into the viewport!

Adding Search Capabilities with a Filter All Pipe

You're likely familiar with Angular's pipe feature. If not, it's a handy way to transform data directly within template expressions. As an example, when we grabbed the symbol values from our data source earlier, we added | uppercase so that every instance it rendered ({{ crypto.symbol | uppercase }}) the string would be capitalized. However, we can also build our own, which is how we're going to add search capabilities to our table. Read more about pipes in Angular's official documentation.

Generate New Pipe and Apply Logic

To start, run the following in your terminal to generate a new pipe:



#Terminal
ng generate pipe pipes/filter-all

This generates a new pipes folder that contains a filter-all.pipe.ts file. In that file, add the following:



// filter-all.pipe.ts

// ... other code

export class FilterAllPipe implements PipeTransform {

  transform(value: any, searchText: any): any {
    if (!searchText) { return value; }
    return value.filter((data: any) => this.matchValue(data, searchText));
  }

  matchValue(data: any, value: any) {
    return Object.keys(data).map((key) => {
      return new RegExp(value, 'gi').test(data[key]);
    }).some(result => result);
  }
}

There's a lot going on here, but basically it accepts a value of any kind (our data) and searchText for us to apply to that data with a filter(). The filter calls a matchValue() function that returns the data we need by mapping through its Object.keys(), returning an instantiated regular expression which tests to see if the match we're looking for exists with .some(). To understand this more (in case I butchered it), ask the guy who posted this snippet on Stack Overflow: Daniel Caldera ;) [big shoutout!]

Now we can add this to our *cdkVirtualFor directive's expression like this:



<!--data-table.component.html-->
<!-- ... other code from earlier -->
<!-- ------------------------------ DATA ROWS ------------------------------ -->
<table>
  <cdk-virtual-scroll-viewport [itemSize]="itemSize" [style.height]="viewportHeightPx + 'px' ">
    <tr
      *cdkVirtualFor="let crypto of cryptocurrencies | filterAll:searchText"
      class="table-row data">
      <td>

<!-- more code down here -->

And add an empty string value to the searchText variable inside the component like this:



// data-table.component.ts

// ... other code
export class DataTableComponent implements OnInit {
  cryptocurrencies: any = (data as any).default;

  searchText = '';    // ⬅️ filterAll pipe

// ... more code

To test if this works, populate the searchText variable with a value that exists in the dataset, and it should return that value only. Try out searchText = 'BNBBTC'; and see what renders when you run your app locally.

Add a Two-Way Bounded Input Field

Instead of manually assigning values to searchText through the component itself. We can two-way bind an input field with Angular's [(ngModel)] feature. This creates a 2-way door that both accepts values from the template [.html file] to the component [.ts file] and pushes the value it receives back to the template simultaneously. To enable this feature, add the FormsModule to your app.module.ts file like this:



// app.module.ts

// Import this module ⤵️ 
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    // .. other declarations
  ],
  imports: [
    BrowserModule,
    CommonModule,
    ScrollingModule,
    // ⤵️  add this
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

We'll add some quick styling by adding the following to the bottom of the data-table.component.scss stylesheet:



// data-table.component.scss

// ... everything we added earlier

/* -------------------------------- CONTROLS -------------------------------- */
// SEARCH FIELD
.form-group {
  max-width: 180px;                   // overrides @riapacheco/yutes width (designed to fill any wrapper with width: 100%)
  margin-bottom: 1rem;
}
.search-input {                       // matches the style to our view
  background-color: $midnight-dark;
  color: $steel-regular;
  border-radius: 30px;
  padding-left: 1.5rem;
}
.search-input::placeholder {          // changes color of placeholder text
  color: $soot-grey-dark;
}

Now you can add the new input field above the table like this:



<!--data-table.component.html-->

<!-- ⤵️  add Search field-->

<div class="form-group">

  <!--Notice the new [(ngModel)] that references the searchText variable-->

  <input

    [(ngModel)]="searchText"

    placeholder="Search"

    class="search-input"

    type="text">

</div>

<!-- ----------------------------- HEADER ROW ------------------------------ -->

<tr class="table-row header">

Result

And here it is. You've created your own resizeable data-table (that can handle rendering a lot of data) with a searchable input field and configurable columns!

Take it a step further and have any parent access and use this child component by learning about it here.

Full code here.

Make Pretty / User-Friendly Charts with Angular 14 & ng2-charts v3.1.0

Ria Pacheco — Fri, 01 Jul 2022 03:45:47 +0000

In this post, we'll create a line chart (in Angular 14 with the latest release of ng2-charts) in a style that's all the rage in cryptocurrency dashboard design (RIP) and optimized for user interaction.

Here's how it will behave:

Skip Ahead

Create App and Dependencies
- Generate new Angular app
- Import CommonModule
- Install SCSS Utility and Charts Package
- Imports
Create Line Chart Component
Add a Chart Wrapper
Feed and Strip Default Chart Styles
- Add the Data
- Strip the Chart
- Show Data with Labels
Style the Chart for Optimized User Interaction
Make it Pretty
- Line and Point Styling
- Tooltip Styling
Result

*** Full code here ***

Create App and Dependencies

Generate new Angular App



# terminal
ng new chart-demo --skip-tests

When prompted:



# terminal
? Would you like to add Angular routing? n
? Which stylesheet format would you like to use?
  CSS
> SCSS
  Sass
  Less

Import CommonModule

This module allows us to access and configure directives



// app.module.ts
import { CommonModule } from '@angular/common';

imports: [
  ...
  CommonModule
]

Install SCSS Utility and Charts Package

Note: To keep this post as high-level as we can (especially with a robust, enterprise-level framework like Angular) we'll install my @riapacheco/yutes SCSS package for its utility configurations and classes. However, we'll visually style the component from scratch.



# terminal 
npm install @riapacheco/yutes ng2-charts

@riapacheco/yutes

Strips webkit styles
Adds antialiasing / smoothing
Can access secret stylesheet that has "seasonal" colors I like. View colors here (actual variables replace the -- with $): Click Me

ng2-charts

The package that gives us charts (from chart.js)

Imports

Import the scss package into the main styles.scss file and add the following global styles (since I clearly have a thing for dark mode):



// styles.scss
@import '~@riapacheco/yutes/main.scss'; // For stripping styles & antialiasing
@import '~@riapacheco/yutes/seasonal.scss'; // To access dark color palette

html, body {
  font-size: 17px;
  background-color: $midnight-dark;
  background-image: linear-gradient(to bottom right, $midnight-dark, $midnight-medium);
  background-attachment: fixed; // The background is fixed relative to the viewport
  color: $steel-regular; // Change text color to an _almost_ white
}

Add NgChartsModule into app.module.ts



// app.module.ts
import { NgChartsModule } from 'ng2-charts';

imports: [
  ...
  NgChartsModule
]

Create Line Chart Component

Create a line-chart component [Figure 1] and replace the default content inside your app.component.html file with its selector (and some other stuff) [Figure 2]:
Figure 1



# terminal
ng g c components/line-chart

Figure 2



<!--app.component.html-->

<div class="mx-auto-320px pt-3">
  <h6>
    Financial Highlights
  </h6>
  <h1>
    BWX Technologies
  </h1>

  <hr class="mb-2">
  <app-line-chart></app-line-chart>
</div>

Yutes' Shorthand SCSS Classes

mx-auto-320px sets the width of the div to 320px and centers it horizontally (you can replace the 320 value with any # from 1 to 3000)
pt-3 adds 3rem of padding to the top of the div
mb-2 adds 2rem of margin to the bottom of the hr element

Now your locally served app [ng serve in your terminal] should look like this (exciting):

(“Inter” is one of the best fonts of all time)

Add a Chart Wrapper

In the line-chart component, we're going to create a wrapper that will:

Bound the chart to a container that has a restricted width and height
Add a colorful background

Add this to the template:



<!-- line-chart.component.html -->
<div class="chart-wrapper">
  <canvas></canvas>
</div>

Add the following to its stylesheet:



// line-chart.component.scss
@import '~@riapacheco/yutes/seasonal.scss'; // get those colors again

$width: 320px;
$height: 250px;

.chart-wrapper {
  width: $width;
  min-width: $width;
  max-width: $width;
  height: $height;
  min-height: $height;
  max-height: $height;
  color: $midnight-dark;
  border-radius: 10px;
  background-image: linear-gradient(to bottom right, $bondi-dark, $bondi-light);
  background-attachment: fixed;
}

Add and Bind the Chart

Now we can add the ng2-chart element to the app by importing a few types and adding their corresponding properties:



// line-chart.component.ts

// ⤵️ import these
import { ChartDataset, ChartOptions } from 'chart.js';
import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-line-chart',
  templateUrl: './line-chart.component.html',
  styleUrls: ['./line-chart.component.scss']
})
export class LineChartComponent implements OnInit {
  // ⤵️ add them here
  chartData: ChartDataset[] = [];
  chartLabels: string[] = [];
  chartOptions: ChartOptions = {};

  constructor() { }

  ngOnInit(): void {
  }
}

And the following to the line-chart.component.html file:



<div class="chart-wrapper">
  <canvas baseChart
          [type]="'line'"
    [datasets]="chartData"
    [labels]="chartLabels"
    [options]="chartOptions"
    >
  </canvas>
</div>

baseChart and [type]="'line'" recognizes the package and specifies the chart type
The remaining directives (applied to the selector) are how we bind the data from the component. Our component's data being the properties on the right (without []) bound to the properties from the package on the left.

Feed and Strip Default Chart Styles

For our example (which is taken from publicly accessible financials), the chart will display how much revenue BWX Technologies generated each year from 2016 to 2021.

Add the Data

First, we'll add a label to describe what the chart's values represent ($ in millions) followed by a data array containing those revenues for each year [6 total].

Add the following to the component:



// line-chart.component.ts
// more code
export class LineChartComponent implements OnInit {
  chartData: ChartDataset[] = [
    {
      // ⤵️ Add these
      label: '$ in millions',
      data: [ 1551, 1688, 1800, 1895, 2124, 2124 ]
    }
  ];
  chartLabels: string[] = [];
  chartOptions: ChartOptions = {};

  // other code
}

The app should look like this:

Strip the Chart

We'll remove the main label we created and the graph's Y-axis labels (as well as any grid lines making up the chart). Users will be able to find these when hovering over the line graph later.

To remove the above styles, we access the chartOptions object and set values for the following properties:

responsive Enables the chart to grow to fill any container it's enclosed in
scales Allows us to remove the lines and hidden ticks in the chart
plugins To hide the main label we created

Add the following to the chartOptions object:



// line-chart.component.ts

// more code

export class LineChartComponent implements OnInit {
  chartData: ChartDataset[] = [
        // code we added earlier
  ];
  chartLabels: string[] = [];

  chartOptions: ChartOptions = {

    // ⤵️ Fill the wrapper
    responsive: true,
    maintainAspectRatio: false,

    // ⤵️ Remove the grids
    scales: {
      xAxis: {
        display: false,
        grid: {
          drawBorder: false // removes random border at bottom
        }
      },
      yAxis: {
        display: false
      }
    },

    // ⤵️ Remove the main legend
    plugins: {
      legend: {
        display: false
      }
    }
  };

Now the chart should look empty like this:

Show Data with Labels

To reveal the actual line, add labels like this:



// line-chart.component.ts

// more code

export class LineChartComponent implements OnInit {
    // stuff we added earlier

  // Add this ⤵️ 
  chartLabels: string[] = [ '2016 Revenue', '2017 Revenue', '2018 Revenue', '2019 Revenue', '2020 Revenue', '2021 Revenue' ];

  // more code
}

Now it should look like this:

Style the Chart for Optimized User Interaction

If you hover your cursor over any of the points on the line, it'll reveal a tooltip which includes:

The year that each point represents
The main label we removed from the top of the chart earlier; and
A color label (which isn't really relevant with a single line'd line chart)

Notice how the cursor has to tightly hover over each point's 1 or 2 pixel radius. For an improved user experience, we can expand the radius that detects the hover event and increase the width of the targeted point during the event so the user understands which data point is in focus.

To do this, add the following to the chartData array:



// line-chart.component.ts

// more code 

export class LineChartComponent implements OnInit {
  chartData: ChartDataset[] = [
    {
      label: '$ in millions',
      data: [1551, 1688, 1800, 1895, 2124, 2124],

      // ⤵️ Add these
      pointHitRadius: 15, // expands the hover 'detection' area
      pointHoverRadius: 8, // grows the point when hovered
    }
  ];

  // other code
}

Now it's much easier to navigate and understand:

Make it Pretty

Line and Point Styling

To configure colors, add the following to the chartData array. Read the comments to understand how each value impacts style:



// line-chart.component.ts

// more code

export class LineChartComponent implements OnInit {
  chartData: ChartDataset[] = [
    {
      label: '$ in millions',
      data: [1551, 1688, 1800, 1895, 2124, 2124],

      pointHitRadius: 15, // expands the hover 'detection' area
      pointHoverRadius: 8, // grows the point when hovered

      // ⤵️ Add these
      pointRadius: 2,
      borderColor: '#2D2F33', // main line color aka $midnight-medium from @riapacheco/yutes/seasonal.scss
      pointBackgroundColor: '#2D2F33',
      pointHoverBackgroundColor: '#2D2F33',
      borderWidth: 2, // main line width
      hoverBorderWidth: 0, // borders on points
      pointBorderWidth: 0, // removes POINT borders
      tension: 0.3, // makes line more squiggly
    }
  ];

  // more code
}

Tooltip Styling

To configure the actual tooltip, add the following to the chartOptions.plugins object:



// line-chart.component.ts

// more code

export class LineChartComponent implements OnInit {

  // more code

  chartOptions: ChartOptions = {

    // other code

    plugins: {
      legend: {
        display: false
      },

      tooltip: {
        // ⤵️ tooltip main styles
        backgroundColor: 'white',
        displayColors: false, // removes unnecessary legend
        padding: 10,

        // ⤵️ title
        titleColor: '#2D2F33',
        titleFont: {
          size: 18
        },

        // ⤵️ body
        bodyColor: '#2D2F33',
        bodyFont: {
          size: 13
        }
      }
    }
  };
}

Result

And here you have it! Though crypto is collapsing, lots of related dashboard UI designs love mini top-line indicator charts like this (and still look great despite such poor market performance).

*** Full code here ***

Custom Tooltip Component using Angular's Style Directive and Coordinates from Web APIs MouseEvent

Ria Pacheco — Sat, 18 Jun 2022 04:08:21 +0000

In this article, we will create a tooltip component that reflects data fed from a parent component and appears next to the cursor when hovering over a target element.

Fork the repo

Execution Workflow

Create an app and add dependencies for quick styling
Create a list view (parent) component for data the tooltip will read
Create the actual tooltip component with basic styles
Provide a way for the tooltip to consume coordinates
Pull coordinates from the parent component
Pull data from the parent component
Show data on hover
Add conditions for the tooltip and for an ellipsis

Skip Ahead

Create App and Add Dependencies
- Install SCSS Package
- Import CommonModule
Create a List View Component
- Add Data
- Add Structure
- Bind the Data
- Narrow the Container
Create the Tooltip Component
- Add Properties and Styles
- Bind the Data Again
Feeding the Tooltip the Right Coordinates
- MouseEvent Properties Explainer
- Angular's Style Directive
Capturing Coordinates from Parent Component
- Bind to the Parent
- onHover Method
Conditional Tooltip Trigger and Ellipsis
- Ellipsis with Slice Pipe
- Add an Ellipsis with a Conditional Span
- Make the Tooltip Conditional
Result

Create App and Add Dependencies

Assuming you have npm and @angular/cli installed, create a new app by running the following command in your terminal:



ng new global-tooltip --skip-tests

The --skip-tests flag stops @angular/cli from generating test files
Reply N, when prompted with Would you like to add Angular routing?
Select SCSS when prompted with Which stylesheet format would you like to use? so we can use an SCSS package.

Install SCSS Package

To keep this article high-level, we'll install @riapacheco/yutes to use its shorthand utility classes for quicker setup. Install from your terminal:



npm install @riapacheco/yutes

Don't forget to add this to your main styles.scss file:



// styles.scss
@import '~@riapacheco/yutes/main.scss';

Read @riapacheco/yutes documentation on NPM

Import CommonModule

Add the following import to your app.module.ts:



import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
// Add this ⤵️
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    // and ⤵️
    CommonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Create a List View Component

Create a new List View component by running the following in your terminal:



ng g c views/list-view

Replace the default content found in the app.component.html file with the new component's selector like this:



<!--app.component.html-->
<app-list-view></app-list-view>

Add Data

In the list-view.component.ts file, add the following reactors array so that we have data to work with:



// ... other code

export class ListViewComponent implements OnInit {
  // Add this ⤵️
  reactors = [
    { name: 'Pressurized Water Reactor (PWR)' },
    { name: 'Boiling Water Reactor (BWR)' },
    { name: 'Advanced Gas-Cooled Reactor (AGR)' },
    { name: 'Light Water Graphite-Moderated Reactor (LWGR)' },
    { name: 'Fast Neutron Reactor (FNR)' },
    { name: 'Operable Nuclear Power Plants' }
  ];

  constructor() { }

  ngOnInit(): void { }

}

Add Structure

We want to create a container that will display our data in a list. We'll then make this container narrow enough to cut off the listed text within it.

Add the following code to the list-view.component.html file:



<div class="mx-auto-850px pt-3">
  <ul class="list-unstyled">
    <li>
      <h2>
        This is a listed item
      </h2>
    </li>
  </ul>
</div>

The classes used here are from the @riapacheco/yutes package:

mx-auto-850px creates an 850px-wide wrapping container that's centered horizontally
pt-3 adds 3rem of padding to the top of the element
list-unstyled strips the default browser styling from the unordered list (<ul></ul>)
Learn more from @riapacheco/yutes docs on NPM

Bind the Data

Now we can bind the data so that the template will render a list item (<li></li>) for each of the items found in the reactors array we created earlier. We do this by employing Angular's *ngFor directive:



<!--list-view.component.html-->
<div class="mx-auto-850px pt-3">
  <ul class="list-unstyled">
    <li *ngFor="let reactor of reactors">
      <h2>
        {{ reactor.name }}
      </h2>
    </li>
  </ul>
</div>

Now if you run ng serve in your terminal, you'll see this in the local app:

Narrow the Container

To make it so we can cut the text off (and be able to see where it's cut off) add the following to your list-view.component.scss file:



ul {
  width: 280px;
  max-width: 280px;
  border: 1px solid #00000030;
  padding-left: 1rem;

  li {
    white-space: nowrap;
    overflow: hidden;
  }
}

Now your local app should look like this:

Create the Tooltip Component

Now that we have something to read, we can create the tooltip component by running the following command in the terminal:



ng g c components/tooltip

Now add the new component's selector to the top of the list-view.component.html.



<!--list-view.component.html-->
<app-tooltip></app-tooltip>

<div class="mx-auto-850px pt-3">
  <ul class="list-unstyled">
    <li *ngFor="let reactor of reactors">
      <h2>
        {{ reactor.name }}
      </h2>
    </li>
  </ul>
</div>

Add Properties and Styles

First we'll add a property that tells us if the tooltip should show up or not and another one to bind some default text when it's not reading from a different source. Add the following to the tooltip.component.ts file:



// more code
export class TooltipComponent implements OnInit {

  showsTooltip = true;
  tooltipText = 'Default tooltip text';

  constructor() {}
  ngOnInit(): void {}
}

And since we want to share these properties with other parent components, we'll prefix both properties with the @Input() decorator that we'll import from Angular's core package:



// import here ⤵️
import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-tooltip',
  templateUrl: './tooltip.component.html',
  styleUrls: ['./tooltip.component.scss']
})
export class TooltipComponent implements OnInit {
  // ⤵️ Prefix here
  @Input() showsTooltip = true;
  @Input() tooltipText = 'Default tooltip text';

  constructor() { }

  ngOnInit(): void {
  }
}

Bind the Data Again

We'll bind the text to a div (that's assigned the class tooltip) and wrap that div in an ng-container that conditionally appears based on our showsTooltip boolean so that there's no chance for the element to show up in the DOM:



<ng-container *ngIf="showsTooltip">
  <div class="tooltip">
    {{ tooltipText }}
  </div>
</ng-container>

To effectively see if the tooltip is visible or not, we'll add styles to the tooltip class in the tooltip.component.scss file:



.tooltip {
  position: absolute; // enables it to appear where we want it later
  font-size: 14px;
  line-height: 14px;
  padding: 5px 10px;
  background-color: #00000099;
  color: white;
  border-radius: 3px;
  display: inline-block;
  box-shadow: 4px 6px 12px #00000020;
}

Now your local app should look like this:

Feeding the Tooltip the Right Coordinates

MouseEvent Properties Explainer

Since we want the tooltip to appear next to our cursor when it hovers over a listed item, we need to isolate exactly where our cursor is when it does. Since the mouse event (web API) can identify where it is along the viewport's X and Y axis, this is how we'll position our tooltip! (more on this in a bit)

Angular's Style Directive

After we successfully capture those coordinates, we'll need to feed them to the component so that it adjusts itself to that location. Angular's style directive allows you to target a specific attribute on an element (e.g. color) and populate its values with bounded data.

The syntax encloses style.<property> in square brackets, followed by the value to be applied to that property.

As an example:



<div [style.color]="'red'">
  This text is red
</div>

Though I used a string ['red'] to populate the above property, it can be replaced with values pulled directly from the component file.

Let's create two properties to represent the values to be binded to our tooltip's top and left values (with some random coordinates to confirm that it works):



// tooltip.component.ts
export class TooltipComponent implements OnInit {
  @Input() showsTooltip = true;
  @Input() tooltipText = 'Default tooltip text';
  // Add these ⤵️
  @Input() topPosition = 215;
  @Input() leftPosition = 400;

  constructor() { }

  ngOnInit(): void { }
}

Now bind these to the tooltip in the tooltip.component.html file:



<ng-container *ngIf="showsTooltip">
  <div
    class="tooltip"
    [style.top]="topPosition + 'px'"
    [style.left]="leftPosition + 'px'"
    >
    {{ tooltipText }}
  </div>
</ng-container>

This should move the tooltip to the location we specified:

Capturing Coordinates from Parent Component

Now that the tooltip can consume location coordinates and has @Input() prefixed to each of its behavior-driving properties, we can now reflect data from the parent component.

In the list-view.component.ts file, create properties with the same labels like so:



export class ListViewComponent implements OnInit {
  reactors = [
        // more code
  ];

  // Add these ⤵️
  showsTooltip = false;
  tooltipText = 'This is default parent component text';
  topPosition: any;
  leftPosition: any;

  constructor() { }

  ngOnInit(): void { }
}

Bind to the Parent

To hook these values up, bind the data from the tooltip's selector:



<app-tooltip
  [showsTooltip]="showsTooltip"
  [tooltipText]="tooltipText"
  [topPosition]="topPosition"
  [leftPosition]="leftPosition">
</app-tooltip>

<!-- more code -->

onHover Method

We want the text string that appears in the tooltip to reflect the item that we're hovering over. Add a (mouseover) event to the listed item in the template and have it trigger a method that takes in that listed item's name and the event itself. Additionally, add a (mouse out) event to hide the tooltip when the cursor leaves the element (it will not take in any arguments):



<!-- tooltip.component.html -->

<!-- more code -->

<div class="mx-auto-850px pt-3">
  <ul class="list-unstyled">

    <!-- Add this ⤵️ -->
    <li
      *ngFor="let reactor of reactors"
      (mouseover)="onHover(reactor.name, $event)"
      (mouseout)="onMouseout()"
      >
      <h2>
        {{ reactor.name }}
      </h2>
    </li>
  </ul>
</div>

Now we'll create these methods in the template itself



// tooltip.component.ts file
export class ListViewComponent implements OnInit {

  // ... more code

  constructor() { }

  ngOnInit(): void { }

  // Methods here ⤵️
  onHover(tooltipText: string, e: MouseEvent) {
    this.showsTooltip = true;
    this.tooltipText = tooltipText;
    this.topPosition = e.clientY;
    this.leftPosition = e.clientX;
  }
  onMouseout() {
    this.showsTooltip = false;
    this.tooltipText = '';
    this.topPosition = null;
    this.leftPosition = null;
  }
}

This is what it should look like (hooray!):

Conditional Tooltip Trigger and Ellipsis

Now that we have a tooltip, we want to trigger the tooltip only when necessary. In this case, it should only appear if the content is cut off from the width of the container.

Ellipsis with Slice Pipe

Angular's slice pipe allows you to specify characters found in a concatenated template string as though they're items in an array. You follow the | slice: syntax with a number that indicates the first array item's (character's) position, followed by the count of characters that should be displayed.



<!-- more code -->

<div class="mx-auto-850px pt-3">
  <ul class="list-unstyled">
    <li
      *ngFor="let reactor of reactors"
      (mouseover)="onHover(reactor.name, $event)"
      (mouseout)="onMouseout()"
      >
      <h2>
        <!-- here's the slice pipe -->
        {{ reactor.name | slice: 0:17 }}
      </h2>
    </li>
  </ul>
</div>

Now notice how it renders in the view:

Add an Ellipsis with a Conditional Span

We can create an ellipsis to immediately follow every listed item that contains an ellipsis. However, since we only want those visually cut-off items to show it, we can add *ngIf to the span itself, and specify the number of characters that would qualify it to appear:



<!-- more code -->
<div class="mx-auto-850px pt-3">
  <ul class="list-unstyled">
    <li
      *ngFor="let reactor of reactors"
      (mouseover)="onHover(reactor.name, $event)"
      (mouseout)="onMouseout()"
      >
      <h2>
        <!-- Access character count with `.length` -->
        {{ reactor.name | slice: 0:17 }}<span *ngIf="reactor.name.length >= 17">...</span>
      </h2>
    </li>
  </ul>
</div>

Here's the result (I added a "Short Title" for easier differentiation):

Make the Tooltip Conditional

Since there wouldn't really be a point to showing a Tooltip on a fully displayed (shorter) title, we can add the same condition we applied to the span, but to the mouseover event.



<!-- tooltip.component.html -->
<div class="mx-auto-850px pt-3">
  <ul class="list-unstyled">
    <li
      *ngFor="let reactor of reactors"
      (mouseover)="reactor.name.length >= 17 ? onHover(reactor.name, $event) : ''"
      (mouseout)="onMouseout()"
      >
      <h2>
        {{ reactor.name | slice: 0:17 }}<span *ngIf="reactor.name.length >= 17">...</span>
      </h2>
    </li>
  </ul>
</div>

Notice that the (mouseover) event is now defined with a ternary operator, which tells us: IF the character length of this item's name is greater or equal to 17, THEN trigger the onHover(...) method; else do nothing.

Result

Now when you hover over any item that's cut off (has an ellipsis), the tooltip will trigger and reflect the items full text. If you hover over the item that isn't, it won't do a damn thing.

Back to "Skip Ahead" list
Fork the repo

Trigger Event when Element Scrolled into Viewport with Angular's @HostListener

Ria Pacheco — Fri, 03 Jun 2022 21:30:33 +0000

In this post, we'll listen for DOM events using Angular's @HostListener so that we can trigger actions when an element scrolls completely into view (and reverse them once the element begins scrolling out of view).

Full code is available here

Handy Use-Cases for this Approach

Trigger animations while users scroll down a page (all the rage in SaaS)
Confirm if sections of a view have been "read" by a visitor
Qualify some other logic first before having sensitive information appear

Core Concepts in this Article

Shortcuts in VSCode
SCSS quick tips (in comments)
Implications of ng-container element
The ViewChild decorator for anchored element IDs
Event listening with HostListener, ElementRef, and ViewChild
How X and Y coordinates work in the viewport
JavaScript's getBoundingClientRect() method

Skip Ahead

Create the App
Add Dependencies
- CommonModule
- Material Icons
Scrollable Elements
- Styling with SCSS
- Adding Conditional Icons
- NG-Containers and Anchored IDs
- Accessing Elements from the Component
Listening to the Event and Capturing Viewport Coordinates
- Skippable Explainer: Viewport Coordinates and BoundingRect
Recognizing the Elements to Fire Event
- Getting the ElementRect from the DOM
End Result

Create the App

Start with a new angular app (without generating test files) by running the following command in your terminal followed by the flag included here:



$ ng new viewport-scroll-demo --skip-tests

Add Dependencies

CommonModule

Add the CommonModule from angular's core package to ensure that we can manipulate the DOM with angular's core directives.



// app.module.ts

import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

// ⤵️ Add this
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    // ⤵️ and this
    CommonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Material Icons

We'll be adding an icon to an element that will appear and disappear, depending on if it's inside the viewport or not. Add the following to your index.html file within its <head> section:



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

Now we're able to add icons, using Google's Material Icons Library with the following syntax:

Add a .material-icons class to an <i> element
Specify the icon with the string that the element is wrapped around



<i class="material-icons">search</i>

Scrollable Elements

To help us visually understand where we are in a view, let's add elements of different colors.

Remove the placeholder content inside the app.component.html.
Add div elements with different classes. I created 10 elements with the first having a .one class, the second having a .two class, and so on.
We differentiate with classes so that we can add different styles to better recognize when elements scroll into and out of view

If you're using VSCode, you can quickly do this by typing out the class with its prefix . in the template and pressing TAB on your keyboard

Styling with SCSS

Add the following SCSS. Remember that we'll be adding icons so this is why there are references to classes that do not yet exist in the template:

Note: I added descriptive comments since I realize I tend to overlook the power of SCSS in my posts



// app.component.scss

:host {
  // Ensures the host itself stacks the elements in a column
  width: 100vw; // Enables a narrow centering [line 11]
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: flex-start;
}

div {
  // Center narrow content
  width: 320px;
  min-height: 100px;
  margin: auto;

  // Space between elements
  // Notice that I don't use `margin:` as this would override the above `margin: auto`
  margin-top: 5rem;
  margin-bottom: 5rem;

  // Use Flexbox to center enclosed elements (icons)
  display: inline-flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;

  border-radius: 18px; // Pretty corners
  i { font-size: 30px; } // Resizes the Icons

  // Gradual "Color" Change via Opacity
  &.one { background-color: #00000010; }
  &.two { background-color: #00000020; }
  &.three { background-color: #00000030; }
  &.four { background-color: #00000040; }
  &.five { background-color: #00000050; }
  &.six { background-color: #00000060; }
  // IF adding icons, icons should be white for visible contrast
  &.seven { background-color: #00000070; color: white; }
  &.eight { background-color: #00000080; color: white;}
  &.nine { background-color: #00000090; color: white; }
  &.ten { background-color: #000000; color: white; }
}

Now if you run $ ng serve in your terminal (to serve the app locally), this is what you'll find on localhost:4200:

Adding Conditional Icons

In the component file, add two properties to drive the behavior for 2 elements in the template. Since my example uses the web and public icons, I've created the following properties:



// app.component.ts

// ...

export class AppComponent {
  showsWebIcon = false;
  showsPublicIcon = false;
}

NG-Containers and Anchored IDs

Inside the template:

Add two ng-container elements inside the 5th and 8th elements we created earlier
- We use the ng-container instead of tacking the *ngIf directive onto the div since this ensures that whatever is enclosed will not appear in the DOM.
Enclose two different material icons inside those elements
Add an *ngIf directive that toggles the appearance of the ng-container based on the corresponding properties we created above
Add an anchored reference to the 5th and 8th enclosing divs called #five and #eight so that we can access them from the component



<!--app.component.html-->

<!-- more code ... -->

<div class="five" #five> <!-- ⬅️ New ID: `#five` -->
  <!-- ⤵️ Conditional ng-container with `*ngIf` directive -->
  <ng-container *ngIf="showsWebIcon">
    <i class="material-icons">
      web
    </i>
  </ng-container>
</div>

<!-- more code ... -->

<div class="eight" #eight> <!-- ⬅️ New ID: `#eight` -->
  <!-- ⤵️ Conditional ng-container with `*ngIf` directive -->
  <ng-container *ngIf="showsPublicIcon">
    <i class="material-icons">
      public
    </i>
  </ng-container>
</div>

<!-- more code ... -->

Accessing Elements from the Component

In order for the HostListener to recognize elements from the DOM, we have to access the elements inside the component and initialize them as references with ElementRef. We can use Angular's @ViewChild feature to do this:

Import ViewChild from Angular's core package
Create a label with a @ViewChild prefix decorator that accepts the template's ID as a string
- Ensure that the type is specified to ElementRef which is also imported from Angular's core package



// app.component.ts

// ⤵️ Import ViewChild here
import { Component, ElementRef, ViewChild } from '@angular/core';

// ...

export class AppComponent {
  showsWebIcon = false;
  showsPublicIcon = false;

  // ⤵️ Access through ViewChild like this
  @ViewChild('five') divFive!: ElementRef;
  @ViewChild('eight') divEight!: ElementRef;
}

Listening to the Event and Capturing Viewport Coordinates

In the app.component.ts file, import HostListener from the core package
Create a public onViewScroll() method prefixed with the @HostListener decorator; which takes in the event it's listening for, and an argument that specifies an event



// app.component.ts

// ⤵️ Import HostListener
import { Component, ElementRef, HostListener, ViewChild } from '@angular/core';

// ... more code

export class AppComponent {
  // ... more code

  // ⤵️ Add the HostListener decorator and onViewportScroll() method
  @HostListener('document:scroll', ['$event'])
  public onViewportScroll() {

  }
}

Explainer: Viewport Coordinates and BoundingRect

Skip to the next section if you're already familiar with these

To better understand the logic we're adding to this method, let's refresh on how the viewport captures coordinates:

Coordinates are defined on an X and Y axis that starts in the top-left [0,0]
The further away from the top an element is, the greater the Y axis number will be; and the further away from the left an element is, the greater the X axis number will be

The <element>.getBoundingClientRect() method returns the viewport coordinates of the smallest possible rectangle that contains the target element specified; and specific coordinates for what's returned can be accessed with .top, .left, etc.

Recognizing the Elements to Fire Event

Getting the ElementRect from the DOM

Now we can add the onViewScroll() logic in a way that calculates the current window height against the current position of the element we specify

Import ElementRef from the core package
Have the method instantiate the current window's height when the event is triggered by the listener
Calculate the bounded rectangle identified [using <element>.getBoundingClientRect() method] against the window's height to determine its coordinates
Note: I added a private helper function for resetting the icon properties to false ```typescript

// app.component.ts

// ⤵️ Import ElementRef from the core package
import { Component, ElementRef, HostListener, ViewChild } from '@angular/core';

// ... more code

export class AppComponent {

// ... more code

// ⤵️ method called by other methods, to hide all icons
private hideAllIcons() {
this.showsWebIcon = false;
this.showsPublicIcon = false;
}

@HostListener('document:scroll', ['$event'])
public onViewportScroll() {
// ⤵️ Captures / defines current window height when called
const windowHeight = window.innerHeight;
// ⤵️ Captures bounding rectangle of 5th element
const boundingRectFive = this.divFive.nativeElement.getBoundingClientRect();
// ⤵️ Captures bounding rectangle of 8th element
const boundingRectEight = this.divEight.nativeElement.getBoundingClientRect();

// ⤵️ IF the top of the element is greater or = to 0 (it's not ABOVE the viewport)
// AND IF the bottom of the element is less than or = to viewport height
// show the corresponding icon after half a second
// else hide all icons
if (boundingRectFive.top >= 0 && boundingRectFive.bottom <= windowHeight) {
  setTimeout(() => { this.showsWebIcon = true; }, 500);
} else if (boundingRectEight.top >= 0 && boundingRectEight.bottom <= windowHeight) {
  setTimeout(() => { this.showsPublicIcon = true; }, 500);
} else {
  this.hideAllIcons();
}

}
}


---

# End Result
![demo-result](https://ik.imagekit.io/fuc9k9ckt2b/Blog_Post_Images/Dev_to/EndResult_7Uk5el13A.gif?ik-sdk-version=javascript-1.4.3&updatedAt=1654290409833)

Though this _functional_ demo doesn't make it look too exciting (at all), it's a great tool to keep in your arsenal for when that complex use-case makes its way around!


Ri

Parent-Child Component Communication with Angular and Vanilla JS

Ria Pacheco — Wed, 25 May 2022 22:21:32 +0000

This post uses the code picked up from my last article (that created a custom slide-out menu with dynamic data), the code of which you can fork from this branch. As an aside: this is a long article because it's the one I needed when I started coding with Angular.

Core Concepts

Defining Types with Interfaces (and why)
Component-to-Component Communication with @Input() and @Output()
Two-way Data Binding through Child Selectors
One-Way Binding of Events with EventEmitter
Labelling DOM elements with Dynamic Parent Data

Skip Ahead

Brief Refresher: Data and Event
Why Define Types with Interfaces?
- Creating the Interface
- Adding the Interface to the Component's Data
Parent Component Placement and Preparation
- Making the Parent the Main Data Reader
Binding Data Across Components
Event Binding for Dynamic Functions
- The Goal: Scrolling to a "Section"
- The Challenge: Anchoring Elements with Dynamic Data
- Binding the Event
Scrolling to Dynamically Anchored Elements
- Dynamic IDs
- Vanilla JS and scrollIntoView
End Result

Brief Refresher: Component Data and Click Event

In the last article, you might remember that we added data directly to a component (.ts file) so that we could bind it dynamically to the template (.html file).

If you missed it, fork this branch from my repo

FYI: I took the example strings from a Systems Engineering textbook that was sitting next to me (yes, I read textbooks for fun)

export class SidebarComponent implements OnInit {
  showsSidebar = true;
  sections = [
    {
      sectionHeading: 'The Evolving State of SE',
      sectionTarget: 'theEvolvingStateOfSe',
      sectionContents: [
        {
          title: 'Definitions and Terms',
          target: 'definitionsAndTerms',
        },
        {
          title: 'Root Cause Analysis',
          target: 'rootCauseAnalysis',
        },
        {
          title: 'Industry and Government',
          target: 'industryAndGovernment',
        },
        {
          title: 'Engineering Education',
          target: 'engineeringEducation',
        },
        {
          title: 'Chapter Exercises',
          target: 'chapterExercises'
        }
      ]
    },
    { 
      // ... another section's data
    }
  ];

  // more component code
}

Click Event

We also created a click event that would pass the target data (called sectionTarget at the first level and target within the sectionContents array) through to the console.

Why Define Types with Interfaces?

Adding the wrong data type by accident (e.g. a property type that has an s added to the end which isn't in the original format, like "contents" versus "content") is extremely difficult to debug
Writing lots of code (without defined data types), will not notify us of any mismatched data between a component (or service's) function and the data source until runtime
We want some order when it comes to the wild wild west of JavaScript

Creating the Interface

Let's create an interface that defines the data we revisited in the previous section. Create the file by running $ ng g interface interfaces/system-concepts --type=interface.

The --type=interface flag simply adds -.interface.ts extension to the file name so that it's neat and pretty.

First we'll add the main shape of the data. Notice that I added an I to the beginning of the interface name to differentiate it from classes and to take advantage of VSCode's IntelliSense plugins for TS:

// system-concepts.interface.ts

export interface ISystemConcepts {
  sectionHeading?: string;
  sectionTarget?: string;
  sectionContents?: [];
}

Adding question marks makes the property optional so that no errors occur if we don't mention this property when mentioning the object.

Since the sectionContents property contains an array of objects which have their own defined properties (for title and target), we'll add another interface before this one so we can refer to it with this array:

// system-concepts.interface.ts

export interface ISectionContents {
  title?: string;
  target?: string;
}
export interface ISystemConcepts {
  sectionHeading?: string;
  sectionTarget?: string;
  sectionContents?: ISectionContents[]; // We refer to ISectionContents here
}

Adding the Interface to the Component's Data

Now back inside the component we can import the interface and add it to the sections array. Make sure to follow it with [] since it's defining an array instead of a single object (section):

// sidebar.component.ts

import { ISystemConcepts } from './../../interfaces/system-concepts.interface';

export class SidebarComponent implements OnInit {
  showsSidebar = true;

  // Here is where we add the imported interface
  sections: ISystemConcepts[] = [
    {
      sectionHeading: 'The Evolving State of SE',
      sectionTarget: 'theEvolvingStateOfSe',
      sectionContents: [
        {
          title: 'Definitions and Terms',
          target: 'definitionsAndTerms',

  // More component code
}

If you run $ ng serve, you'll see that there's no errors
While the app is still served locally, try changing the interface to see what errors pop up

Parent Component Placement and Preparation

Create a parent component called Article by running $ ng g c views/article in your terminal.
In the app.component.html file, remove the <app-sidebar> selector and replace it with the new <app-article></app-article selector
If you run $ ng serve, you should see "article works!" in your browser.

<!-- app.component.html -->

<app-article></app-article>

Now remove the content from the Article component and replace it with the child <app-sidebar></app-sidebar> selector

You'll see it behave exactly the same as before

Making the Parent the Main Data Reader

Copy the data from the child component's sections array and paste it into a new sections property created in the parent component.

If you erase the data from the child component, leaving behind an empty sections: ISystemConcepts[] = []; property, the locally served app will still show the actual sidebar itself, but none of the data will render.

Binding Data Across Components

To render the data that's now defined in the Parent article.component.ts file, we have to create a door that translates one property as another (since they wouldn't need the same names). To do this, we import the @Input() decorator (the "door") from Angular's core package into the child sidebar.component.ts file, and prefix that child's sections property with it like this:

// sidebar.component.ts

// We import `Input` from angular core ⤵️
import { Component, Input, OnInit } from '@angular/core';

// ... other code 

export class SidebarComponent implements OnInit {
  showsSidebar = true;
  @Input() sections: ISystemConcepts[] = [];

  // ... more code
}

This "door" we created allows us to now bind the data to the <app-sidebar></app-sidebar> selector that's inside the parent component. In Angular, anything with [] indicates two-way data binding, while () indicates events (comes up later).

<!--article.component.html-->

<app-sidebar [sections]>
</app-sidebar>

However, this will shoot out an error since we haven't defined any parent properties for the [sections] property to translate into. Since the parent component's data property is also called sections we can add it here:

<!--article.component.html-->
<!--This means [childDataProperty]="parentDataProperty"-->
<app-sidebar [sections]="sections">
</app-sidebar>

Now, if you serve the app, you'll see that the data is back.

Before moving on, remember to add the ISystemConcepts[] interface to the parent's sections property like we had in the child component and to create a showsTableOfContents = false; property in the parent that the child should access the same way as above:

// article.component.ts

export class ArticleComponent implements OnInit {
  showsTableOfContents = false;
}

// sidebar.component.ts

export class SidebarComponent implements OnInit {
  @Input() showsSidebar = true;
}

<!--article.component.html-->
<app-sidebar
  [showsSidebar]="showsTableOfContents"
  [sections]="sections">
</app-sidebar>

Event Binding for Dynamic Functions

Now that we've reviewed component-to-component binding (using [] in the selector element), we can similarly bind events using ().

The Goal: Scrolling to a "Section"

Generally you can use Angular's @ViewChild decorator to identify an element in the DOM and perform actions on it. As an example, if your template has an element with an anchored ID like this:

<div #thisDiv></div>

You can identify it in the component like this:

@ViewChild('thisDiv') divElement!: ElementRef;

Which you can then perform functions on, like a pretty scrollIntoView():

onSomeEvent(event) {
  if (event) { 
    this.divElement.nativeElement.scrollIntoView({ behavior: 'smooth'}); 
  }
}

This is our desired use-case:

The Challenge: Anchoring Elements with Dynamic Data

Since we want the child component to remain "dumb", and for any instantiated data to come from the parent, our creating static IDs for elements we'd want to scroll into wouldn't match any data fed from the child's emitted event. Ideally, we want the app to define anchor IDs with dynamic parent data; and to scroll to those exact anchors if they match the parent data coming through the click event.

Binding the Event

First, we want the child (sidebar) component to send an event to the parent. We can do this using Angular's EventEmitter from the core package.

Import Output and EventEmitter from the core package into the sidebar component
Prefix a label [I’m calling it “onSelection”] with @Output() and have it instantiate an event emitter to the type of string

// sidebar.component.ts

// Import from core package like this ⤵️
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';

// ... more code

export class SidebarComponent implements OnInit {
  @Input() showsSidebar = true;
  @Input() sections: ISystemConcepts[] = [];

  // Here's where we label a new EventEmitter with `onSelection` ⤵️
  @Output() onSelection = new EventEmitter<string>();

Now, instead of the child's onTargetContentClick() function simply sending target strings to your console, we can use the emitter to emit the string to the parent (where another parallel method will catch it):

// sidebar.component.ts

onTargetContentClick(targetString: string | undefined, event: Event) {
  if (event) {
    this.onSelection.emit(targetString);
    this.closeSidebar();
  }
}

Similar to how we bounded data to the selector to populate the template, we can bind events with () instead of [] to match up with events in the component:

<!--article.component.html-->

<app-sidebar
  (onSelection)=""
  [showsSidebar]="showsTableOfContents"
  [sections]="sections">
</app-sidebar>

And just like before, it will return an error unless we create a parallel event for it to pass the data to:

// article.component.ts

onSelect(event: Event) {
  console.log(event);
}

So now our selector is complete:

<!--article.component.html-->

<app-sidebar
  (onSelection)="onSelect($event)"
  [showsSidebar]="showsTableOfContents"
  [sections]="sections">
</app-sidebar>

Scrolling to Dynamically Anchored Elements

In the article.component.html file, I created some structure beneath the <app-sidebar> selector for populating article content.

Note: the mt-5 and mb-3 classes come from my @riapacheco/yutes package that uses SCSS arguments for margin- and padding-manipulating classes (e.g. mt-5 translates to margin-top: 5rem)

<!--article.component.html -->

<!--Child Component-->
<app-sidebar
  [showsSidebar]="showsTableOfContents"
  [sections]="sections"
  (onSelection)="onSelect($event)">
</app-sidebar>

<div class="article-view">

  <!--Section Block -->
  <div
    *ngFor="let section of sections"
    class="section mt-5 mb-3">
    <!--Section Title -->
    <h1>
      {{ section.sectionHeading }}
    </h1>

    <!--Content Block-->
    <div
      *ngFor="let content of section.sectionContents"
      class="section-items mt-3">
      <h3>
        {{ content.title }}
      </h3>

      <!--Filler text that would have otherwise come from the data source but I was lazy -->
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime odio molestiae doloremque nulla facilis. Pariatur officiis repudiandae ab vero ratione? Sint illum rem error aliquam consectetur incidunt quo laborum. Neque!
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit repellendus fugiat commodi impedit incidunt mollitia sed non dicta qui velit earum quos eligendi, eveniet porro labore dolore, fugit inventore alias.
      </p>
    </div>

  </div>
</div>

With a little SCSS:

:host {
  width: 100%;
}

.article-view {
  width: 65%;
  margin: auto;
}

Dynamic IDs

Ideally, we want the anchor IDs to match the target strings fed through the click event. So, for the section heading itself (that we want to scroll to), we add the following ID (which matches the data passed through). We do the same for the content block too!:

<div class="article-view">

  <!--Section Block -->
  <div
    *ngFor="let section of sections"
    class="section mt-5 mb-3">

    <!--**ADDED THIS ID⤵️** -->
    <h1 id="{{section.sectionTarget}}">
      {{ section.sectionHeading }}
    </h1>

    <!--Content Block-->
    <div
      *ngFor="let content of section.sectionContents"
      class="section-items mt-3">
      <!--**ADDED THIS ID ⤵️ **-->
      <h3 id="{{content.target}}">
        {{ content.title }}
      </h3>
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime odio molestiae doloremque nulla facilis. Pariatur officiis repudiandae ab vero ratione? Sint illum rem error aliquam consectetur incidunt quo laborum. Neque!
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit repellendus fugiat commodi impedit incidunt mollitia sed non dicta qui velit earum quos eligendi, eveniet porro labore dolore, fugit inventore alias.
      </p>
    </div>

Vanilla JS and scrollIntoView

In the parent component we can now use some Vanilla JS to grab that ID and attach it to a const; which will act as our anchor for scrolling:

onSelect(targetString: string) {
  const targetLocation = document.getElementById(targetString);
  targetLocation?.scrollIntoView({ behavior: 'smooth' });
}

End Result

And there you have it: a reusable sidebar component that can scroll to dynamic IDs you don't need to statically populate every time. Now you can create menus, documentation views, and whatever else you’d like with a reusable sidebar component you made from scratch!

Custom Slide-Out Menu Component: Populated with Dynamic Component Data, and Styled with Angular Animations & SCSS

Ria Pacheco — Sat, 21 May 2022 06:17:06 +0000

Objectives

Part 1 (this article)

Create a sidebar component that:

Slides out from the left with a smooth animation
Lists content from data found inside the component
Emits data from that data source when an item is clicked

End Result ⤵

Part 2: Parent-Child Component Communication with Angular and Vanilla JS

Read a parent component's data
Emit data from the parent component's data but triggered by an event from the child sidebar
Use that data to scroll to dynamic element IDs in the template

Skip Ahead

Initial App Setup (read if you're n00b)
- Create New App
- Add Dependencies
- Add Quick SCSS Package
- Add Material Icons the Easy Way
Building the Sidebar
- Create the Component
- Build the Template with Placeholder Content and SCSS
- Adding and Binding Component Data
- Properties and Data Arrays
- Accessing Data and Nested Data with a Namespace
Passing Component Data through a Click Event
- Add the Click Function
- Test it in your Console
Adding Animations
- Using AngularBrowserAnimations

Initial App Setup

Read this section if you're n00b, otherwise jump to next section

Create New App

Create the app by running $ ng new menu-demo --skip-tests in your terminal. Choose y for routing and select the SCSS option with the styling prompt.

Add Dependencies

In the app.module.ts file, add the BrowserAnimationsModule and the CommonModule so that we can manipulate directives like so:

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

// Add these ⤵
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    // And ⤵
    CommonModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Add Quick SCSS Package

To stay high-level, I'm using my @riapacheco/yutes package on NPM.
After installation, add the following imports to your styles.scss file

@import '~@riapacheco/yutes/yutes.scss';
@import '~@riapacheco/yutes/colors.scss';

OR add the following to your angular.json file:

"projects": [
  "menu-demo": [
    "build": [
      "options": [
        "styles": {
          "./node_modules/@riapacheco/yutes/yutes.scss",
          "./node_modules/@riapacheco/yutes/colors.scss"
        }
      ]
    ]
  ]
]

Add Material Icons the Easy Way

We want to use icons for the Open and Close button of the menu, so a fast way to do that is by using Google's material icon font via href. Add the following inside your <head> within your index.html file:

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

Now you can add icons by adding the material-icons class to an element that names the icon type through its content like this:

<i class="material-icons">search</i>

Will show up like this:

Building the Sidebar

Create the Component

Run $ ng g c components/sidebar in your terminal to create a new component.

Remove all the default content found in the app.component.html file and replace it with the following selector:

<app-sidebar></app-sidebar>

Build the Template with Placeholder Content and SCSS

First, we'll add the structure of the sidebar in the template in a way that allows us (later through SCSS) to create a sidebar that doesn't move unless triggered (position: absolute) and uses an icon toggle button that only appears when hovering over the menu. We add conditions to the toggle button in three ways:

We use Angular's *ngIf directive to show the icon when we want it shown
We use SCSS to set opacity: 0 to the icons until the the overall sidebar area has been hovered over
On the .toggle-btn anchor element itself, we add a (click) directive that enables straight toggle behavior with showsSidebar = !showsSidebar

Read the comments below to understand why I added a 'close' class to the first icon

<nav class="sidebar">
  <div class="sidebar-content">
    <a
      (click)="showsSidebar = !showsSidebar"
      class="toggle-btn">
      <!--Shows Close Icon on button when sidebar is open and if hovering-->
      <!-- I've added an additional class 'close' to this so that I can differentiate between icons and keep the other `menu` icon visible when the menu is closed -->
      <span
        *ngIf="showsSidebar"
        class="material-icons close">
        close
      </span>

      <!-- Shows Menu Icon on button when sidebar is closed-->
      <span
        *ngIf="!showsSidebar"
        class="material-icons">
        menu
      </span>
    </a>

    <!-- This is a group of sections -->
    <div class="sections">
      <!-- This is a single section -->
      <div class="section">
        <!-- This is the title of a section -->
        <a href="" class="section-title">
          The Evolving State of SE
        </a>

        <!-- This is the list of items within a section -->
        <div class="section-content">
          <ul class="list-unstyled">
            <li>
              <a>
                Definitions and Terms
              </a>
            </li>

            <li>
              <a>
                Root Cause Analysis
              </a>
            </li>

            <li>
              <a>
                Industry and Government
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</nav>

We'll now add the absolute structure of the component with SCSS, as well as the opacity: 0 to the toggle button. This is reversed to opacity: 1 when the user hovers over the overall sidebar itself:

@import '~@riapacheco/yutes/colors.scss';

nav, .sidebar {
  background-color: white;
  border-radius: 0px 6px 6px 0px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 330px;
  box-shadow: 8px 8px 18px #00000030;

  .sidebar-content {
    width: 100%;

    // Full width button
    // Contains the icon, but uses flex-box to push to the right-side
    .toggle-btn {
      width: 100% !important;
      height: 1.5rem;
      padding-right: 0.4rem;

      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: flex-end;

      span {
        font-size: 0.99rem;
        // IF the button icon has a <span> AND a `.close` class,
        // THEN set its opacity to 0 [transparent]
        &.close {
          opacity: 0;
        }

        // IF the cursor hovers over the actual icon (not just the menu)
        // THEN change the icon color
        &:hover {
          color: $secondary-color;
        }
      }
    }
  }

  // IF the cursor is hovering over the sidebar menu,
  &:hover {
    .sidebar-content {
      .toggle-btn {
        // THEN change the toggle-btn's <span> element opacity: 0 to opacity: 1
        span {
          opacity: 1;
        }
      }
    }
  }
}

// All sections
.sections {
  margin-left: 2rem;
  margin-top: 2rem;

  .section{
    margin-bottom: 3rem;

    // Section Title
    .section-title {
      font-size: 0.88rem;
      line-height: 0.88rem;
      text-transform: uppercase;
      letter-spacing: 0.09rem;
      font-weight: 600;

      &:hover {
        color: $secondary-medium-color;
      }
    }

    // Listed items
    .section-content {
      ul {
        margin-top: 1rem;
        margin-bottom: 1rem;
        margin-left: 1rem;
        li {
          margin-bottom: 0.5rem;

          a:hover {
            color: $secondary-medium-color;
          }
        }
      }
    }
  }
}

Now the component looks like this:

Adding and Binding Component Data

We will need to add data to the component first so that:

We understand the data's shape (schema / hierarchy)
We ensure the styles applied make sense for that shape

Properties and Data Arrays

We'll add a showsSidebar property to drive the initial behavior of the sidebar and set it to true. Then we'll add a data array of objects called sections that we'll populate right inside the component.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.scss']
})
export class SidebarComponent implements OnInit {

  // Toggles the sidebar from view
  showsSidebar = true;

  // Populated data so that we understand the shape / schema
  sections = [
    {
      sectionHeading: 'The Evolving State of SE',
      sectionTarget: 'theEvolvingStateOfSe',
      sectionContents: [
        {
          title: 'Definitions and Terms',
          target: 'definitionsAndTerms',
        },
        {
          title: 'Root Cause Analysis',
          target: 'rootCauseAnalysis',
        },
        {
          title: 'Industry and Government',
          target: 'industryAndGovernment',
        },
        {
          title: 'Engineering Education',
          target: 'engineeringEducation',
        },
        {
          title: 'Chapter Exercises',
          target: 'chapterExercises'
        }
      ]
    },
    {
      sectionHeading: 'Attributes and Properties',
      sectionTarget: 'attributesAndProperties',
      sectionContents: [
        {
          title: 'Definitions and Terms',
          target: 'defintionAndTerms',
        },
        {
          title: 'User Roles and Missions',
          target: 'userRolesAndMissions',
        },
        {
          title: 'Defining User Missions',
          target: 'definingUserMissions',
        },
        {
          title: 'Problem, Opportunity, Solution',
          target: 'problemOpportunitySolution',
        },
        {
          title: 'Spaces',
          target: 'spaces'
        },
      ]
    }
  ];

  constructor() { }

  ngOnInit(): void {
  }

}

It's important to remember that the first layer includes a sectionTarget to the type of string. And similarly the second nested layer (list of items under sectionContents) includes a target string. These were added as a reference string to be passed through later.

Accessing Data and Nested Data with a Namespace

Here's where we'll use Angular's *ngFor directive to bind the first array layer of data to a repeating element within the template

<!-- Earlier Code -->

    <div class="sections">

      <!-- ------------------- This is where we bind the data -------------------- -->
      <div
        *ngFor="let section of sections;"
        class="section">

        <!--Section Title-->
        <a href="" class="section-title">
          {{ section.sectionHeading }}
        </a>
<!-- more code -->

Now that we've established a namespace (e.g. section.sectionHeading) for accessing data. We can use that namespace a second time to access within a nested array:

<!--Earlier Code-->

    <div class="sections">

      <!-- ------------------- This is where we bind the data -------------------- -->
      <div
        *ngFor="let section of sections;"
        class="section">

        <!--Section Title-->
        <a href="" class="section-title">
          {{ section.sectionHeading }}
        </a>

        <!-- ------------- This is where we access the nested content -------------- -->
        <div
          *ngFor="let sectionContent of section.sectionContents"
          class="section-content">
          <ul class="list-unstyled">
            <li>
              <a>
                {{ sectionContent.title }}
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</nav>

Now the data from the Component is reflected in the view

Passing Component Data through a Click Event

Relevant component data, passed through a click event, is important since it enables context. Essentially, we get to play with the data that's directly related to the element we clicked (regardless of the template being dynamically populated).
It's handy for parent component communication (part 2 to this article) and for use-cases where you want to line up the data that's passed through so that a follow-up function (e.g. scrollTo()) might catch the string and use it to scroll to the right element in a template, identified by an elementRef directive.

Add the Click Function

In the template, add a function called onTargetContentClick(), that accepts a string and an event, so that we can show its result in the console.

export class SidebarComponent implements OnInit {

  // More code

  onTargetContentClick(targetString: string, event: Event) {
    console.log(targetString);
  }
}

Remember that every "section" has a "sectionTarget" string and every sectionContent has a "target" string. Add the function to the template like this:

<!--Earlier Code-->

    <div class="sections">
      <div
        *ngFor="let section of sections;"
        class="section">

        <!-- Add the function to the Section title -->
        <a 
          (click)="onTargetContentClick(section.sectionTarget, $event)"
          class="section-title">
          {{ section.sectionHeading }}
        </a>


        <div
          *ngFor="let sectionContent of section.sectionContents"
          class="section-content">
          <ul class="list-unstyled">
            <li>
              <!--Add the function to every listed item's anchor element-->
              <a (click)="onTargetContentClick(sectionContent.target, $event)">
                {{ sectionContent.title }}
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</nav>

Test it in your Console

Now you can open your Chrome devTools console (either by clicking F12 on your keyboard or command+alt+i, followed by selecting the console tab) and click each item to see what appears:

Adding Animations

Finally, we can add animations by first adding an animation trigger ([@triggerName]) via Angular Animations
By adding the trigger followed by a ternary operator we're essentially saying: if the isOpen property is true, the [@sidebarTrigger] will use the open state defined in the component file, else use close.

<!--Add an animation trigger followed by a ternary operator-->
<nav
  [@sidebarTrigger]="isOpen ? 'open' : 'close'"
  class="sidebar">
  <div class="sidebar-content">
    <a
      (click)="showsSidebar = !showsSidebar"
      class="toggle-btn">
      <span
        *ngIf="showsSidebar"
        class="material-icons close">
        close
      </span>
      <span
        *ngIf="!showsSidebar"
        class="material-icons"
        style="opacity: 1 !important;">
        menu
      </span>
    </a>

Using AngularBrowserAnimations

Now we add the animations by importing the decorators from the package, and adding the array to the @Component decorator like so:

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.scss'],
  animations: [
    trigger('sidebarTrigger', [
      // To add a cool "enter" animation for the sidebar
      transition(':enter', [
        style({ transform: 'translateX(-100%)' }),
        animate('300ms ease-in', style({ transform: 'translateY(0%)' }))
      ]),

      // To define animations based on trigger actions
      state('open', style({ transform: 'translateX(0%)' })),
      state('close', style({ transform: 'translateX(-94%)' })),
      transition('open => close', [
        animate('300ms ease-in')
      ]),
      transition('close => open', [
        animate('300ms ease-out')
      ])
    ])
  ]
})

Completed Standalone Sidebar

We now have a standalone sidebar that reads data from its component and can pass that data through click events.

Read Parent-Child Component Communication with Angular and Vanilla JS: we'll make the sidebar reusable using Angular's @Input() and @Output() decorators, use EventEmitter to pass the parent's data through the child's (click) event, and use that same data to scroll to dynamic IDs in the template!

Stay tuned.

Code for this article can be found in the Part-1 branch of this repo

Custom & Reusable Toast Component with Angular Animations, Async Pipe, and RxJS' BehaviorSubject

Ria Pacheco — Sun, 15 May 2022 04:46:08 +0000

Available in my GitHub repo

Objectives

Create a toast component with a conditional styling mechanism
Define states with stored strings to feed it
Use cool animations from Angular's core packages
Trigger the toast from anywhere in the app (by any service or from any parent component that calls it)

Execution Workflow

Style the Component - we'll style the component itself and in doing so, revisit concepts for conditional styling (utilizing Angular's built-in directives)
Create the Toast Service - We'll create the actual service that will be called on by other services or components when needing to trigger and populate the toast
Two-Way Bind the Component - We'll then make adjustments to the component so that its conditional variables / properties can be accessed by the toast service

Skip Ahead

Creating and Styling the Component
Toast Setup and Initial Data Binding
Adding SCSS Styles
Binding an Array as a Class
Adding Angular Animations to the Template
Adding Animation Syntax to the Component File
Creating the Toast Service
Accessing Service's BehaviorSubjects with the Async Pipe
Two-Way Bind the Component
Using the Async Pipe in the Template

Creating and Styling the Component

First, create new component in the terminal by running:



  $ ng g c components/ui/toast

Global Access

To access this component from anywhere in the app, add it to the app.component.html file. The service we create will ensure that it doesn't show up until we call it.



<!--in the app.component.html file-->
<app-toast></app-toast> <!--This is the selector for the toast component-->

<router-outlet></router-outlet>

Quick tip for Z-Index

We want the toast to appear in front of every item in the app. But sometimes, the app gets confused. To fix this, you can simply add (and keep track) of your z-indexed items in the styles.scss file. Note: to ensure this consistently works, don't forget to add the parent class you end up creating for the element too!



// style.scss

app-root {   z-index: 1; }  
app-toast, .toast-class {   z-index: 2; }

Toast Setup and Initial Data Binding

We'll create a div with an *ngIf directive. This makes it so the toast doesn't appear unless the property showsToast is true. We'll add this property to the component file next.
The {{ toastMessage }} string is binding a message string assigned to the toastMessage property that we'll also find in the component file next!



<!--toast.component.html-->
<div *ngIf="showsToast" class="toast-class">  
  <div style="max-width: 160px;">    
    {{ toastMessage }}  
  </div> 

  <!--button-->
  <a
    class="close-btn" 
    (click)="showsToast = !showsToast">    
    <small>      
      Dismiss    
    </small>
  </a>
</div>



// toast.component.ts
import { Component, OnInit } from '@angular/core';

@Component({  
  selector: 'app-toast',  
  templateUrl: './toast.component.html',  
  styleUrls: ['./toast.component.scss']
})

export class ToastComponent implements OnInit {  
  toastMessage = 'This is a toast'; // This is the string the template is already bound to  
  showsToast = true; // This is what toggles the component to show or hide  

  constructor() { }  

  ngOnInit(): void {  }
}

Adding SCSS Styles

Conditional styles usually revolves around adding or removing a class (in my experience). So, an element might be styled a certain way, and when given a different condition will add new styles (that might cancel out former ones).

An awesome feature that I don't think many people know about are placeholder selectors! If you don't know about them, you can read about them here.

Feel free to use my SCSS package on npm for this example, as this is what I'm doing to keep things high-level! I'm only going to use it for this example here for colors.

Run $ npm install @riapacheco/yutes (more instruction is on the npm page)

Then, add this to the toast component's SCSS file:



// toast.component.scss
@import '~@riapacheco/yutes/combos.scss';

%default-toast { 
  // You indicate a placeholder selected with a preceding '%'
  position: absolute;
  top: 0;
  right: 0rem;  
  margin: 2rem;  
  display: inline-flex;  
  min-width: 260px;    
  min-height: 70px;  
  max-height: 70px;  
  box-shadow: 6px 6px 12px #00000040;  

  flex-flow: row nowrap;  
  align-items: center;  
  justify-content: space-between;  
  border-left: 6px solid black;  
  padding: 1.5rem;  
  border-radius: 4px;  
  font-size: 0.9rem;
}

// Default toast
.toast-class {  
  @extend %default-toast; // You then add the styles to another selector with the @extend decorator
}

// Now we can make our state-specific classes

// Success
.success-toast {  
  @extend %default-toast;  
  border-left: 6px solid $success;
}

// Warning
.warning-toast {  
  @extend %default-toast;  
  border-left: 6px solid $warning;
}

// Danger
.danger-toast {  
  @extend %default-toast;  
  border-left: 6px solid $danger;
}

Your default toast looks like this:

And if you change the class on the element from toast-class to warning-toast, it will look like this:

Binding an Array as a Class

Now that you see how the component changes with a different class, we can use binding [] to bind a class property to the template (that can change from inside the component).



// toast.component.ts
import { Component, OnInit } from '@angular/core';

@Component({  
  selector: 'app-toast',  
  templateUrl: './toast.component.html',  
  styleUrls: ['./toast.component.scss']
})

export class ToastComponent implements OnInit {  
  toastClass = ['toast-class']; // Class lists can be added as an array  
  toastMessage = 'This is a toast';  
  showsToast = true;

  constructor() { }  

  ngOnInit(): void {  }
}



<!--toast.component.html-->
<div
  *ngIf="showsToast"
  [class]="toastClass"> 
  <!--We bind it by surrounding 'class' with square-brackets and referencing the property from the template-->  
  <div style="max-width: 160px;">    
    {{ toastMessage }}  
  </div>  

  <a
    class="close-btn" 
    (click)="showsToast = !showsToast">    
      <small>      
        Dismiss    
      </small>  
  </a>
</div>

Adding Angular Animations to the Template

To add animations from scratch, you add the BrowserAnimationsModule from angular's core package to your app.module.ts file like so:



@import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({  
  declarations: [    
    AppComponent,    
    ToastComponent  
  ],  
  imports: [    
    BrowserAnimationsModule,
    CommonModule  ],  

  providers: [],  
  bootstrap: [
    AppComponent
  ]
})

export class AppModule { }

Then in the toast.component.html file, we can add the animation trigger that tells the app which element we'll define with animation specs. Since it has a conditional trigger baked in, we no longer need the *ngIf directive that we added earlier. (cool, eh?)



<!--toast.component.html-->
<div
  [@toastTrigger]="showsToast ? 'open' : 'close'" 
  [class]="toastClass">  
  <div style="max-width: 160px;">    
    {{ toastMessage }}  
  </div>  

  <a
    class="close-btn"
    (click)="showsToast = !showsToast">    
    <small>      
      Dismiss    
    </small>  
  </a>
</div>

Animations require a trigger that you name with [@<name>]. This is then bound to the conditional property we created earlier, but now followed by a ternary operator. So showsToast ? 'open' : 'close' really means: if the property showsToast is true, then use open as the animation state... else use close. We'll now define the animations states and styles in the component itself.

Adding Animation Syntax to the Component File

First, we have to import, into the component, the different elements of the animation we'll be using. You can learn more about these triggers from angular's documentation.



import { Component, OnInit } from '@angular/core';
// import this ⤵
import { animate, state, style, transition, trigger } from '@angular/animations';

@Component({  
  selector: 'app-toast',  
  templateUrl: './toast.component.html',  
  styleUrls: ['./toast.component.scss'],  
  // And then these ⤵
  animations: [    
    trigger('toastTrigger', [ // This refers to the @trigger we created in the template      
      state('open', style({ transform: 'translateY(0%)' })), // This is how the 'open' state is styled      
      state('close', style({ transform: 'translateY(-200%)' })), // This is how the 'close' state is styled      
      transition('open <=> close', [ // This is how they're expected to transition from one to the other         
        animate('300ms ease-in-out')
      ])    
    ])  
  ]
})

export class ToastComponent implements OnInit {  
  toastClass = ['toast-class'];  
  toastMessage = 'This is a toast';  
  showsToast = true;  

  constructor() { }  

  ngOnInit(): void {  }
}

You can test to see if the animation works by changing the showsToast property to false, and adding a setTimeout() function to change the property to true after 1000ms (1 second):



export class ToastComponent implements OnInit {  
  toastClass = ['toast-class'];  
  toastMessage = 'This is a toast';  
  showsToast = false;  

  constructor() { }  

  ngOnInit(): void {    
    setTimeout(() => {      
      this.showsToast = true;    
    }, 1000);  
  }
}

Run $ ng serve in your terminal and wait a second for the toast to appear!

So now we need to have something trigger the service!

3 Things to Remember

The toast component needs three inputs:

A class (string) that's either success-toast, warning-toast, or danger-toast.
A boolean result for showsToast to either or show (true) or hide (false) which impacts the animation
A message (string) that binds to the toastMessage so that the message will display

Creating the Toast Service

Add the service with the following command in your terminal



$ ng g s services/toast

(Don't forget to add the service to the providers: [] array in your app.module.ts file!

Adding State Variables

In the toast.service file, we'll first add a constant that defines our toast states as strings. These strings will be what's passed to the component and thus match the classes (e.g. success-toast) that we made earlier. This will help keep things in check and make it easier to refer to the states from anywhere in the app (without having to go revisit what they're called or type out a specific string



import { Injectable } from '@angular/core';

// Add this constant ⤵
export const TOAST_STATE = {  
  success: 'success-toast',  
  warning: 'warning-toast',  
  danger: 'danger-toast'
};

@Injectable({  
  providedIn: 'root'
})

export class ToastService {  
  constructor() { }
}

Accessing Service's BehaviorSubjects with the Async Pipe

A super handy feature that comes with Angular is its async pipe. Instead of having to subscribe manually to an observable from inside a component, if the service/provider's observable is public, you can get access to what's in the observable from directly inside the template.

Think of an observable as a stream of data that you can then watch and make appear in different places.

Angular often uses the RxJS library (comes with react) for handling state management. So we'll be using BehaviorSubjects since you can store default properties initially.



// toast.service.ts

export class ToastService {  
  // The boolean that drives the toast's 'open' vs. 'close' behavior  
  public showsToast$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);  

  // The message string that'll bind and display on the toast  . 
  public toastMessage$: BehaviorSubject<string> = new BehaviorSubject<string>('Default Toast Message');  

  // The state that will add a style class to the component  . 
  public toastState$: BehaviorSubject<string> = new BehaviorSubject<string>(TOAST_STATE.success);   

  constructor() { }
}

Now we'll add two methods to trigger the component and populate the BehaviorSubjects with different data.

A showToast() method will trigger the toast and pass through it the toast state and toast message string (it will be assumed that if the function is called, the toast will want to be opened)
A dismissToast() to indicate that the toast is back to false ```typescript

// toast.service.ts

export class ToastService {

public showsToast$: BehaviorSubject = new BehaviorSubject(false);

public toastMessage$: BehaviorSubject = new BehaviorSubject('Default Toast Message');

public toastState$: BehaviorSubject = new BehaviorSubject(TOAST_STATE.success);

constructor() { }

showToast(toastState: string, toastMsg: string): void {

// Observables use '.next()' to indicate what they want done with observable

// This will update the toastState to the toastState passed into the function
this.toastState$.next(toastState);

// This updates the toastMessage to the toastMsg passed into the function    
this.toastMessage$.next(toastMsg);    

// This will update the showsToast trigger to 'true'
this.showsToast$.next(true);

}

// This updates the showsToast behavioursubject to 'false'

dismissToast(): void {

this.showsToast$.next(false);

}
}



---

# Two-Way Bind the Component
Now we can go back to the toast component and replace the variables in the template with the observables we have in the component.
1. In the component itself, since we define and store our values in the service, we can remove the values from the component properties and replace them with their types.
2. We want to inject the toast.service as a 'public' injectable within the constructor
3. We'll want to add a `dismiss()` method that can call on the toast.service within the component and access its `dismissToast()` method
```typescript


import { ToastService } from 'src/app/services/toast.service';

export class ToastComponent implements OnInit {  
  // Change the default values to types  
  toastClass: string[];  
  toastMessage: string;  
  showsToast: boolean;  

  constructor(public toast: ToastService ) { } // We inject the toast.service here as 'public'  

  ngOnInit(): void {  }  

  // We'll add this to the dismiss button in the template  
  dismiss(): void {    
    this.toast.dismissToast();  
  }
}

Using the Async Pipe in the Template

To use the async pipe, you just have to add the service as an object followed by the observable name you're accessing; and follow those with | async.



<!--We canged the toastTrigger and class-->
<div
  [@toastTrigger]="(toast.showsToast$ | async) ? 'open' : 'close'" 
  [class]="toast.toastState$ | async">  
    <div style="max-width: 160px;">
      <!--We access the toastMessage$ observable in the service-->    
      {{ toast.toastMessage$ | async }}  
    </div>  

  <a
    class="close-btn" 
    (click)="dismiss()">    
    <small>      
      Dismiss    
    </small>  
  </a>
</div>

Test it!

Since behavior subjects can hold initial values, we can test the toast by changing the default showsToast$ value to true and adding whatever else you want to the other values!



export class ToastService {  
  public showsToast$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);  
  public toastMessage$: BehaviorSubject<string> = new BehaviorSubject<string>('This is a test message!');  
  public toastState$: BehaviorSubject<string> = new BehaviorSubject<string>(TOAST_STATE.danger);  

  constructor() { }  

  // .. more code
}

Conclusion

This was a lot -- but it's also the article I wish I read before I knew all this. We walked through the idea of services being separated, animations, scss styling, and more.

Now, when you're completing a process that needs a toast triggered, you can call on the toast to appear (and maybe even add a setTimeout to dismiss it!). Here's an example in a standard firebase user auth service:



export class AuthService {  

  constructor(
    private fireAuth: AngularFireAuth,    
    private toast: ToastService  
  ) {}  

  registerUser(email: string, password: string): void {    
    this.fireAuth.createUserWithEmailAndPassword(email, password)      
      .then(res => {        
        this.toast.showToast(          
          TOAST_STATE.success,          
          'You have successfully registered!');        
        this.dismissError();        
        console.log('Registered', res);
      })
      .catch(error => {        
        this.toast.showToast(          
          TOAST_STATE.danger,          
          'Something went wrong, could not register'        
        );        
        this.dismissError();        
        console.log('Something went wrong', error.message);      
      });  
  }  

  private dismissError(): void {    
    setTimeout(() => {      
      this.toast.dismissToast();    
    }, 2000);  
  }
}

That's it. That's all.

Ria

Ps. Check out this code in my my GitHub repo

Using Sass'/SCSS' %Placeholder Selectors for Same-Sheet Repeatable Styling

Ria Pacheco — Fri, 06 May 2022 02:34:07 +0000

Skip ahead

Refresher on Mixins
The Problem
Solution: Placeholder Selectors

Refresher on Mixins

A @mixin is an At Rule feature of SASS/SCSS that allows you to define styles as though they were contained in a global class that can be accessed from other style sheets.

As a basic example, you write them like this (typically in a style sheet called mixins.scss):

// mixins.scss
@mixin guest-avatar {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 2px solid orange;
}

To access them from another location, you import the @mixin style sheet and use @include like so:

// about.component.scss

@import '../scss/mixins.scss';

img {
  @include guest-avatar;
}

The Problem

You can't reference a @mixin from within the same style sheet
Sometimes you want repeatability so that you can make adjustments to styles at the top of the style sheet only (going beyond basic $variables)

Solution: Placeholder Selectors

With placeholder selectors you can define the same kind of pseudo class with a % in front of the selector:

// some.component.scss

%rounded-top {
  border-radius: 8px 8px 0px 0px;
  padding: 1rem;
  padding-bottom: 3rem;
}

Now you can reference the selector somewhere on the same style sheet below where it was defined:

// some.component.scss

%rounded-top {
  border-radius: 8px 8px 0px 0px;
  padding: 1rem;
  padding-bottom: 3rem;
}

.bottom-sheet {
  @extend %rounded-top;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

That's it. That's all.

Ria

Adding Animated Illustrations to an Angular App with Lottie (ngx-lottie)

Ria Pacheco — Mon, 02 May 2022 18:56:02 +0000

Note: The concepts herein helped me better (and fully) understand Angular component re-usability through concepts like: data binding, component-in-component placement, @Input() decorators, and @Output() decorators. Hopefully it can help you in this same way too!

Problems

Since angular animations are meant for transitions / interactions, it's hard to get actual stop-motion graphics into the web app
Since the framework is css-driven (doesn't play nice with html5 in general, let alone html5's <canvas> element), you don't get to utilize cool new tools like hype4 (for the life of me the 'iframe' route never seems to work)
I'm not an After Effects professional, so the alternative of more abstracted tools is far more appealing.

Solution & Workflow Assumptions

Here's how I got animations from Lottie's free library into a re-usable angular component using the ngx-lottie package and angular's data / event binding features. Note:

This article assumes you have basic knowledge of JavaScript/TypeScript/Angular (with associated dependencies like Node installed)
For speed, the templates were created utilizing my @riapacheco/yutes package on npm (feel free to use it -- instructions for install is in npm docs)
The code from this demo is on my github, so feel free to fork it: https://github.com/riapacheco/lottie-demo

To learn more about Lottie, read more from their official site!

Skip ahead

Step 1: Add the File from Lottie
Step 2: Create the View Structure and General Style
Step 3: Install Lottie Packages
Step 4: Add the Lottie Animation to Splash Screen Component

Make it Reusable
Reusing in Another Component

Step 1: Add the File from Lottie

Create a new angular app by running the following command (--skip-tests added so that we don't generate tests files with our components):



$ ng new lottie-demo --skip-tests

Head to LottieFiles.com and navigate to their Free Animations section.

Then, choose an animation and download it as the lottie JSON file ( saved this file as 'piggy-bank.json):

Create a folder called 'lottie' inside your 'src/assets' folder and add the file to it:

Step 2: Create the View Structure and General Style

Create a new component ($ ng g c shared/splash-screen) and replace all the content that's in the app.component.html file with the new components selector:



<!-- app.component.html -->
<app-splash-screen></app-splash-screen>

Add the following structural scss to the splash-screen.component.SCSS file:



:host {  
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  position: relative;
}

In the component's template (HTML file), add the following code:



<div class="lottie-animation mt-10">  
  This is where the animation will go.
</div>

<div class="container-sm" style="text-align: center">  
  <div class="splash-text">
    <h1>
      Step 1
    </h1>

    Lorem ipsum dolor sit amet consectetur adipisicing elit. 
    Impedit eligendi obcaecati quisquam molestias animi dolores 
    vitae veniam ut provident repudiandae doloremque quae quo 
    vel, magnam labore eveniet natus fugiat. Aspernatur.  
  </div>

  <div class="button-div mt-3 mb-10">    
    <a class="btn btn-md accent light" style="margin: 1rem;">      
      Previous    
    </a>

    <a class="btn btn-md primary" style="margin: 1rem;">      
      Next    
    </a>  
  </div>
</div>

Note: all the styling classes here are simply classes used from my @riapacheco/yutes package so I wouldn't worry about them

This is how the view will render when you run ng serve:

Step 3: Install Lottie Packages

Install lottie with the following command (more details about this package can be found in their npm docs:



$ npm install lottie-web ngx-lottie

Add the lottie module to your app.module.ts file with an exported function. (note: don't forget to add the CommonModule from @angular/common, so that you can use customized directives)



import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { SplashScreenComponent } from './shared/splash-screen/splash-screen.component';

// Add these two
import { LottieModule } from 'ngx-lottie';
import player from 'lottie-web';

// Export this function
export function playerFactory(): any {  
  return import('lottie-web');
}

@NgModule({  
  declarations: [    
    AppComponent,    
    SplashScreenComponent,    
    StepTwoComponent  
  ],  
  imports: [    
    BrowserModule,    
    AppRoutingModule,    
    CommonModule,
    // Add the module like so:    
    LottieModule.forRoot({ player: playerFactory }),  
  ],  
  providers: [],  
  bootstrap: [AppComponent]
})

export class AppModule { }

Step 4: Add the Lottie Animation to Splash Screen Component

In the splash-screen.component.TS file, you have to add a variable that binds lottie's AnimationOptions (to reference the file path of your JSON file), and a new function that binds to the event (we'll see later in the template HTML file):



export class SplashScreenComponent implements OnInit {

  // This is the option that uses the package's AnimationOption interface  
  options: AnimationOptions = {    
    path: '/assets/lottie/piggy-bank.json'  
  };  

  constructor() { }  

  ngOnInit(): void {  }

  // This is the component function that binds to the animationCreated event from the package  
  onAnimate(animationItem: AnimationItem): void {    
    console.log(animationItem);  
  }
}

Now in your template HTML file, you can replace the dummy text with the <ng-lottie> element and bind the options variable and the onAnimate event:



<!--splash-screen.component.html-->
<div class="lottie-animation mt-10">
  <ng-lottie
    [options]="options" 
    (animationCreated)="onAnimate($event)">
  </ng-lottie>
</div>

<!--...more code...-->

Now when we run ng serve in our terminal, we'll see the animation appear in the browser:

Make it Reusable

You can make this component re-usable with Angular's @Input() and @Outputs() so that parent components in the future can feed data or recognize events.

Prepare the component by adding @Input() to the options variable (making it available to other component) and by adding new variables to represent the text rendered in the component. If we want to communicate that a click event happened to the parent, we add @Output() to a variable that emits the event like so:



// splash-screen.component.ts
export class SplashScreenComponent implements OnInit {  

  @Input() options: AnimationOptions = {
    path: '/assets/lottie/piggy-bank.json'  
  };  
  @Input() titleText = 'Step 1';  
  @Input() stepParagraph = 'Lorem ipsum blah blah blah';  
  @Input() secondaryButtonText = 'Previous';  
  @Input() primaryButtonText = 'Next';  
  @Output() animationCreated = new EventEmitter();
  @Output() secondaryClick = new EventEmitter();  
  @Output() primaryClick = new EventEmitter();  

  constructor() { }  

  ngOnInit(): void {  }  

  onAnimate(animationItem: AnimationItem): void {   
    console.log(animationItem);    
    this.animationCreated.emit(animationItem);  
  }  

  onSecondaryClick(clickedSecondaryEvent): void {    
    this.secondaryClick.emit(clickedSecondaryEvent);
  }

  onPrimaryClick(clickedPrimaryEvent): void {    
    this.primaryClick.emit(clickedPrimaryEvent);  
  }
}

Then we just bind the data from the component to the template with either square brackets (on an element) or curly braces for actual string interpolation; or we bind events using parenthesis on elements:



<!--splash-screen.component.html-->
<div class="lottie-animation mt-10">
  <ng-lottie
    [options]="options" 
    (animationCreated)="onAnimate($event)">
  </ng-lottie>
</div>

<div
  class="container-sm"
  style="text-align: center">
  <div class="splash-text">
    <h1>      
      {{ titleText }}    
    </h1>    
    {{ stepParagraph }}  
  </div>
  <div
    class="button-div mt-3 mb-10">
    <a 
      class="btn btn-md accent light" 
      style="margin: 1rem;" 
      (click)="onSecondaryClick($event)">      
        {{ secondaryButtonText }}    
    </a>

    <a 
      class="btn btn-md primary" 
      style="margin: 1rem;" 
      (click)="onPrimaryClick($event)">      
        {{ primaryButtonText }}    
    </a>
  </div>
</div>

This then renders like this (notice the new words from the component template):

Reusing in Another Component

To show how we re-use this component, add another free animation to the assets/lottie folder we created earlier. I've added one and named it chat.json.

Create a new component called step-two by running the command $ ng g c views/step-two in your terminal

Note: For the sake of this demo we're pretending that we want to re-use the component by adding it to a newly generated component for every step of an onboarding process. This isn't advised (adds more work and lots more files than needed). Usually, you'd want to programmatically make it so variables change when items are clicked but stay within the same component. If you need help on how to do that just email me.

So that we can see the component in the browser, remove the contents of the app.component.html file (which is the splash-screen selector element) and replace it with the newly created step-two component's element:



<!--app.component.html-->
<app-step-two></app-step-two>

Now you should see "step two works!" in your screen if you run ng serve which is the default text that comes with a component. Replace this text with the splash-screen selector element so that you instead see the original component we created:



<!--step-two.component.html-->
<app-splash-screen></app-splash-screen>

To get access to the splash-screen component's inputs (without coming up errors at first) we'll create the variables inside the parent step-two component. The new 'stepTwoOptions' variable is now referencing the new 'chat.json' animation instead of the original. Notice that there aren't any input decorators or anything like that, since parent components shouldn't really know that a child component exists:



import { Component, OnInit } from '@angular/core';
import { AnimationOptions } from 'ngx-lottie';

@Component({  
  selector: 'app-step-two',  
  templateUrl: './step-two.component.html',  
  styleUrls: ['./step-two.component.scss']
})

export class StepTwoComponent implements OnInit { 
  stepTwoOptions: AnimationOptions = {    
    path: '/assets/lottie/chat.json'  
  };  
  stepTwoTitle = 'Step 2';  
  stepTwoParagraph = 'This is the second step of your stuff!';  

  constructor() { }  
  ngOnInit(): void {  }  

  clickNext(clickEvent): void {    
    console.log(clickEvent);  
  }
}

So now, to link the variables together, we just need to bind the variables (like a ratio) to the splash-screen selector. In Angular, all square brackets represent data binding, and any parenthesis represent event binding:



<!-- step-two.component.html -->
<app-splash-screen
  [options]="stepTwoOptions"  
  [titleText]="stepTwoTitle"  
  [stepParagraph]="stepTwoParagraph"  
  [secondaryButtonText]="'Cancel'"  
  [primaryButtonText]="'Save'"  >
</app-splash-screen>

Notice that the button texts don't actual bind to anything and I just added a string directly inside the template.

Together, this component renders like this:

Ria

Custom/Reusable Toggle Component (with Angular Animations)

Ria Pacheco — Sat, 30 Apr 2022 04:18:44 +0000

Had to create a toggle recently from scratch and, given the features that come with Angular, it was super easy and fast to do. Thought I'd share.

Workflow

Create a starting toggle with two divs that layer on themselves using SCSS/CSS
Add animation to the toggle using Angular Animations package
Change the toggle background color, based on current toggle state
Emit state to parent component

Jump ahead

Creating a Starting Toggle
Using Angular Animations Instead of CSS
- Add BrowserAnimationsModule
- Add an Animation Trigger to Template File
- Animation State Behavior
Add Click Event
Full Code
- Toggle SCSS File
- Toggle Template File
- Toggle Component File
- Parent Template File
- Parent Component File

Create a Starting Toggle

First, to drive the behaviour of the toggle, add a state property to the actual component:

// toggle.component.ts
export class ToggleComponent implements OnInit {  
toggleOn = false;  
...
}

In the template, add a container div, an inner div (to act as the background color), and an inner-inner div to act as the actual toggle square:

<!--toggle.component.html-->
<a class="toggle-container">
  <div class="toggle-bg">
    <div class="toggle"></div>  
  </div>
</a>

To get a div to appear over another div (and stay within that behind div's boundaries), you'll want to make the give the background div's position: relative and the foreground div's position: absolute. Remember that absolute only works when you've added a x and y axis keys like this:

@import '~./src/app/scss/colors.scss';

.toggle-bg {  
  display: inline-block;  
  height: 1rem;  
  width: 2rem;  
  background-color: $accent-color;  
  border-radius: 3px;  
  position: relative;

  .toggle {    
    width: 1rem;    
    display: inline-block;    
    background-color: white;    
    position: absolute;    
    left: 0.01rem;    
    top: 0;    
    bottom: 0;    
    margin: 0.1rem;    
    border-radius: 3px;    
    box-shadow: 2px 2px 12px #00000050;  
  }
}

.toggle-on {
  background-color: $primary-color;
}

Notice that I only referred to a state change of color (no animations). We'll add this later.

Using Angular Animations Instead of CSS

I like using Angular Animations since (like most of their features) they're state-driven instead of just being event driven. If we just track a click event, there might be a case where the click order gets out of sync and 'on' might not mean 'on' anymore.

Add BrowserAnimationsModule

In you app.module.ts file add

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({  
  declarations: [...],  
  imports: [
    ...
    BrowserAnimationsModule
  ],  
  providers: [...],  
  bootstrap: [AppComponent]
})

Add an Animation Trigger to Template File

In your toggle.component.html file, add a trigger by adding [@] to the element you want to animate (in this case, the toggle that moves). This is followed by a ternary operator that takes the state property we created earlier (toggleOn = false;) and provides an 'if/else' outcome based on that property's condition:

<!--toggle.component.html-->
<a class="toggle-container">
  <div class="toggle-bg">    
    <div 
      [@toggleTrigger]="toggleOn ? 'on' : 'off'" 
      class="toggle">
    </div>
  </div>
</a>

This means: if toggleOn is true, then the state of this animation is on, else the state of this animation is off.

Animation State Behavior

Now we apply the behaviours that happen when the toggle is 'on' or 'off' in the actual component.

First we import the animation functions from the @angular/animations package (kind of annoying but whatever)
Then we add the animation trigger, states, and behaviour (with styles) to the actual component metadata

import { Component, OnInit } from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';

@Component({  
  selector: 'app-toggle',  
  templateUrl: './toggle.component.html',  
  styleUrls: ['./toggle.component.scss'],  
  animations: [
    // First we add the trigger, which we added to the element in square brackets in the template    
    trigger('toggleTrigger', [
    // We define the 'off' state with a style -- translateX(0%), which does nothing      
    state('off', style({ transform: 'translateX(0%)' })),
    // We define the 'on' state with a style -- move right (on x-axis) by 70%      
    state('on', style({ transform: 'translateX(70%)' })),
    // We define a transition of on to off (and vice versa) using `<=>`      
    transition('on <=> off', [
    // We add the time (in milliseconds) and style of movement with `animate()`        
    animate('120ms ease-in-out')      
    ])    
  ])  
]})

Add Click Event

Because we want to be able to track if the state is either 'on' or 'off' in the future, we won't want to use a simple (click)="toggleOn = !toggleOn". Instead, we'll create a new function called toggleClick() which will do two things:

Based on the current state of the toggle, be able to switch it from on to off and vice versa
Emit the actual state with a string to any parent component using it

To do this, we want to import the @Output() property and the EventEmitter method to the component from @angular/core

// toggle.component.ts
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';

We add this to the component class, and name the EventEmitter so that we have something to emit values in the first place. We also want to add @Input() property to the toggleOn property so that a parent can access it:

export class ToggleComponent implements OnInit {  
@Input() toggleOn = false;  
@Output() toggledTo = new EventEmitter();
...
}

Then we add a conditional function which will trigger the toggling of on and off, and send its states to the parent component:

export class ToggleComponent implements OnInit {  
@Input() toggleOn = false;  
@Output() toggledTo = new EventEmitter();  

constructor() { }  

ngOnInit(): void {  }

// We will have the `toggleTo` EventEmitter emit a string  toggleClick(): any {    
  if (this.toggleOn) {      
    this.toggleOn = false;      
    this.toggledTo.emit('off');    
  } else {      
      this.toggleOn = true;      
      this.toggledTo.emit('on');    
    }  
  }
}

Also, since the state is now rigidly defined, we can add a conditional [ngClass] to the toggle-bg div, so that it knows to add the class 'toggle-on' when the state is toggleOn and consequently change the background color (as in the SCSS file).

<a 
  class="toggle-container" 
  (click)="toggleClick()">  

  <div
    [ngClass]="toggleOn ? 'toggle-bg toggle-on' : 'toggle-bg'">    
    <div [@toggleTrigger]="toggleOn ? 'on' : 'off' " class="toggle">
    </div>  
  <div>
</a>

Again, the boys at Angular love ternary operators -- which is great. So with [ngClass], we're saying that IF the state is toggleOn (true), then use the classes toggle-bg toggle-on ELSE just use toggle-bg.

Now you can add it to a parent component and create a function within that parent which will catch the emitted value:

<!--parent.component.html-->
<app-toggle (toggleTo)="onToggleClick($event)"></app-toggle>

// parent.component.ts
export class ParentComponent implements OnInit {
...  

onToggleClick(value): void {    
  console.log(value);
  // will print 'on' or 'off' depending on state  
  }

Full Code

Toggle SCSS File

toggle.component.scss

@import '~./src/app/scss/colors.scss';

.toggle-bg {  
  display: inline-block;  
  height: 1rem;  
  width: 2rem;  
  background-color: $accent-color;  
  border-radius: 3px;  
  position: relative;

  .toggle {    
    width: 1rem;    
    display: inline-block;    
    background-color: white;    
    position: absolute;    
    left: 0.01rem;    
    top: 0;    
    bottom: 0;    
    margin: 0.1rem;    
    border-radius: 3px;    
    box-shadow: 2px 2px 12px #00000050;  
  }
}

.toggle-on {
  background-color: $primary-color;
}

Toggle Template File

toggle.component.html

<a 
  class="toggle-container" 
  (click)="toggleClick()">  
  <div
    [ngClass]="toggleOn ? 'toggle-bg toggle-on' : 'toggle-bg'">    
    <div [@toggleTrigger]="toggleOn ? 'on' : 'off' " class="toggle"></div>  
  </div>
</a>

Toggle Component File

toggle.component.ts

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';

@Component({  
  selector: 'app-toggle',  
  templateUrl: './toggle.component.html',  
  styleUrls: ['./toggle.component.scss'],  
  animations: [    
    trigger('toggleTrigger', [      
      state('off', style({ transform: 'translateX(0%)' })),      
      state('on', style({ transform: 'translateX(70%)' })),      
      transition('on <=> off', [        
        animate('120ms ease-in-out')      
      ])    
    ])  
]})

export class ToggleComponent implements OnInit {  
@Input() toggleOn = false;  
@Output() toggledTo = new EventEmitter();  

constructor() { }  

ngOnInit(): void {  }  

toggleClick(): any {    
  if (this.toggleOn) {      
    this.toggleOn = false;      
    this.toggledTo.emit('off');    
  } else {      
    this.toggleOn = true;      
    this.toggledTo.emit('on');    
  }  
}}

Parent Template File

parent.component.html

<app-toggle (toggledTo)="onEditorToggle($event)"></app-toggle>

Parent Component File

parent.component.ts

export class ParentComponent implements OnInit {  

  constructor() { }  

  ngOnInit(): void {  }

  onEditorToggle(value): void {
    console.log(value);  
  }
}