projects/ng-snotify/src/lib/components/prompt/prompt.component.ts
| changeDetection | ChangeDetectionStrategy.OnPush |
| encapsulation | ViewEncapsulation.None |
| selector | ng-snotify-prompt |
| templateUrl | ./prompt.component.html |
Properties |
Inputs |
| toast | |
Type : SnotifyToast
|
|
|
Get PROMPT placeholder |
|
| isPromptFocused |
Default value : false
|
|
Is PROMPT focused |
import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
import { SnotifyToast } from '../../models/snotify-toast.model';
@Component({
selector: 'ng-snotify-prompt',
templateUrl: './prompt.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
})
/**
* Prompt component. Part of PROMPT type
*/
export class PromptComponent {
/**
* Get PROMPT placeholder
*/
@Input() toast: SnotifyToast;
/**
* Is PROMPT focused
*/
isPromptFocused = false;
}
<span class="snotifyToast__input" [ngClass]="{ 'snotifyToast__input--filled': isPromptFocused }">
<input
(input)="toast.value = $event.target.value; toast.eventEmitter.next('input')"
autofocus
class="snotifyToast__input__field"
type="text"
[id]="toast.id"
(focus)="isPromptFocused = true"
(blur)="isPromptFocused = !!toast.value.length"
/>
<label class="snotifyToast__input__label" [for]="toast.id">
<span class="snotifyToast__input__labelContent">{{ toast.config.placeholder | truncate }}</span>
</label>
</span>