Skip to content

Instantly share code, notes, and snippets.

@brandonpittman
Last active January 5, 2021 01:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save brandonpittman/38c9627e40da6967b95fcb280ced1b54 to your computer and use it in GitHub Desktop.
Save brandonpittman/38c9627e40da6967b95fcb280ced1b54 to your computer and use it in GitHub Desktop.
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