Using PatternFly Elements (web components) in your Angular App

To get web components to work with Angular, there are a few steps that we need to take. If you’d like to follow along, go ahead and create a new Angular CodeSandbox on codesandbox.io. The Angular sandbox uses the angular-cli to scaffold an app and you can view your changes in real-time right in the web app. With CodeSandbox, you can also add any npm dependency with just a few button clicks. If you want to run this app locally, you can clone the repository on GitHub.

“Using PatternFly Elements in your Angular App” is broken down into four sections

• Initial setup
• Adding PatternFly Elements (web components)
• Interacting with our web components API
• Adding icing on the cake

Each section will show you exactly what you need to do with code snippets and an accompanying CodeSandbox that you can edit or fork.

Initial setup

First, we need to import the CUSTOM_ELEMENTS_SCHEMA to our app. The CUSTOM_ELEMENTS_SCHEMA allows us to use custom element tags in our application. In the /src/app/ directory, open up the app.module.ts file and update the second import statement to the following.

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";

Then we need to add a schemas array in the NgModule declaration with[CUSTOM_ELEMENTS_SCHEMA] as the value.

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

Next, we need to add the web component polyfills to the polyfills.ts file at the root of our application. If we were building this app locally, we’d want to install the web components polyfills from npm.

npm install --save @webcomponents/webcomponentsjs

But if you’re using CodeSandbox, you can just expand the dependencies menu in the Explorer region on the left side of the page, click “Add Dependency”, search for “@webcomponents/webcomponentsjs”, and click on the result of the search. After the dependency is installed, add these two lines at the bottom of the polyfills.ts file in the /src/ directory.

import "@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js";
import "@webcomponents/webcomponentsjs/webcomponents-loader.js";

Adding PatternFly Elements (web components)

With the setup complete, let’s add a couple of PatternFly Elements web components to our application to make sure everything is hooked up properly. We’re going to add a card (pfe-card) and a call-to-action button (pfe-cta). Later, we’ll add an accordion (pfe-accordion) and some CSS to help with our layout (pfe-layouts).

Once again, if we were building this app locally, we’d install our dependencies from npm.

npm install @patternfly/pfe-card @patternfly/pfe-cta

But if you’re using CodeSandbox, just search for “@patternfly/pfe-card” and “@patternfly/pfe-cta”.

In our app.component.ts file in the /src/app/ directory, let’s add the import statements for our components to the top of the file.

import { Component } from "@angular/core";
import "@patternfly/pfe-card";
import "@patternfly/pfe-cta";

Let’s add some simple markup to our app.component.html file to see that our pfe-card and pfe-cta are working.

Below is the accompanying CodeSandbox to see that our initial setup is correct and that we’ve successfully added our web components to our app.

Now that we have a card and a call-to-action, let’s add an accordion (pfe-accordion) to our app to spice things up a bit. If we were building this app locally, we’d install our dependencies from npm.

npm install --save @patternfly/pfe-accordion

If you’re using CodeSandbox, just search for “@patternfly/pfe-accordion”.

After installing pfe-accordion, add the markup to app.component.html.

And we have to import pfe-accordion in app.component.ts.

import { Component } from "@angular/core";
import "@patternfly/pfe-card";
import "@patternfly/pfe-cta";
import "@patternfly/pfe-accordion";

Below is the accompanying CodeSandbox for adding pfe-accordion to our app.

Interacting with our web components API

After adding our accordion, let’s say that we’d like to have the first panel of the accordion open up after the page loads. To work with the accordion, there are a few things that we need to hook up.

First, in the markup for our accordion, we need to add an id so we have something to reference in our component’s code. In the app.component.html file, add the “#accordion” id to the pfe-accordion.

<pfe-accordion #accordion>

Second, we need to get a reference to the accordion in app.component.ts. We do this by importing ViewChild and ElementRef into our component. The import statements at the top of the file should look like this.

import { Component, ViewChild, ElementRef } from "@angular/core";
import "@patternfly/pfe-card";
import "@patternfly/pfe-cta";
import "@patternfly/pfe-accordion";

Finally, we update the AppComponent class to include a reference to our accordion and we use the ngAfterViewInit lifecycle callback to call the toggle method on the accordion.

export class AppComponent {
  @ViewChild("accordion") accordion: ElementRef;
  ngAfterViewInit() {
    this.accordion.nativeElement.toggle(0);
  }
}

Now, when the page loads, the accordion will have the first panel opened. Below is the accompanying CodeSandbox.

Adding icing on the cake

Right now our app has a single card (pfe-card) with a call-to-action (pfe-cta) link inside it. Beneath that, we have an accordion (pfe-accordion) with the first panel opening after the page loads. Let’s make things look a bit nicer by adding in a few more cards and a grid for layout (pfe-layouts).

We’ll start by installing pfe-styles, which includes pfe-layouts, into our app. If we were building this app locally, we’d install our dependencies from npm.

npm install --save @patternfly/pfe-styles

If you’re using CodeSandbox, search for “@patternfly/pfe-styles”.

Next, in the root of our app, we’ll add a reference to the pfe-layouts css in the .angular-cli.json file in the styles array.

{
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": ["assets", "favicon.ico"],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "prefix": "app",
      "styles": [
        "styles.css",
        "node_modules/@patternfly/pfe-styles/dist/pfe-layouts.min.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ]
}

Finally, we’ll add the classes we need in our section of cards in the app.component.html file so we have three cards across on screens wider than or equal to 992px, two cards across on screens wider than or equal to 576px, and one card across on smaller screens.

<div class="pfe-l-grid pfe-m-gutters pfe-m-all-12-col-on-xs pfe-m-all-6-col-on-sm pfe-m-all-4-col-on-lg">
   ... cards are in here
</div>

If all of the classes above look confusing and don’t make any sense, don’t worry about it. We’ll write a post that explains how to use pfe-layouts. If you’re still curious check out pfe-layouts to getter a better understanding of the classes above.

The end result of adding pfe-layouts and a grid is in the CodeSandbox below.

I realize that may have been a lot. So let’s recap what we did.

1. Initial Setup: Added support for web components to our app by adding the CUSTOM_ELEMENTS_SCHEMA schema to the NgModule declaration
2. Initial Setup: Added the web component polyfills
3. Adding PatternFly Elements (web components): Added the following web components as dependencies in our app: pfe-card, pfe-cta, and pfe-accordion
4. Adding PatternFly Elements (web components): Imported the web components into our app.component.ts file
5. Adding PatternFly Elements (web components): Added the markup for our components in app.component.html
6. Interacting with our web components API: Created a reference to the accordion so we could open the first panel after the page loads
7. Adding icing on the cake: Added pfe-layouts to create a grid for our cards

Wrap up

So there you have it. We’ve added web components to our Angular app and gained the benefits of using portable, pre-made components that can also be used in other frameworks like React and Vue. If your app is written in React or Vue, check out our other two posts: “Using PatternFly Elements in your React App” and “Using PatternFly Elements in your Vue App.”