@HostBinding('attr.id')
externalId = '';
@Input()
set id(value: string) {
this.#id = value;
this.externalId = null;
}
get id() {
return this.#id;
}
#id = '';
The @HostBinding() allows us to bind a value to the host element, the host element being app-switch. In this case, we are setting the id attribute (attr.id). Our id @Input property we change to become a setter so every time the id input changes it sets the private _ID to hold the value and then sets the HostBinding property externalId to null. By setting the host binding property to null Angular removes the attribute from the DOM solving our duplicate id issue.