ndb-core documentation
  1. Components
  2. HintBoxComponent
src/app/core/common-components/hint-box/hint-box.component.ts

Index

Inputs

Inputs

type
Type : "info" | "warning"
Default value : "info"
Defined in src/app/core/common-components/hint-box/hint-box.component.ts:11
 
import { Component, ChangeDetectionStrategy, input } from "@angular/core";

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: "app-hint-box",
  imports: [],
  templateUrl: "./hint-box.component.html",
  styleUrl: "./hint-box.component.scss",
})
export class HintBoxComponent {
  type = input<"info" | "warning">("info");
}

<div class="hint-banner" [class.warning]="type() === 'warning'">
  <ng-content></ng-content>
</div>

./hint-box.component.scss 

@use "@angular/material/core/style/elevation" as mat-elevation;

.hint-banner {
  background: #e8e8e8;
  padding: 1em;
  margin-bottom: 1em;
  border-radius: 4px;
  @include mat-elevation.elevation(1);
}

.warning {
  background: #fff3e0;
  border-inline-start: 4px solid #f57c00;
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""