realtomaszkula

@Component({
  selector: 'app-carousel',
  template: `...`
})
export class CarouselComponent {
  @Input() autoplay: boolean;
}

realtomaszkula

<app-carousel [autoplay]="true"></app-carousel>

realtomaszkula

<app-carousel autoplay></app-carousel>

realtomaszkula

<app-counter value="10" tick="5"></app-counter>

realtomaszkula

private _value: number;
get value(): number {
  return this._value;
}
@Input()
set value(value: number) {
  this._value = coerceNumberProperty(value, 0);
}

private _tick: number;

realtomaszkula

@Component({
  selector: 'app-counter',
  template: `...`,
})
export class CounterComponent {
  @Input() value: number;
  @Input() tick: number;

  decrement() {
    this.value -= this.tick;

realtomaszkula

<app-counter [value]="100" [tick]="5"></app-counter>

realtomaszkula

private _autoplay: boolean;
get autoplay(): boolean {
  return this._autoplay;
} 
@Input()
set autoplay(value: boolean) {
  this._autoplay = coerceBooleanProperty(value);
}

realtomaszkula

<div *carousel="let image from images; let ctrl = controller">
  <img [src]="image">
  <button (click)="ctrl.prev()">Previous</button>
  <button (click)="ctrl.next()">Next</button>
</div>

realtomaszkula

@Directive({
  selector: '[carousel]'
})
export class CarouselDirective implements OnInit, OnDestroy {
  // ...
  private _autoplayDelay: number;

  @Input('carouselWithDelay')
  set autoplayDelay(autoplayDelay: number) {
    this._autoplayDelay = autoplayDelay;