Angular Library

Step 1: Setup connection to Azure DevOps feed

Inside Azure DevOps, navigate to

1. Artifacts
2. Select PPG in the dropdown
3. Click Connect to Feed
4. Click npm
5. Follow the instructions for your operating system

Note: When copying the URL in the Connect to Feed step, make sure to remove %40Local from the URL if Azure DevOps has appended it. This doesn't always happen but it will prevent the authentication step from working if %40Local is in the URL.

Step 2: Install Primer

Primer has two options for installation. You may use ng add or manually install. Using ng add is recommended because it's one click install.

Note: If you receive an error message ...reason: unable to get local issuer certificate during install, refer to the DevOps at PPG project and find the wiki page SSL or TLS issues accessing ADO (or other systems) from developer tools.

Using ng add

Run the following command in your project:

ng add @primer/angular-components@latest

This will update your project and install a default theme automatically.

Advanced Usage

The ng add command accepts a few parameters to modify the default Primer install

ng add @primer/angular-components@latest --theme brandless --module shared

Manual Install

Step 1: Install Primer Angular Components

Install @primer/angular-components in your project by running the following command:

npm install @primer/angular-components

Step 2: Install Primer Theme

Primer CSS is installed through a separate package so it can be used in other frameworks with a single code base. To install a theme run the following command:

npm install @primer/theme-ppg

Step 3: Install Primer Icons

Primer Icons are installed through a separate package so they can be used in other frameworks with a single code base.

npm install @primer/icons

Note: you can install multiple packages with a single command in node. For example:
npm install @primer/angular-components @primer/theme-ppg @primer/icons

Step 4: Reference Primer's icons and Theme

Add a reference for Primer's icons and Theme in the angular.json:

{
"architect": {
    "build": {
        ...
        "assets": [
            ...
            {
                "glob": "pmr-icons.svg",
                "input": "node_modules/@primer/icons",
                "output": "assets"
            }
        ],
        "styles": [
          {
            "input": "node_modules/@primer/theme-ppg/primer-angular.min.css"
          },
          ...
        ],
    ...
}

Step 5: Include PrimerModule

Include PrimerModule in the app.module.ts file:

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

Use Primer Angular Components

Now you can reference Primer Angular Components in your application's template files in the following way:

<pmr-button
  variant="primary"
  text="Click me"
  (click)="handleOnClick($event)"
></pmr-button>

Help and Support

You're now set up to use Primer Angular Components in your project. If you have questions or need help, please visit the Primer in Teams for assistance.