Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Super dumb, but this actually works
@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment