@bytesnz

Jack Farley, Computer Engineer

If you want to boolean attributes, a.k.a. @Input() properties on your custom Angular components, you need to add small amount of javascript to get it to work correctly.

<app-my-custom-component wicked></app-my-custom-component>

By default, Angular will treat the value of wicked in the example above as an empty string (""). To allow the input to be used as a boolean attribute, you have to manually set it to true if the value is an empty string in the ngOnInit function of the custom component.

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

@Component({
  standalone: true,
  selector: 'app-my-custom-component',
  templateUrl: './my-custom.component.html',
})
export class MyCustomComponent implements OnInit {
  @Input() wicked: boolean = false;

  ngOnInit(): void {
    if (this.wicked === '') {
      this.wicked = true;
    }
  }
}

Note this has to be done in ngOnInit instead of the constructor for value to be picked up correctly.