Install SwiftWC in an Angular project

How to install dependencies and structure your Angular app.

Create your project

npx ng new about-me
cd about-me

Install SwiftWC

angular CLI

ng add @swiftwc/ui@latest @phosphor-icons/web @fontsource/inter

npm

npm i @swiftwc/ui@latest @phosphor-icons/web @fontsource/inter

bun

bun add --exact @swiftwc/ui@latest --dev

3. Import the stylesheet

Add an @import to your CSS file for SwiftWC:

app.css

@import '@swiftwc/ui/css';

Prioritize CSS layers

Add all sw-* layers after other base rules. For example, Tailwind CSS applies global margin, padding, and border resets accross the page using a base @layer.

To properly install SwiftWC, add a @layer rule at the begining of your stylesheet and move all other base layers at the begining, then follow with all the SwiftWC layers, and finally add any other layers you need, for example Tailwind requires 3 more layers.

Your styles file should look like this:

app.css

/* Ember supports plain CSS out of the box. More info: https://cli.emberjs.com/release/advanced-use/stylesheets/ */
@import 'tailwindcss';

@layer base, sw, components, utilities, theme;

4. Import the Client module

Add an import to your JavaScript file that imports SwiftWC client module:

app.ts

import '@swiftwc/ui/client'

5. Start your build process

npm start

Start using SwiftWC web components in your project

src/app/app.html

<v-keyboard system-font="Inter"></v-keyboard>

<navigation-stack>
  <scroll-view>
    <v-stack>
      <button is="borderless-button" type="button">
        <label-view title="Hello world" system-image="hand-waving" (click)="handleClick($event)"></label-view>
      </button>
    </v-stack>
  </scroll-view>
  <router-outlet />
</navigation-stack>

src/app/app.routes.ts

import { Routes } from '@angular/router'
import { AboutComponent } from './about.component'

export const routes: Routes = [
  {
    path: 'about',
    component: AboutComponent,
  },
]

src/app/app.ts

import { CUSTOM_ELEMENTS_SCHEMA, Component, signal } from '@angular/core'
import { RouterOutlet } from '@angular/router'
import { startViewTransition } from '@swiftwc/ui/client'
import { Router } from '@angular/router'

@Component({
  imports: [RouterOutlet],
  selector: 'body',
  styleUrl: './app.css',
  templateUrl: './app.html',
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class App {
  protected readonly title = signal('about-me')

  constructor(private router: Router) {}

  async handleClick(event: Event) {
    await startViewTransition(event.target as HTMLElement, 'forwards', async () => {
      await this.router.navigate(['/about'])
    })
  }
}

src/app/about.component.ts

import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core'
import { Router } from '@angular/router'
import { startViewTransition } from '@swiftwc/ui/client'

@Component({
  selector: 'content-view',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <scroll-view>
      <v-stack>
        <button is="borderless-button" type="button">Back</button>
      </v-stack>
    </scroll-view>
    <tool-bar>
      <tool-bar-item slot="top-bar-leading">
        <button type="button" tabindex="0" (click)="handleClick($event)">
          <label-view system-image="caret-left"></label-view>
        </button>
      </tool-bar-item>
    </tool-bar>
  `,
})
export class AboutComponent {
  constructor(private router: Router) {}

  async handleClick(event: Event) {
    await startViewTransition(event.target as HTMLElement, 'backwards', async () => {
      await this.router.navigate(['/'])
    })
  }
}