### File

`src/lib/confirm/confirm.component.ts`

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
selector | `rxap-confirm`
imports | `MatButtonModule` `MatIconModule`
styleUrls | `./confirm.component.scss`
templateUrl | `./confirm.component.html`

### Outputs

confirmed
Type : `EventEmitter`
Defined in src/lib/confirm/confirm.component.ts:20

unconfirmed
Type : `EventEmitter`
Defined in src/lib/confirm/confirm.component.ts:23

    import {
      ChangeDetectionStrategy,
      Component,
      EventEmitter,
      Output,
    } from '@angular/core';
    import { MatButtonModule } from '@angular/material/button';
    import { MatIconModule } from '@angular/material/icon';

    @Component({
        selector: 'rxap-confirm',
        templateUrl: './confirm.component.html',
        styleUrls: ['./confirm.component.scss'],
        changeDetection: ChangeDetectionStrategy.OnPush,
        imports: [MatButtonModule, MatIconModule]
    })
    export class ConfirmComponent {

      @Output()
      public confirmed = new EventEmitter<void>();

      @Output()
      public unconfirmed = new EventEmitter<void>();

    }

    <div class="rxap-container shadow-lg hover:shadow-xl flex flex-row gap-1">
      <button (click)="confirmed.emit()" class="accept" mat-icon-button type="button">
        <mat-icon>done</mat-icon>
      </button>
      <button (click)="unconfirmed.emit()" class="decline" mat-icon-button type="button">
        <mat-icon>clear</mat-icon>
      </button>
    </div>

`./confirm.component.scss`

    .rxap-container {
      border-radius: 8px;
      padding: 4px;
      background-color: var(--background-color, white);

      .accept {
        color: var(--accept-color, rgb(115, 190, 105));
      }

      .decline {
        color: var(--decline-color, rgb(204, 73, 51));
      }
    }

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""