Begrip: Angular Inputs

Binnen Angular is het mogelijk om een input property mee te geven aan een component. Dit gebeurt via de @Input() decorator.

We kunnen optioneel ook meegeven dat de input property verplicht is. Dit werkt echter enkel voor de Angular compiler, maar niet voor de TypeScript compiler, het is dus ook nodig om de non-null-assertion operator te gebruiken om TypeScript expliciet duidelijk te maken dat deze property nooit undefined is.

import {Component, Input, OnInit} from '@angular/core'

@Component({
  selector: 'app-foo',
  templateUrl: './app-foo.component.html',
  styleUrls: ['./app-foo.component.scss'],
})
export class FooComponent implements OnInit {

  @Input({required: true}) bar!: IBar
    
  constructor() {
  }

  ngOnInit() {
  }
}