f6adc0c3f9
Update `tsconfig[.*].json`. Also, all make necessary changes to ensure the example apps can be successfully built with the new, stricter type-checking options. PR Close #36015
55 lines
1.2 KiB
TypeScript
55 lines
1.2 KiB
TypeScript
import { Component, EventEmitter, Input, Output } from '@angular/core';
|
|
import { animate, state, style, transition, trigger } from '@angular/animations';
|
|
|
|
@Component({
|
|
selector: 'my-popup',
|
|
template: `
|
|
<span>Popup: {{message}}</span>
|
|
<button (click)="closed.next()">✖</button>
|
|
`,
|
|
host: {
|
|
'[@state]': 'state',
|
|
},
|
|
animations: [
|
|
trigger('state', [
|
|
state('opened', style({transform: 'translateY(0%)'})),
|
|
state('void, closed', style({transform: 'translateY(100%)', opacity: 0})),
|
|
transition('* => *', animate('100ms ease-in')),
|
|
])
|
|
],
|
|
styles: [`
|
|
:host {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: #009cff;
|
|
height: 48px;
|
|
padding: 16px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-top: 1px solid black;
|
|
font-size: 24px;
|
|
}
|
|
|
|
button {
|
|
border-radius: 50%;
|
|
}
|
|
`]
|
|
})
|
|
export class PopupComponent {
|
|
state: 'opened' | 'closed' = 'closed';
|
|
|
|
@Input()
|
|
set message(message: string) {
|
|
this._message = message;
|
|
this.state = 'opened';
|
|
}
|
|
get message(): string { return this._message; }
|
|
_message: string;
|
|
|
|
@Output()
|
|
closed = new EventEmitter();
|
|
}
|