File
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| selector |
checkout-success-message-dialog-ui |
| styleUrls |
./checkout-success-message-dialog-ui.component.scss |
| templateUrl |
./checkout-success-message-dialog-ui.component.html |
Outputs
|
onClose
|
Type : EventEmitter<any>
|
|
|
import { Component, Output, EventEmitter, Input, ChangeDetectionStrategy } from "@angular/core"
import { User } from '../../../checkout-data/models/user.model'
@Component({
selector: 'checkout-success-message-dialog-ui',
templateUrl: './checkout-success-message-dialog-ui.component.html',
styleUrls: ['./checkout-success-message-dialog-ui.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class CheckoutSuccessMessageDialogUiComponent {
@Input() user: User
@Input() numberOfBooks: number
@Input() pickUpTime: Date
@Output() onClose: EventEmitter<any> = new EventEmitter<any>()
}
<modal (onClose)="onClose.emit()">
<p>
Thank you {{user?.name}} for checking out {{ numberOfBooks }} book{{ numberOfBooks > 1 ? 's' : ''}}!
</p>
<p class="tiny-top-margin">
{{ numberOfBooks > 1 ? 'They\'ll' : 'It will'}} be ready for you to pick up at <b>{{ pickUpTime | date:'shortTime' }}</b>
</p>
</modal>
.tiny-top-margin {
margin-top: 1rem;
}
Legend
Html element with directive