Installation / Getting Started

To use the PCPS Material Dialogs library in your own project, you must be using Angular 19+ along with Angular Material 19+. Follow these steps to incorporate the library into your own application:

• Add the library to your package.json:

npm install @polk_county_public_schools/ngx-pcps-dialogs

• Define a theme for your application. You may do this using the angular.json file by importing a predefined Angular Material M3 theme CSS file, or by using your styles.scss file to specify the theme directly. For instance:

html {
    color-scheme: light dark;
    @include mat.theme(
        (
            color: (
                primary: mat.$azure-palette,
                tertiary: mat.$blue-palette,
                theme-type: color-scheme,
            ),
            typography: Roboto,
            density: 0,
        )
    );
}

• Ensure that your application is loading the Roboto font as recommended by Google:

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">

Using Dialogs

To use any specific dialog, first import the necessary related module into your standalone component or module:

import { ConfirmationDialogModule } from '@polk_county_public_schools/ngx-pcps-dialogs/confirmation';

Next, inject the related service into your component:

protected readonly confDlgSvc = inject(ConfirmationDialogService);

Last, call the service's Open() method, supplying the options in the call:

this.confDlgSvc.Open({
    TitleText: 'A dialog title',
    MessageText: 'This is message text.',
    OKText: 'Done'
});