realtomaszkula

export class GradientButtonComponent implements AfterViewInit {
  // ...
  gradientRadius: number;

  constructor(public el: ElementRef<HTMLElement>) {}

  ngAfterViewInit() {  
    this.gradientRadius = this.el.nativeElement.getBoundingClientRect().width;
  }
}

realtomaszkula

export class GradientButtonComponent {
  isGradientVisible = false;
  gradientTop: number;
  gradientLeft: number;

  constructor(public el: ElementRef<HTMLElement>) {}

  @HostListener('mouseenter')
  onMouseEnter() {
    this.isGradientVisible = true;

realtomaszkula

// create the animation
const myAnimation = animation('{{ timings }}', []);

// consume the animation
trigger('myTrigger', 
  transition('* => *',
    useAnimation(myAnimation, { params: { timings: 200 } })
  )
);

realtomaszkula

@Component({
  selector: 'app-counter-bubble',
  template: `+{{counter}}`,
  animations: [
    trigger('visibilityChange', [
      transition(':enter', [
        useAnimation(slideInAnimation, {
          params: { from: '20%', timings: '200ms ease-in' }
        })
      ]),

realtomaszkula

@Component({
  selector: 'app-clap-fab',
  template: `<i class="material-icons">pan_tool</i>`,
  animations: [
    trigger('counterChange', [
      transition(
        ':increment',
        useAnimation(pulseAnimation, {
          params: {
            timings: '400ms cubic-bezier(.11,.99,.83,.43)',

realtomaszkula

export const pulseAnimation = animation([
  style({ transform: 'scale(1)' }),
  animate(
    '{{ timings }}',
    keyframes([
      style({ transform: 'scale(1)', offset: 0 }),
      style({ transform: 'scale({{ scale }})', offset: 0.5 }),
      style({ transform: 'scale(1)', offset: 1 })
    ])
  )

realtomaszkula

export const slideInAnimation = animation([
  style({ transform: 'translateY({{ from }})', opacity: 0 }),
  animate('{{ timings }}', style({ transform: 'translateY(0)', opacity: 1 }))
]);

export const slideOutAnimation = animation([
  animate(
    '{{ timings }}',
    style({ transform: 'translateY({{ to }})', opacity: 0 })
  )

realtomaszkula

@Directive({
  selector: '[appValidationBorder]'
})
export class ValidationBorderDirective {
  private readonly colors: {
    VALID: string;
    INVALID: string;
    PENDING: string;
    DISABLED: string;
  };

realtomaszkula

@NgModule({
  imports: [
    ValidationBorderModule.forRoot({
      borderStyle: 'solid',
      borderWidth: '3px',
      colors: {
        VALID: 'green',
        INVALID: 'red',
        PENDING: 'yellow',
        DISABLED: 'silver'

realtomaszkula

  constructor(
    @Self() private ngControl: NgControl,
    @Inject(VALIDATION_BORDER_CONFIG) config: ValidationBorderConfig
  ) {
    this.colors = config.colors;
    this.borderWidth = config.borderWidth;
    this.borderStyle = config.borderStyle;
  }